Question

我有一个使用StreamMediaRecorder JS API的录像机应用程序，它具有 PAUSE 功能。每当用户暂停录制时，都应保存一个新的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块的总和，但是在播放时，只播放最后一个。

任何人都知道如何解决它？感谢y＆＃39; all！

Answer 1

连接使用MediaRecorder录制的媒体资源的录制并不是一项微不足道的任务。

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

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

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

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

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

1 个答案: