javascript - Web Worker 不与 React 组件通信

Question

我使用audio-recorder-polyfill在我的 React 项目中，使 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) ，仍然开放。该问题跟踪器上的一些评论暗示根本问题是 Safari 取消了 AudioContext如果它不是在用户交互(例如单击)的处理程序中创建的。

可能的解决方案

如果您满足以下条件，则可能能够使其正常工作:

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

替代库

您也许还可以尝试 StereoAudioRecorder class来自RecordRTC包，它有更多用户 (3K)，但似乎维护较少，并且可能有效

即将推出的支持

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

另请参阅

comments in this issue可能也有用