The 'dataavailable' event is not being called in React app
peracc opened this issue · 10 comments
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.
Hi, I have a few questions for you to get a better answer:
- Are you sure the callback of
navigator.mediaDevices.getUserMedia({ audio: true }).then()
is called? How do you callstartRecording
? in some browsers you must callgetUserMedia()
in user-initiated callback, such as button click. - What browser are you testing with?
@kbumsik
I updated the code above to fit more my use-case.
- Yes, I debugged it to be sure
then
is being called.startRecording
is called from buttononClick
event, but thegetUserMedia
is called from React lifecycle functioncomponentDidMount
. I didn't have any problems with native MediaRecorder in both Firefox and Chrome. - 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 PUBLIC
f older and I HAVE to use a webpack.config.js
instead.
@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.
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.
same issue here, cannot work with create-react-app, for the same error message
@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.
@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 :/
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...
@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!
I had a similar problem and for CRA it's much more simpler to go with the cdn approach