我已经看过这个问题了——
连接两个或多个 Webm 视频 blob 的各个部分
并在这里尝试了示例代码 - https://developer.mozilla.org/en-US/docs/Web/API/MediaSource - (没有修改)希望将 blob 转换为数组缓冲区并将其附加到 MediaSource WebAPI 的源缓冲区，但即使是示例代码也无法在我的 chrome 浏览器上运行据说它是兼容的。
我问题的症结在于，我无法在第一次播放后将多个 blob webm 剪辑合并为一个而不会播放不正确。要直接解决问题，请滚动到前两个代码块后面的行，以获取背景继续阅读。
我正在设计一个Web应用程序，允许演示者记录他/她自己解释图表和视频的场景。
我正在使用MediaRecorder WebAPI在chrome/firefox上录制视频。(附带问题 - 除了闪光灯)还有其他方法可以通过网络摄像头和麦克风录制视频/音频吗？因为 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 被调用，一个场景(一个 mimetype '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， blob] => sceneBlob (一个对象，而不是数组)
到目前为止，一切正常，花花公子。这是问题开始的地方
我尝试通过将每个场景的 blob 数组组合到一个长 blob 数组中，将所有场景合并为一个场景。此功能的要点是，用户可以按照他认为合适的方式对场景进行排序，因此他可以选择不包括场景。所以它们不一定与记录它们的顺序相同，所以——
场景 1： [斑点-1， 斑点-1] 场景 2： [斑点-2， 斑点-2] final： [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功能播放视频时，它会一直播放所有场景。但是，如果我在视频第一次播放后按播放，它只会播放最后一个场景。 此外，如果我通过浏览器下载并播放视频，则第一次可以正确播放 - 随后，我看到相同的错误。
我做错了什么？如何将文件合并到一个包含所有场景的视频中？非常感谢您花时间阅读本文并帮助我，如果我需要澄清任何事情，请告诉我。
我正在使用元素来显示场景
文件的标头(元数据)应仅附加到您获得的第一个数据块中。
你不能通过一个接一个地粘贴来制作一个新的视频文件，它们有一个结构。
那么如何解决这个问题呢？
如果我正确理解了您的问题，您需要的是能够合并所有录制的视频，就像只是暂停一样。 好吧，这要归功于MediaRecorder.pause()方法。
您可以保持流打开，只需暂停媒体记录器即可。在每个pause事件中，您将能够生成一个新视频，其中包含从录制开始到此事件的所有帧。
这是一个外部演示，因为堆栈片段不能很好地与 gUM 配合使用......
而且，如果您需要在每个简历和暂停事件之间制作较短的视频，您可以简单地为这些较小的部分创建新的MediaRecorder，同时保持大部分的运行。