The MediaRecorder API

Click "start recording", then press the play button on the video element on the right of the app. You can also click the "download" button to download a .webm file, playable offline with a media player such as VLC or online in a Web page with the <video> element.

Five steps are needed to use the mediaRecorder object

1 - Create a mediaRecorder from a stream

Source code extract:

var options = {mimeType: 'video/webm; codecs=vp9'};

mediaRecorder = new MediaRecorder(stream, options);

... where stream is typically the object returned by the call to getUserMedia (see previous examples).

2 - Add a "data handler" and call the start() method of the mediaRecorder object

Source code extract:

var recordedChunks = []; // will hold the recorded stream

mediaRecorder.ondataavailable = handleDataAvailable;

mediaRecorder.start();

function handleDataAvailable(event) {

   if (event.data.size > 0) {

      recordedChunks.push(event.data);

   } else {

   // ...

}

Explanations:

• Line 1: we declare an array of bytes that will hold the recorded stream.

• Line 2: we declare the callback function that will be called while the stream is being captured. While the webcam will be used, every xxx seconds, chunks of data will be passed to the handleDataAvailable function.

• Lines 5-10: this function collects the chunk of data that corresponds to a few seconds of video, and stores it in the recordedChunks byte array.

3 - When you've finished recording, tell the mediaRecorder to stop

When you're done, you need to call the stop() method of the mediaRecorder object. This will end the periodic execution of the handleDataAvailable method, and stop the data capture.

mediaRecorder.stop();

4 - Create a BLOB (Binary Large OBject) with the collected data, and conect it to the src attribute of an HTML5 video player

This piece of code creates a blob with the recordedChunks array. Use the URL.createObjectURL(recordedChunks) standard method to create a URL object which the src attribute of an HTML5 video element can then be assigned to.

Like that, the recorded stream can be played using a standard HTML5 <video> element.

function play() {

   var superBuffer = new Blob(recordedChunks);

   videoElement.src =

         window.URL.createObjectURL(superBuffer);

}

5 - Download the captured stream

A trick consists in creating, on the fly, an invisible link with a download attribute (see Module 1) and an href attribute  that points to the blob object containing the recorded stream encoded using a given codec, then programmatically generating a click event on the link. This will force the browser to offer to download a file (of type video/webm in this instance).

function download() {

    var blob = new Blob(recordedChunks, {

        type: 'video/webm'

    });

    var url = URL.createObjectURL(blob);

    var a = document.createElement('a');

    document.body.appendChild(a);

    a.style = 'display: none';

    a.href = url;

    a.download = 'test.webm';

    a.click();

    window.URL.revokeObjectURL(url);

}