javascriptfirefoxwebrtcmediarecorder

MediaRecorder - The Pause and resume events don't work in Firefox


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 ).

[ The full code is here ]

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 ?


Solution

  • 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