Question

以下是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
  };
})();

由于known bug带有opus编解码器，因此目前无法在Chrome中使用。看起来它最近已被修复，所以它应该在几个月内达到稳定释放（我想？）。

所以我的问题是：我上面提到的“你好世界”是否正确？它似乎在firefox上工作正常，并且很快就会在chrome上工作，但我不完全确定规范的所有细节，我只是想确保我做的一切正常。关于示例代码正确性的一些子问题：

在Firefox中，mediaRecorder.mimeType是一个空字符串，但Blob仍然是成功创建的。在Chrome中，mediaRecorder.mimeType是“video / webm”，即使我在video:false选项中指定了getUserMedia。这是怎么回事？
我是否需要使用fetch将blob转换为数组缓冲区？这并不难，但似乎有点笨拙。
是否有解决方法，因此在解决编解码器错误时，它可以在Chrome中运行？我在阅读this后尝试了new MediaRecorder(stream, {mimeType:"audio/wav"});，但它给了我一个“mimeType not supported”错误。事实上，除了“video / webm”之外的任何mimeType都会在chrome上出错，而且似乎firefox只是忽略了mimeType选项。
在mdn article on MediaRecorder他们使用new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });。他们为什么选择那种类型和编解码器？那怎么知道这是MediaRecorder使用的实际mime类型和编解码器？他们怎么知道mime-type适用于所有浏览器？

This是一个相关的问题/答案。真的，我只是喜欢一些我知道在3个月内不会破解的代码，因为浏览器会实现这些代码并调整规范。如果它现在也适用于镀铬，那将是一个奖励。谢谢！

MediaRecorder API简单示例/“hello world”

0 个答案: