I’ve been waiting for MediaRecorder API for several months, and now I am very excited to let you know that its first prototype is up and running, and is available via Google Chrome Canary. Before delving any deeper on the ways to use it, first let’s define what MediaRecorder API actually is (source: http://www.w3.org/TR/mediastream-recording/):

This API attempts to make basic recording very simple, while still allowing for more complex use cases. In the simplest case, the application instantiates the MediaRecorder object, calls record() and then calls stop() or waits for the MediaStream to be ended. The contents of the recording will be made available in the platform’s default encoding via the data available event.

In a nutshell, a MediaStream instance that you get by calling getUserMedia is just raw PCM data, and it’s fine if you want to use it in video-tag, but not enough to create a video-file, simply because you are missing something that encodes your raw PCM data to a video format, for example WebM.

With MediaRecorder API we can access encoded blob chunks, which means that once the recording is finished we can construct a real file out of them, and then upload or download it. This was not possible to achieve before - at least without some dirty hacks :) For example, if not for MediaRecorder API, you would have to perform the following steps:

onStreamGetSuccess is where we create the MediaRecorder, and initiate the recording process. It looks like this:

functiononStreamGetSuccess(stream) {
recorder = new MediaRecorder(stream);
// will be called each time we get data from stream.
recorder.ondataavailable = onDataAvailable;
recorder.start();
}

Finally, we need to collect our blob-chunks, and define a function which will create a file that we can send to the server. Converting recorded data to a file can be tricky, so we need to use two functions here: bufferToDataUrl, which will convert the collected blob-chunks to a URL; and dataUrlToFile, which will transform the URL to a File-object. This method is normally more appropriate, because it works for Chrome extensions too (you can’t normally transfer objects like blob, file, etc. when working with extensions). If, for example, you want a background-script to transfer recorded video to a web page (so that it can be uploaded) by firing an event, it will not work. And the only way to solve it would be doing the following: