javascript - StreamMediaRecorder - 创建并播放包含所有已保存部分的 blob 文件

Question

我有一个使用具有PAUSE功能的 StreamMediaRecorder JS API 的录像机应用程序。每当用户暂停录制时，应保存一个新的 blob 切片，最后应保存一个大的 blob 文件。

let chunks = [];
let player = document.getElementById('player');

recorder.ondataavailable = (event) => chunks.push(event.data);
recoder.onstop = (event) => {

    var blob = new Blob([chunks], { type: 'octet/stream' });
    player.src = URL.createObjectURL(blob);
}

但是，保存的每个 blob 文件只是播放最后一段，而不是整个文件。创建 blob 变量后，大小等于所有 blob 块的总和，但在播放时，只播放最后一块。

任何人都知道如何解决它？谢谢大家！

Answer 1

连接使用MediaRecorder.

@Kaiido 发布的链接应该提供使用.pause()and .resume()ofMediaRecorder()和AudioContext()and的解决方案HTMLCanvasElement.captureStream()。

要完全实现要求，您可以使用ts-ebml设置为使用创建的媒体文件的元数据MediaRecorder。

可以使用并MediaRecorder移植到 JavaScript 以在浏览器中使用以实现 OP 中描述的要求，请参阅https://github.com/guest271314/recordMediaFragments/blob/master/demos/recordMediaFragments.html。MediaSourcets-ebml

完全披露，我是https://github.com/guest271314/recordMediaFragments的作者。