c# - How to capture the video to the server using getusermedia -

in application, want user record video. video should downloaded server disk. downloading client browser. how can save 2 or 3 min video server. have used getusermedia this. have written code like:

(function(exports) { exports.url = exports.url || exports.webkiturl; exports.requestanimationframe = exports.requestanimationframe ||     exports.webkitrequestanimationframe || exports.mozrequestanimationframe ||     exports.msrequestanimationframe || exports.orequestanimationframe;  exports.cancelanimationframe = exports.cancelanimationframe ||     exports.webkitcancelanimationframe || exports.mozcancelanimationframe ||     exports.mscancelanimationframe || exports.ocancelanimationframe;  navigator.getusermedia = navigator.getusermedia ||     navigator.webkitgetusermedia || navigator.mozgetusermedia ||     navigator.msgetusermedia;  var original_doc_title = document.title; var video = $('video'); var canvas = document.createelement('canvas');  var rafid = null; var starttime = null; var endtime = null;      function $(selector) {     return document.queryselector(selector) || null; }  function toggleactivaterecordbutton() {     var b = $('#record-me');     b.textcontent = b.disabled ? 'record' : 'recording...';     b.classlist.toggle('recording');     b.disabled = !b.disabled; }  function turnoncamera(e) {     e.target.disabled = true;     $('#record-me').disabled = false;      video.controls = false;      var finishvideosetup_ = function() {          settimeout(function() {             video.width = 320;             video.height = 240;                        canvas.width = video.width;             canvas.height = video.height;         }, 1000);     };             navigator.getusermedia({video: true}, function(stream) {         video.src = window.url.createobjecturl(stream);         finishvideosetup_();     }, function(e) {                    video.src = 'chrome_imf.mp4';         finishvideosetup_();     });      if (navigator.getusermedia) {         navigator.getusermedia({ audio: true }, onrecordsucces, onfail);     } else {         console.log('navigator.getusermedia not present');     }   };  function record() {     var elapsedtime = $('#elasped-time');     var ctx = canvas.getcontext('2d');     var canvas_height = canvas.height;     var canvas_width = canvas.width;     frames = []; // clear existing frames;     starttime = date.now();     toggleactivaterecordbutton();     $('#stop-me').disabled = false;     function drawvideoframe_(time) {         rafid = requestanimationframe(drawvideoframe_);         ctx.drawimage(video, 0, 0, canvas_width, canvas_height);         document.title = 'recording...' + math.round((date.now() - starttime) / 1000) + 's';           var url = canvas.todataurl('image/webp', 1);          frames.push(url);     };     rafid = requestanimationframe(drawvideoframe_);     startrecording(); };  function stop() {     cancelanimationframe(rafid);     endtime = date.now();     $('#stop-me').disabled = true;     document.title = original_doc_title;     toggleactivaterecordbutton();         embedvideopreview(); };   function embedvideopreview(opt_url) {     var url = opt_url || null;     var video = $('#video-preview video') || null;     var downloadlink = $('#video-preview a[download]') || null;      if (!video) {         video = document.createelement('video');         video.autoplay = true;         video.controls = true;                video.style.width = canvas.width + 'px';         video.style.height = canvas.height + 'px';         $('#video-preview').appendchild(video);          downloadlink = document.createelement('a');         downloadlink.download = 'capture.webm';         downloadlink.textcontent = '[ download video ]';         downloadlink.title = 'download .webm video';         var p = document.createelement('p');         p.appendchild(downloadlink);          $('#video-preview').appendchild(p);      } else {         window.url.revokeobjecturl(video.src);     }        if (!url) {         webmblob = whammy.fromimagearray(frames, 1000 / 60);         url = window.url.createobjecturl(webmblob);      video.src = url;     downloadlink.href = url; }  function initevents() {     $('#camera-me').addeventlistener('click', turnoncamera);     $('#record-me').addeventlistener('click', record);     $('#stop-me').addeventlistener('click', stop); }  initevents();  exports.$ = $;  })(window); 

when clicking on download link downloaded user browser. want send data server , save in server disk. have tried pass webmblob data controller , retrieve. not accessing. have written code like

 $.ajax({      url: '/home/videodata',      type: 'post',      datatype: 'blob',      cache: false,      data: {            data: webmblob            },      contenttype: "application/json; charset=utf-8",      error: function (xhr, status, error) {      },      success: function () {       },    }); 

in controller have defined like

  public actionresult videodata(string data)   {       return json("success", jsonrequestbehavior.allowget);   } 

but data coming controller [object blob]. sorry english. hope understand question. how can convert video. surely appreciated.

mediastreamrecorder webrtc api recording getusermedia() streams . allows web apps create file 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 unprefixed.   return !!(navigator.getusermedia || navigator.webkitgetusermedia ||             navigator.mozgetusermedia || navigator.msgetusermedia); }  if (hasgetusermedia()) {   // go! } else {   alert('getusermedia() not supported in 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.foundthru.co.uk/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 recorder media file, send server.