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

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's issue tracker 上发布了许多类似的问题。 a b c d e

根本原因

其中一个问题，#4 (not listed above)，仍然存在。该问题跟踪器上的几个 cmets 暗示根本问题是 Safari 取消 AudioContext 如果它不是在处理程序中为用户交互（例如单击）创建的。

可能的解决方案

如果你满足以下条件，你也许可以让它工作：

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

替代库

您也可以尝试RecordRTC 软件包中的StereoAudioRecorder class，该软件包拥有更多用户 (3K)，但似乎维护较少，并且可能会起作用

即将提供的支持

如果您希望坚持使用 MediaRecorder API 并且上述提示对您不起作用，好消息是有 experimental support for MediaRecorder in Safari 12.4 and up (iOS and macOS)，并且似乎在最新的 Safari 技术预览版中得到支持。

另见

comments in this issue 也可能有用