The 'dataavailable' event is not being called in React app

[peracc]

I'm trying to use the opus recorder with React's 'create-react-app'. I use the code from the docs:

import OpusMediaRecorder from 'opus-media-recorder';
const options = { mimeType: 'audio/ogg' }

var recorder;

const workerOptions = {
  encoderWorkerFactory: function () {
    return new Worker(process.env.PUBLIC_URL + '/opus-media-recorder/encoderWorker.js')
  },
  OggOpusEncoderWasmPath: process.env.PUBLIC_URL + '/opus-media-recorder/OggOpusEncoder.wasm',
    WebMOpusEncoderWasmPath: process.env.PUBLIC_URL + '/opus-media-recorder/WebMOpusEncoder.wasm',
};

window.MediaRecorder = OpusMediaRecorder;

 componentDidMount() {
   navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
    let options = { mimeType: 'audio/ogg' };
    recorder = new MediaRecorder(stream, options, workerOptions);
    recorder.addEventListener('dataavailable', (e) => {
      console.log('Recording stopped, data available');
    });
}

 startRecording = () => {
      console.log('start recording called')
      recorder.start();
  };
stopRecording = () => {
     console.log('stop recording called')
     recorder.stop();
}
}

All the needed files I put into my PUBLIC folder which is referenced by process.env.PUBLIC_URL. However, the dataavailable event is never fired and so there is no any console output.

[kbumsik]

Hi, I have a few questions for you to get a better answer:

1. Are you sure the callback of navigator.mediaDevices.getUserMedia({ audio: true }).then() is called? How do you call startRecording? in some browsers you must call getUserMedia() in user-initiated callback, such as button click.
2. What browser are you testing with?

[peracc]

@kbumsik I updated the code above to fit more my use-case.

1) Yes, I debugged it to be sure then is being called. startRecording is called from button onClick event, but the getUserMedia is called from React lifecycle function componentDidMount. I didn't have any problems with native MediaRecorder in both Firefox and Chrome. 2) Currently I'm testing it in last releases of Chrome and Firefox, but my main goal is to make it possible to record ogg-opus in Safari 12.

A little update on errors. Just found out an error in Firefox (chrome console doesn't log this) console output after recording started:

ReferenceError: require is not defined encoderWorker.js:2:23

My guess is I can't just refer to encoderWorker.js in my PUBLICf older and I HAVE to use a webpack.config.js instead.

[kbumsik]

@peracc No you can't. You have to have actual files in PUBLIC/opus-media-recorder. You should either manually copy the files (encoderWorker.js, OggOpusEncoder.wasm, WebMOpusEncoder.wasm all of them. Usually located node_modules/opus-media-recorder) to PUBLIC/opus-media-recorder or use a bundler like Webpack.

[peracc]

Well it is actually what I did: copied all files to the PUBLIC/opus-media-recorder. But as I mentioned above it doesn't work for me.

[Felix-Indoing]

same issue here, cannot work with create-react-app, for the same error message

[kbumsik]

@peracc @Felix-Indoing Sorry about that. If you use it without bundler then I think you will need to use encoderWorker.umd.js, not encoderWorker.js. I should've document it.

Also could you provide a full source code of your work? So that I could include create-react-app integration example in the documentation as well.

[peracc]

@kbumsik This fixed the

ReferenceError: require is not defined encoderWorker.js:2:23

error in the Firefox, but the 'dataavailable' event is still not being called :/

[kbumsik]

Hi, I made a create-react-app example in create-react-app branch. I can reproduce the problem you stated, and this unexpected behavior. I'm currently figuring out a fix...

[kbumsik]

@peracc @Felix-Indoing Fixed in d7e4a12. The fix is included in the new version 0.7.19. Please check it out and tell me if it works, if you have time :)

Thank you very much for reporting!

[kauly]

I had a similar problem and for CRA it's much more simpler to go with the cdn approach