MediaRecorder API: Capture Audio and Video in the Browser

Why it exists

Before this API, recording audio or video in a browser required server-side processing or plugins like Flash. The MediaRecorder API provides a standardized, built-in way to capture media streams directly on the client-side, simplifying development and improving performance for features like in-app video feedback or voice notes.

The mental model

Think of MediaRecorder as a tape recorder for a MediaStream. You give it a live feed (from a camera, mic, or screen), tell it to start(), and it begins capturing that feed. As it records, it periodically hands you "chunks" of the tape (as Blob objects) through an event. When you stop(), it gives you the final piece, and you are responsible for stitching all the chunks together to create the final recording.

How it works

First, you get a MediaStream, typically from navigator.mediaDevices.getUserMedia() or getDisplayMedia(). You instantiate a recorder with new MediaRecorder(stream, { mimeType: 'video/webm' }). To begin, call recorder.start(). To receive data, you must add an event listener for dataavailable. This event fires with a chunk of data. You collect these event.data Blobs in an array. When recorder.stop() is called, a final dataavailable event fires. You then create a new Blob from your array of chunks to form the complete recording.

When to use it

Use the MediaRecorder API for any feature that requires capturing media on the client. This includes user-generated video testimonials, audio messaging, "record your screen" bug reporting tools, or simple web-based video recorders. It's ideal when you want to process or preview media in the browser before uploading.

When not to use it

This API is for recording, not for building a production-grade live streaming service; WebRTC is better suited for true real-time communication. It is also not a video editor; it only captures the raw stream. For complex transcoding or media manipulation, you will need other libraries or server-side tools.

One canonical example

To build a screen recorder, you get a stream via navigator.mediaDevices.getDisplayMedia(). You create new MediaRecorder(stream) and an empty array, recordedChunks. An event listener for dataavailable pushes event.data into that array. A "Start" button calls recorder.start(), and a "Stop" button calls recorder.stop(). After stopping, you create a final blob: const blob = new Blob(recordedChunks, { type: 'video/webm' }), generate a URL with URL.createObjectURL(blob), and set it as the src of a <video> element for playback.