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

Question

我正在构建一个视频监视应用程序，其中的要求是将录制的视频提要保存到服务器，以便以后可以将它们提供给查看者。 我正在使用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文件时，尽管它们显示的大小与第一个文件类似（每个文件4 mb），但其中不包含任何视频数据，所以我只能播放第一个文件blob0，其余文件可以播放。 我在另一端收到的数据是否有损坏/乱码？ 还是我的代码有问题。 请帮助大家-最近10天以来一直在尝试解决此问题，但不知道如何解决。

Answer 1

mp4文件的标头放在文件的开头。 标题包含用于初始化解码器的信息，没有它，文件将无法播放。 尝试串联文件（第一个和第二个），看看是否播放了整个文件。 如果是，则问题是缺少标题。 如果不是，请将两个文件发送给我，以便我检查它们并查看其中确切存储了什么。

AFAIK无法指示MediaRecorder将标头附加到视频的每个blob。 您必须手动执行。

PS。 回复晚了非常抱歉。

Answer 2

您可以使用Muaz Khan的RecordRTC，也可以使用MVC部分来录制视频并将其保存到服务器。