网络工作者不与反应组件通信

Question

我在我的 React 项目中使用了audio-recorder-polyfill，以便为 Safari 进行录音。它似乎可以让录音发生，但是，没有可用的音频数据。事件“dataavailable”永远不会被触发，并且在停止记录后似乎也没有数据被“编译”。

   recordFunc() {
      navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
         recorder = new MediaRecorder(stream);
         // Set record to <audio> when recording will be finished
         recorder.addEventListener('dataavailable', e => {
           this.audio.current.src = URL.createObjectURL(e.data);
         })
         // Start recording
         recorder.start();
       })
   }
   stopFunc() {
      // Stop recording
      recorder.stop();
      // Remove “recording” icon from browser tab
      recorder.stream.getTracks().forEach(i => i.stop());
   }

Answer 1

在audio-recorder-polyfill 的 issue tracker上发布了许多类似的问题。 一个 b Ç d È

根本原因

其中一个问题，#4（上面未列出），仍然没有解决。关于该问题跟踪器的一些评论暗示，根本问题是 Safari 取消了AudioContext它，如果它不是在用户交互（例如单击）的处理程序中创建的。

可能的解决方案

如果您：

1. 在用户交互的处理程序中进行初始化（即<button onclick="recordFunc()">）
2. 不要尝试重复使用MediaStream返回getUserMedia()的多个记录
3. 不要在同一页面上尝试超过 4 个（或 6 个？）录音（来源 [ 1 ]、[ 2 ] 提到 Safari 会阻止这个）

替代图书馆

您可能还可以尝试StereoAudioRecorder类从RecordRTC包，里面有更多的用户（3K），但似乎少维护，可能工作

即将到来的支持

如果您更愿意坚持使用 MediaRecorder API 并且上述提示对您不起作用，那么好消息是Safari 12.4 及更高版本（iOS 和 macOS）中对 MediaRecorder 提供了实验性支持，并且似乎受支持在最新的 Safari 技术预览版中。

也可以看看

这个问题的评论也可能有用