如何在客户端使用HTML5 / Javascript和控制器上的C#代码在MVC中将录制的视频作为blob发布/上传

我正在构建一个视频监控应用程序，其要求是将录制的视频源保存到服务器，以便以后可以提供给观众。我正在使用 MediaRecorder API 来执行此操作，并且由于连续流最终会形成一个非常大的文件，难以一次发布，因此我计划将流 blob 切成多个块并定期发布。现在，记录事件通过html页面中的切换开关触发，然后Javascript接管。

这是我到目前为止的代码：

.HTML：

一些代码...

<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>

一些代码...

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();
}

控制器-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);
        }

问题所在：

当我尝试在服务器端获取收到的.mp4文件时，我可以只播放第一个文件 blob0 和其余文件，尽管它们显示的大小与第一个文件相似(每个 4 MB(不包含任何视频数据。我在另一端收到的数据是否有可能损坏/乱码？还是我的代码有问题。请帮助大家 - 自过去 10 天以来一直在尝试解决这个问题，但不知道如何弄清楚。