是否有可能将多个webm块/剪辑合并成一个连续的视频客户端？

Question

我已经看过这个问题了-

连接两个或多个webm视频块的部分

并尝试了这里的示例代码-- https://developer.mozilla.org/en-US/docs/Web/API/MediaSource --(无需修改)，希望将这些blobs转换成数组缓冲区，并将它们附加到MediaSource WebAPI的原始缓冲区中，但即使是示例代码也无法在我的chrome浏览器上工作，据说它是兼容的。

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

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

我正在使用MediaRecorder WebAPI在chrome/firefox上录制视频。(旁白-除了闪光灯外，还有什么其他的方法可以通过摄像头和麦克风录制视频/音频吗？)因为Chrome/Firefox用户代理不支持MediaRecorder )。

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被调用，场景( mimetype 'video/webm')的数组被保存到场景数组中。在它被拯救之后。然后，用户可以通过这个过程记录和保存更多的场景。然后，他可以使用下面的代码块查看某个场景。

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属性，so - blob，blob，blob => sceneBlob (一个对象，而不是数组)为其创建了一个url。

在此之前，一切都很顺利。这是问题的起点

通过将每个场景的blob数组合并为一个长blob数组，我尝试将所有场景合并为一个。这个功能的目的是让用户可以在他/她认为合适的时候订购场景，这样他就可以选择不包括场景。所以它们不一定和记录的顺序相同，所以-

场景1: blob-1，blob-1场景2: blob-2最后: blob-2，blob-2，blob-1，blob-1

然后，我对最后的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

文件的头(元数据)只应附加到您获得的第一个数据块。

你不能通过一个又一个地粘贴一个新的视频文件，他们有一个结构。

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

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

您可以保持流打开，只需暂停MediaRecorder。在每个pause事件中，您将能够生成一个包含从录制开始到此事件的所有帧的新视频。

这里是一个外部演示，因为堆栈片段不能很好地处理gUM.

如果您还需要在每次简历和暂停事件之间使用较短的视频，您可以为这些较小的部分创建新的MediaRecorders，同时保持大的部分运行。