web worker not communicating with react component

4
votes

I use audio-recorder-polyfill in my React project, to make possible audio recording for Safari. It seems to work in getting the recording to take place, however, no audio data gets available. The event "dataavailable" never gets fired, and no data seems to be "compiled" after stopping recording either.

   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());
   }
1
javascriptreactjsweb-mediarecorder
Always check caniuse. In this case: caniuse.com/#search=dataavailable, so it's a pretty safe bet that this is entirely unsuported in Safari/webkit, and you're going to have to convince folks over on the webkit issue tracker that this should even be worked on – Mike 'Pomax' Kamermans
Supposedly the polyfill will add support for browsers that don't support it natively. But it would be good to know whether it does work at all in browsers that do support it or whether it's a problem of the polyfill. – milgner
The official demo of polyfill doesn't work properly in safari (13.0.5) ai.github.io/audio-recorder-polyfill – artanik
Have you tried assigning your handler as recorder.ondataavailable = ( e => { ... } ); instead? – TheJim01
Can you add some more of your react code? Maybe a code sandbox link, problem might be somewhere else. Does it work out other browsers which support this natively? – tudor.gergely

1 Answers

5
votes

There have been a number of similar issues posted on audio-recorder-polyfill's issue tracker. a b c d e

Root cause

One of those issues, #4 (not listed above), is still open. Several comments on that issue tracker hint that the root issue is that Safari cancels the AudioContext if it was not created in a handler for a user interaction (e.g. a click).

Possible solutions

You may be able to get it to work if you:

  1. Do the initialisation inside a handler for user interaction (i.e. <button onclick="recordFunc()">)
  2. Do not attempt to reuse the MediaStream returned from getUserMedia() for multiple recordings
  3. Do not attempt more than 4 (or 6?) audio recordings on the same page (sources [1], [2] mention that Safari will block this)

Alternative libraries

You might also be able to try the StereoAudioRecorder class from the RecordRTC package, which has more users (3K) but appears less maintained, and might work

Upcoming support

If you'd prefer to stick to the MediaRecorder API and the tips above don't work for you, the good news is that there is experimental support for MediaRecorder in Safari 12.4 and up (iOS and macOS), and it appears to be supported in the latest Safari Technology Preview.

See also

The comments in this issue may also be useful