0

下面是 MediaRecorder API 的一个简单示例：

(async function() {
  let chunks = [];
  let stream = await navigator.mediaDevices.getUserMedia({ audio:true, video:false });
  let mediaRecorder = new MediaRecorder(stream);

  // record for 3 seconds:
  mediaRecorder.start();
  setTimeout(() => { mediaRecorder.stop(); }, 3000)

  mediaRecorder.ondataavailable = function(e) { chunks.push(e.data); };
  mediaRecorder.onstop = async function() {
    let blob = new Blob(chunks, { type: mediaRecorder.mimeType });
    let audioURL = window.URL.createObjectURL(blob);
    let arrayBuffer = await (await fetch(audioURL)).arrayBuffer();
    let audioBuffer = await (new AudioContext()).decodeAudioData(arrayBuffer);
    // ... do stuff with audioBuffer
  };
})();

由于opus 编解码器的一个已知错误，这目前在 chrome 中不起作用。看起来它最近已经修复，所以它应该在几个月内达到稳定版本（我想？）。

所以我的问题是：我上面介绍的“hello world”是否正确？它似乎在 Firefox 上运行良好，并有望很快在 chrome 上运行，但我不太确定规范的所有细节，我只是想确保我做的一切都是正确的。关于示例代码正确性的一些子问题：

  • 在 Firefox 中，mediaRecorder.mimeType是一个空字符串，但Blob显然仍然成功创建。在 chrome 中，mediaRecorder.mimeType即使我video:false在getUserMedia选项中指定，也是“video/webm”。这里发生了什么？
  • 我是否需要使用fetch将 blob 转换为数组缓冲区？这并不难，但似乎有点hacky。
  • 是否有解决方法，以便在整理编解码器错误时在 Chrome 中工作？new MediaRecorder(stream, {mimeType:"audio/wav"});我在阅读此内容后尝试过，但它给了我一个“不支持 mimeType”的错误。事实上，mimeType除“video/webm”之外的任何其他内容都会在 chrome 上出现错误，并且似乎 firefox 只是忽略了该mimeType选项。
  • 在有关 MediaRecorder 的mdn 文章中，他们使用new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });. 他们为什么选择那种类型和编解码器？他们怎么知道这是 MediaRecorder 使用的实际 MIME 类型和编解码器？他们怎么知道 mime-type 可以在所有浏览器中工作？

这是一个相关的问题/答案。真的，我只是想要一些我知道在 3 个月内不会中断的代码，因为事情是由浏览器实现的，并且规范是经过调整的。如果它现在也可以与 chrome 一起使用，那将是一个奖励。谢谢！

4

0 回答 0