从 MediaRecorder blob 部分创建新的 Blob 会导致空 Blob

Question

我遇到了来自new Blob 构造函数的非常奇怪的行为。我有一个由 MediaRecorder 返回的 Blob 数组：

现在，我似乎无法从我的代码中对这个 blob 执行任何操作。在我的代码中运行 new Blob(audioChunks) 会导致输出一个空数组，但在控制台中运行相同的命令会正确创建一个新的 Blob！这是完整的方法：

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        const mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();

        const audioChunks = [];
        mediaRecorder.addEventListener("dataavailable", event => {
          audioChunks.push(event.data);
        });

        sleep(1000).then(r => {
          mediaRecorder.stop();
          console.log(audioChunks) // Show the audioChunks
          console.log(new Blob(audioChunks)) // Show the failed blob
          let audio = new File(new Blob(audioChunks), `${name}.webm`, {
            type: "audio/webm;codecs=opus"
          });
          global.addTrack("filename", audio, id);
          console.log(audioChunks)
        });
      });

当我点击触发它的按钮时，我得到以下控制台输出：

这是作为 Vue.js 中的一种方法构建的，但不确定这是否真的有所作为。

Answer 1

您可能遇到的一个问题是您没有在 mediaRecorder.start() 中设置时间片，因此您的睡眠超时在您获取任何数据之前触发。 （这只是这么短的测试的问题）

要设置更小的时间片（例如 100 毫秒）：

mediaRecorder.start(100);

您还会遇到一些其他问题，但这回答了您最初的问题。

仅供参考，您可以将 blob 数组传递给 new File()，它对我来说是一个 blob。我把它改成了这个，它成功了：

let audio = new File(audioChunks, `${name}.webm`, {
    type: "audio/webm;codecs=opus"
});

我不知道这行的预期目的：

global.addTrack("filename", audio, id);

我在这里收到“未捕获的 ReferenceError：未定义全局”。这是干什么用的？