-
-
Save jaredly/7417104 to your computer and use it in GitHub Desktop.
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>Video recording demo</title> | |
| <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> | |
| <link rel="stylesheet" type="text/css" href="index.css"> | |
| </head> | |
| <body> | |
| <video autoplay></video> | |
| <script language="javascript" type="text/javascript"> | |
| </script> | |
| <div> | |
| Status: <span class="label label-warning" id="status"></span> | |
| </div> | |
| <div id="log" class="well">Here is the log:</div> | |
| <div id="webcamcontrols"> | |
| <button class="recordbutton btn btn-primary" onclick="startRecording();">RECORD</button> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| function stat(x) { | |
| document.getElementById('status').innerHTML = x; | |
| logit(x) | |
| } | |
| function logit(x) { | |
| document.getElementById('log').innerHTML += '<br>\n' + x | |
| } | |
| function onVideoFail(e) { | |
| logit('webcam fail!') | |
| console.log('webcam fail!', e); | |
| }; | |
| function hasGetUserMedia() { | |
| // Note: Opera is unprefixed. | |
| return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia || navigator.msGetUserMedia); | |
| } | |
| if (hasGetUserMedia()) { | |
| // Good to go! | |
| } else { | |
| alert('getUserMedia() is not supported in your browser'); | |
| } | |
| window.URL = window.URL || window.webkitURL; | |
| navigator.getUserMedia = navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia || | |
| navigator.msGetUserMedia; | |
| var video = document.querySelector('video'); | |
| var streamRecorder; | |
| var webcamstream; | |
| if (navigator.getUserMedia) { | |
| navigator.getUserMedia({audio: true, video: true}, function(stream) { | |
| stat('got user media; streaming'); | |
| video.src = window.URL.createObjectURL(stream); | |
| webcamstream = stream; | |
| // streamrecorder = webcamstream.record(); | |
| }, onVideoFail); | |
| } else { | |
| stat('failed to ge tuser media') | |
| alert ('failed'); | |
| } | |
| function startRecording() { | |
| stat('trying to record') | |
| try { | |
| streamRecorder = webcamstream.record(); | |
| stat('recording!') | |
| } catch (e) { | |
| stat('Failed to record!') | |
| logit('<br>' + e.message) | |
| logit('<pre>' + e.stack + '</pre>') | |
| setTimeout(stopRecording, 10000); | |
| } | |
| function stopRecording() { | |
| stat('getting recorded data') | |
| streamRecorder.getRecordedData(postVideoToServer); | |
| } | |
| function postVideoToServer(videoblob) { | |
| stat('got recorded data!') | |
| var data = {}; | |
| data.video = videoblob; | |
| data.metadata = 'test metadata'; | |
| data.action = "upload_video"; | |
| //jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess); | |
| console.log('Posting!'); | |
| } | |
| function onUploadSuccess() { | |
| alert ('video uploaded'); | |
| } |
Hello ,
I have the same error:
Getting Error on console webcamstream.record is not a function..Please help me for this
I use the last version of Chrome.
Here is the webcanstream description:
active
:
true
id
:
"5xLqHn4DG8GMDNxnMWdkMie5ce7T5caHUaR7"
onactive
:
null
onaddtrack
:
null
oninactive
:
null
onremovetrack
:
null
proto
:
MediaStream
active
:
(...)
get active
:
()
addTrack
:
addTrack()
clone
:
clone()
constructor
:
MediaStream()
getAudioTracks
:
getAudioTracks()
getTrackById
:
getTrackById()
getTracks
:
getTracks()
getVideoTracks
:
getVideoTracks()
id
:
(...)
get id
:
()
onactive
:
(...)
get onactive
:
()
set onactive
:
()
onaddtrack
:
(...)
get onaddtrack
:
()
set onaddtrack
:
()
oninactive
:
(...)
get oninactive
:
()
set oninactive
:
()
onremovetrack
:
(...)
get onremovetrack
:
()
set onremovetrack
:
()
removeTrack
:
removeTrack()
Symbol(Symbol.toStringTag)
:
"MediaStream"
proto
:
EventTarget
Getting Error on console webcamstream.record is not a function..Please help me for this