How to post/upload recorded video as blob in MVC using HTML5/ Javascript at client side and C# code at controller? -

i building video surveillance application requirement save recorded video feeds server can served viewer later. using mediarecorder api so, , continuous stream end in large file difficult posted @ once, plan chop stream blob multiple chunks , keep posting periodically. recording event fired toggle switch in html page , javascript takes over.

here code have far:

html:

some code...

<div class="onoffswitch">             <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch1">             <label class="onoffswitch-label" for="switch1" onclick="togglevideofeed();">                 <span class="onoffswitch-inner"></span>                 <span class="onoffswitch-switch"></span>             </label>         </div> 

some code...

javascript:

var mediarecorder; var pushinterval = 6000; var id, counter = 0; // var formdata;  function togglevideofeed() {     var element = document.getelementbyid("switch1");      element.onchange = (function (onchange) {         return function (evt) {             // reference event pass argument             evt = evt || event;              // if existing event existed execute it.             if (onchange) {                 onchange(evt);             }              if (evt.target.checked) {                 startrecord();              } else {                 stoprecord();             };         }     })(element.onchange); }   var dataavailable = function (e) {      var formdata = new formdata();     var filename = "blob" + counter + ".mp4";      console.log("data size: ", e.data.size);      var encodedata = new blob([e.data], { type: 'multipart/form-data' });     formdata.append("blob", encodedata, filename);      var request = new xmlhttprequest();     request.open("post", "/device/upload", false);     request.send(formdata);     counter++;  }  function startrecord() {      navigator.getusermedia = (navigator.getusermedia ||                        navigator.webkitgetusermedia ||                        navigator.mozgetusermedia ||                        navigator.msgetusermedia);      if (navigator.getusermedia) {         navigator.getusermedia(             // constraints            {                video: true,                audio: false            },             // successcallback            function (stream) {                 mediarecorder = new mediarecorder(stream);                mediarecorder.start();                mediarecorder.ondataavailable = dataavailable;                // setinterval(function () { mediarecorder.requestdata() }, 10000);            },             // errorcallback            function (err) {                console.log("the following error occured: " + err);            }         );     } else {         console.log("getusermedia not supported");     }  }  function stoprecord() {     mediarecorder.stop(); } 

controller-c#

[httppost]          public jsonresult upload(httppostedfilebase blob)         {             string filename = blob.filename;              int = request.files.count;             blob.saveas(@"c:\users\priya_000\desktop\videos\" + filename);              return json("success: " + + filename);         } 

the problem:

when try playing received .mp4 files them on server end, can play first file blob0 , rest although show similar sizes first file (4 mb each) not contain video data. possible data receive on other end corrupt/ garbled? or there wrong code. please guys - have been trying solve problem since last 10 days no clue how figure out.

mp4 files have header put @ beginning of file. header contains information used initialize decoder , without file cannot played. try concatenating files (the first 1 , second one) , see if whole file plays. if yes problem missing header. if not please send me 2 files can inspect them , see stored in these.

there no way afaik instruct mediarecorder append header each blob of video. have manually.

ps. sorry late response.