How to use the MediaRecorder API

We we first discovered that we could access a user’s camera using Navigator.getUserMedia, we were all pretty amazed; but there’s more…

With the MediaRecorder API (MediaStream Recording) that’s a construct inside Navigator.getUserMedia we can record media streams for the user’s device and instantly use them in our app.

Using the MediaRecorder API

To use this API we need to have some recorded media to work with and for that we will use getUserMedia to get some. We simply create an if statement to initiate the audio recording:

navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.getUserMedia (
      {
         audio: true
      },
      function(stream) {
         // Success code here
      },
   ); 

All we really did was test for support of getUserMedia and if the browser had support we got some audio and started the success function using the audio stream as a parameter.

Now that we have the user’s audio we can start using the Media Recorder API and to do that we firstly need to create a new instance of this inside our success callback:

var mediaRecorder = new MediaRecorder(stream);

This takes in the captured stream and now we need to start the actual recording and for that we use:

mediaRecorder.start();

And this starts the recording process. If you test by logging MediaRecorder.state you will see that after it has started it will return a value of ‘recording’.

Secondly you will want the user to be able to stop the recording and for that we have the mediaRecorder.stop function that we will trigger when a button is pressed:

$("#stop").click(function() {
  mediaRecorder.stop();
});

After the user has pressed the button and the recording is finished, we finally have the blob (audio recording in this case) ready to be transmitted back to the user.

When this happens the dataavailable event is fired so that we can do whatever we want with the blob—either save it or return it to the user.

In our case when this happens all I really want to do is create an audio element and play the user’s recording back to him. To do that we use:

mediaRecorder.ondataavailable = function(e) {
    var audio = $("body").append("<audio controls></audio>")
}

After we have the element created on the page and all the data available for our usage placing the recording on the page is as simple as setting it as the audio source:

var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL

And this is all you need, no manual encoding or anything, just getting the data using window.URL.createObjectURL(e.data) and placing it as the source of the audio recording so that after the user has done recording an audio element is created and by pressing the play button the recorded audio will be played.

Conclusion

In terms of browser support we can currently only use this in Firefox mobile and desktop, so it’s something you shouldn’t use today unless you have heavy fallback. But it will be available very soon.

API’s are meant to do exactly what we see here: make our life easier. This is a great example of that philosophy, by combining getUserMedia with Media Recorder we can create powerful applications in no time.