"onstop" event not firing
Closed this issue ยท 5 comments
Hello!
I see a new release just went up an hour ago, so I'm not sure if this is related.
The onstop
event listener doesn't seem to fire for me.
(I'm using Vue.js)
import { MediaRecorder, register } from "extendable-media-recorder";
import { connect } from "extendable-media-recorder-wav-encoder";
export default {
name: "Recorder",
data() {
return {
mediaRecorder: null,
chunks: [],
urls: []
};
},
methods: {
record() {
this.mediaRecorder.start();
},
stop() {
this.mediaRecorder.stop();
},
handleData(e) {
console.log(e);
this.chunks.push(e.data);
},
handleStop() {
var blob = new Blob(this.chunks, { type: "audio/wav" });
this.chunks = [];
this.urls.push(URL.createObjectURL(blob));
}
},
async mounted() {
await register(await connect());
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: false
}
});
this.mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/wav" });
this.mediaRecorder.ondataavailable = this.handleData;
this.mediaRecorder.onstop = this.handleStop;
}
};
ondataavailable
fires without any issues.
If I remove the extendable-media-recorder
imports and default to the standard recorder, it fires correctly.
I tried using addEventListener('stop', ...)
too, but no luck...
It's happening in the latest version of Chrome & Firefox.
Let me know if there's anything else I can do to help debug the issue.
Thanks!
Ger
After reviewing the code, it seems like the omission of this event is intentional. Ignore!
Hi @NoClipDigital, you're absolutely right. The stop
event is not yet implemented. But as far as I remember there was no particular reason, despite of the usual too-many-things-not-enough-time problem.
Did you find a workaround for your use case?
It's for example possible to check the state of the MediaRecorder whenever the dataavailable
event fires. If the state is 'inactive'
it's safe to assume that the recording is done.
Yeah, my recordings shouldn't be more than ~20 seconds, so I just didn't specify a timeslice for the start
function. When I hit stop, the ondataavailable
event gets all the data in one go. Seems to be working fine!
Thanks you for the quick response though.
I was previously using RecorderJS, but I've having issues with users on old hardware getting pops in their recordings. Hopefully this'll run a bit smoother. ๐
Okay, great.
At least in theory it should perform a bit better. I think RecorderJS always uses the ScriptProcessorNode
since that was the only option back then. extendable-media-recorder only uses that when used in Safari. And even that should not be necessary for much longer since Safari gets AudioWorklet
support as well. I tried to explain the inner workings in the readme.
Feel free to create another issue if you run into any problems.
Hi @NoClipDigital, the stop
event is finally supported now. #646