HTML5 solution to upload a webcam/camera video stream to server

Question

Using getUserMedia I can capture video stream from client's webcam/camera. And using video tag I can show it on client's browser. Code:

<video autoplay></video>  <script type="text/javascript">     window.URL = window.URL || window.webkitURL;     navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;      var video = $('video')[0];      var failed = function(e) {         console.log('Denied!', e);     };      if( navigator.getUserMedia ) {         navigator.getUserMedia( {video: true, audio: true}, function( stream ) {                 video.src = window.URL.createObjectURL(stream);             }, failed         )     } else {         console.log( 'Not supported!' );     } </script> 

Now is it possible to send this video stream, either as a realtime feed or after user has done recording and decided to upload, to a server?

I found few examples of:

• sending binary images to server over websocket
• Periodically capture frame of streaming video and send that as image

Answer 1

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams . It allows web apps to create a file from a live audio/video session.

 <video autoplay></video>      <script language="javascript" type="text/javascript">     function onVideoFail(e) {         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) {         video.src = window.URL.createObjectURL(stream);         webcamstream = stream;     //  streamrecorder = webcamstream.record();       }, onVideoFail);     } else {         alert ('failed');     }      function startRecording() {         streamRecorder = webcamstream.record();         setTimeout(stopRecording, 10000);     }     function stopRecording() {         streamRecorder.getRecordedData(postVideoToServer);     }     function postVideoToServer(videoblob) {          var data = {};         data.video = videoblob;         data.metadata = 'test metadata';         data.action = "upload_video";         jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);     }     function onUploadSuccess() {         alert ('video uploaded');     }      </script>      <div id="webcamcontrols">         <button class="recordbutton" onclick="startRecording();">RECORD</button>     </div> 

Spec:

http://www.w3.org/TR/mediastream-recording/

you can send recorded file to server.