I'm trying to wrap my head around the MediaRecorder API, so I coded a simple web app that starts, pauses, resumes and stops audio recording. The code seems to work fine, until I tested it out in Firefox ( The latest version ).
Javascript code:
var mediaRecorder = null,
constraints = { audio: true };
function onSuccess( stream ) {
mediaRecorder = new MediaRecorder( stream );
function getStatus() {
alert('The mediaRecorder is ' + mediaRecorder.state);
}
mediaRecorder.onstart = getStatus;
mediaRecorder.onpause = getStatus;
mediaRecorder.onresume = getStatus;
mediaRecorder.onstop = getStatus;
}
var onError = function(err) {
console.log('Error: ' + err);
}
navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
Html code :
<button type="button" onclick="mediaRecorder.start()">Start</button>
<button type="button" onclick="mediaRecorder.pause()">Pause</button>
<button type="button" onclick="mediaRecorder.resume()">Resume</button>
<button type="button" onclick="mediaRecorder.stop()">Stop</button>
I figured out that, in Firefox, when clicking pause, the mediaRecorder is actually paused but it doesn't fire the pause event ( onpause ), and the same thing for resume.
Question: Is there a way to fix this problem ?
Unfortunately this is a bug in Mozilla Firefox, and as a workaround, I found this awesome cross-browser library and it worked for me like a charm : Audrec