Javascript 连接多个Blob会产生损坏的媒体文件

我有一个示例，我是这样实例化的：

const mediaRecorder = new MediaRecorder(stream, {
  mimeType: 'video/x-matroska;codecs=h264',
  videoBitsPerSecond: 2500000,
  audioBitsPerSecond: 128000,
});

mediaRecorder.ondataavailable = (e) => {
  const blobUrl = URL.createObjectURL(e.data);
  try {
    const hyperlink = document.createElement('a');
    hyperlink.href = blobUrl;
    hyperlink.target = '_blank';
    hyperlink.download = 'some_file_name_' + Date.now();

    const evt = new MouseEvent('click', {
      view: globalThis.window,
      bubbles: true,
      cancelable: true
    });
    hyperlink.dispatchEvent(evt);
  } finally {
    URL.revokeObjectURL(blobUrl);
  }
};

mediaRecorder.start(5000);

这段代码在我的下载文件夹中留下了许多小文件。我想将它们连接在一起，这是我使用节点的

appendFile

API实现的。问题是视频文件在第一段之后不能正确播放。有人对调试这个有什么建议吗？

有两个问题

第一个问题是blob下载需要适当的类型，即

application/octet-stream

。我实现这一目标的方式是：

    const reader = new FileReader();
    reader.onloadend = (_) => {
      const result = reader.result as ArrayBuffer;
      const blob = new Blob([result], { type: 'application/octet-stream' });
      const blobUrl = URL.createObjectURL(blob);
      // Download the blob
    }
    reader.readAsArrayBuffer(e.data);

第二个问题是readFile的默认编码为null，这很好。但是appendFile的默认编码是

utf8

，这是错误的

---

这可以通过

promisify（appendFile）（文件名，数据，{encoding:'binary'}）修复

“这段代码在我的下载文件夹中留下了许多小文件。我想将它们连接在一起”-那么为什么要使用

ondataavailable

然后使用“定期触发”？检查您在问题中链接的页面上的示例，该示例显示了如何存储完整的录音而不是块。@Andreas，因为在发生意外关机时定期保存录音非常重要。然后，再次检查您问题中的链接

ondataavailable

：…定期触发（如果未指定

timeslice

，则在记录整个媒体时触发）。请使用“最后一个”“

ondataavailable

或只需在顶部添加一个

处理程序即可。@Andreas感谢您抽出时间提供帮助。提供了timeslice参数，我定期从媒体记录器中获取数据。问题在于，将磁盘上的数据组合在一起失败，而在内存中组合成功。如果只将完整记录存储在
onstop
事件中，则没有什么可组合的