веб-работник не общается с реагирующим компонентом

Question

Я использую audio-рекордер-полифилл в своем проекте 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-рекордер-полифилл было опубликовано несколько аналогичных проблем. a b c d e

Root причина

Один из этих вопросов, # 4 (не указан выше) , по-прежнему открыт. В нескольких комментариях к этой системе отслеживания проблем указывается, что проблема root заключается в том, что Safari отменяет AudioContext, если он не был создан в обработчике для взаимодействия с пользователем (например, щелчок).

Возможные решения

Вы можете заставить его работать, если вы:

1. Выполните инициализацию внутри обработчика для взаимодействия с пользователем (т.е. <button onclick="recordFunc()">)
2. Не пытайтесь повторно использовать MediaStream, возвращаемый из getUserMedia() для нескольких записей
3. Не пытайтесь делать более 4 (или 6?) Аудиозаписей на одной странице (источники [ 1 ], [ 2 ] упоминают, что Safari заблокирует это)

Альтернативные библиотеки

Вы также можете попробовать StereoAudioRecorder класс из пакета RecordRT C, который имеет больше пользователей (3 КБ), но выглядит менее поддерживаемым и может работать

Предстоящая поддержка

Если вы предпочитаете придерживаться MediaRecorder API, и приведенные выше советы не работают для вас, хорошая новость заключается в том, что существует экспериментальная поддержка MediaRecorder в Safari 12.4 и выше (iOS и macOS) , и, похоже, он поддерживается в последнем Safari Technology Preview.

См. Также

Комментарии в этом выпуске также могут быть полезны