Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Record Audio and Video with MediaRecorder

Break out the champagne and doughnuts! The most starred Chrome feature EVER has now been implemented.

Imagine a ski-run recorder that synchronizes video with GeoLocation data, or a super-simple voice memo app, or a widget that enables you to record a video and upload it to YouTube — all without plugins.

The MediaRecorder API enables you to record audio and video from a web app. It's available now in Firefox and in Chrome for Android and desktop.

The full list of MIME types supported by MediaRecorder in Chrome is available here.

Caution: Instantiation will fail if the browser doesn't support the MIME type specified, so use MediaRecorder.isTypeSupported() or try/catch — or leave out the options argument if you're happy with the browser default.

Next, add a data handler and call the start() method to begin recording:

This examples adds a Blob to the recordedChunks array whenever data becomes available. The start() method can optionally be given a timeSlice argument that specifies the length of media to capture for each Blob.

When you've finished recording, tell the MediaRecorder:

mediaRecorder.stop();

Play the recorded Blobs in a video element by creating a 'super-Blob' from the array of recorded Blobs: