javascript - 是否可以将多个 webm blob/剪辑合并到一个顺序视频客户端中？

Question

我已经看过这个问题了-

Concatenate parts of two or more webm video blobs

并在这里尝试了示例代码 - https://developer.mozilla.org/en-US/docs/Web/API/MediaSource --(没有修改)希望将 blob 转换为数组缓冲区并将它们附加到 MediaSource WebAPI 的源缓冲区，但即使是示例代码也不能在我的 chrome 浏览器上运行，据说它是兼容的。

我的问题的症结在于，我无法将多个 blob webm 剪辑组合成一个，而不会在第一次播放后播放不正确。要直接解决问题，请滚动到前两段代码之后的行，以便继续阅读背景知识。

我正在设计一个网络应用程序，允许演示者录制他/她解释图表和视频的场景。

我正在使用 MediaRecorder WebAPI 在 chrome/firefox 上录制视频。 (附带问题 - 除了 Flash 之外，还有其他方法可以通过网络摄像头和麦克风录制视频/音频吗？因为 MediaRecorder 不支持 Chrome/Firefox 用户代理)。

navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMedia)
    .catch(e => { console.error('getUserMedia() failed: ' + e); });

function gotMedia(stream) {
    recording = true;
    theStream = stream;
    vid.src = URL.createObjectURL(theStream);
    try {
        recorder = new MediaRecorder(stream);
    } catch (e) {
        console.error('Exception while creating MediaRecorder: ' + e);
        return;
    }

    theRecorder = recorder;
    recorder.ondataavailable = 
        (event) => {
            tempScene.push(event.data);
        };

    theRecorder.start(100);
}

function finishRecording() {
    recording = false;
    theRecorder.stop();
    theStream.getTracks().forEach(track => { track.stop(); });

    while(tempScene[0].size != 1) {
        tempScene.splice(0,1);
    }

    console.log(tempScene);

    scenes.push(tempScene);
    tempScene = [];
}

函数 finishRecording 被调用，场景(mime 类型“video/webm”的 blob 数组)被保存到场景数组中。保存后。然后用户可以通过此过程记录和保存更多场景。然后，他可以使用以下代码块查看特定场景。

function showScene(sceneNum) {
    var sceneBlob = new Blob(scenes[sceneNum], {type: 'video/webm; codecs=vorbis,vp8'});
    vid.src = URL.createObjectURL(sceneBlob);
    vid.play();
}

在上面的代码中，场景的 blob 数组变成了一个大 blob，视频的 src 属性为其创建并指向了一个 url，所以 - [blob, blob, blob] => sceneBlob(一个对象，不是数组)

---

到目前为止，一切都运行良好。这是问题开始的地方

我尝试通过将每个场景的 blob 数组组合成一个长 blob 数组来将所有场景合并为一个。此功能的要点是用户可以按他/她认为合适的方式订购场景，因此他可以选择不包含场景。所以它们不一定与记录时的顺序相同，所以 -

场景 1:[blob-1，blob-1] 场景 2:[blob-2，blob-2] 最后:[blob-2, blob-2, blob-1, blob-1]

然后我将最终的 blob 数组制成一个 blob，所以 - final: [blob, blob, blob, blob] => finalBlob 下面是合并场景 blob 数组的代码

function mergeScenes() {
    scenes[scenes.length] = [];
    for(var i = 0; i < scenes.length - 1; i++) {
        scenes[scenes.length - 1] = scenes[scenes.length - 1].concat(scenes[i]);
    }
    mergedScenes = scenes[scenes.length - 1];
    console.log(scenes[scenes.length - 1]);
}

可以使用第二小块代码中的 showScene 函数查看最后一个场景，因为它被附加为场景数组中的最后一个场景。当使用 showScene 函数播放视频时，它会一直播放所有场景。但是，如果我在第一次播放视频后按播放键，它只会播放最后一个场景。 此外，如果我通过浏览器下载并播放视频，第一次播放时它会正确播放——随后的几次，我都会看到同样的错误。

我做错了什么？如何将文件合并到一个包含所有场景的视频中？非常感谢您花时间阅读本文并帮助我，如果我需要澄清任何问题，请告诉我。

我正在使用一个元素来显示场景

Answer 1

文件的标题(元数据)应该只附加到您获得的第一个数据 block 。
你不能通过一个接一个地粘贴来制作新的视频文件，它们有一个结构。

那么如何解决这个问题呢？

如果我理解正确你的问题，你需要的是能够合并所有录制的视频，就像它只是暂停一样。 这要归功于 MediaRecorder.pause() 方法。

您可以保持流打开，并简单地暂停 MediaRecorder。在每个 pause 事件中，您都可以生成一个新视频，其中包含从录制开始到该事件为止的所有帧。

这是一个 external demo因为 stacksnippets 不适用于 gUM...

如果您还需要在每次恢复和暂停事件之间制作较短的视频，您可以简单地为这些较小的部分创建新的 MediaRecorder，同时保持较大的部分运行。