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

I am building a video surveillance application where the requirement is to save recorded video feeds to the server so that they can be served up to the viewer later. Am using MediaRecorder API to do so, and as the continuous stream would end up in a very large file difficult to be posted all at once, i plan to chop the stream blob into multiple chunks and keep posting periodically. Now the recording event is fired with a toggle switch in html page and then Javascript takes over.

Here is the code that i have so 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 to event to pass argument properly
            evt = evt || event;

            // if an existing event already existed then 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 i = Request.Files.Count;
            blob.SaveAs(@"C:\Users\priya_000\Desktop\Videos\" + fileName);

            return Json("success: " + i + fileName);
        }

THE PROBLEM:

When i try playing the received .mp4 files as i get them on the server end, i can play just the first file blob0 and the rest although they show similar sizes to the first file (4 mb each) do not contain any video data. Is it possible that the data i receive on the other end is corrupt/ garbled? Or is there something wrong with my code. Please help guys - Have been trying to solve this problem since the last 10 days with no clue how to figure it out.