MediaRecorder API

HTML5 MediaRecorder API Overview

The HTML5 MediaRecorder API records audio and video streams captured from cameras, microphones, or screen sharing. It works together with the Media Devices API by taking a MediaStream returned from getUserMedia() or getDisplayMedia() and converting it into recorded media.

MediaRecorder is widely used in voice recorders, video recording applications, online meetings, interview platforms, screen recording, browser-based podcasts, and educational applications.

How MediaRecorder Works

Basic Audio Recording Example

const stream =
  await navigator.mediaDevices.getUserMedia(
    {
      audio: true
    }
  );

const recorder =
  new MediaRecorder(stream);

const chunks = [];

recorder.addEventListener(
  "dataavailable",
  (event) => {
    chunks.push(event.data);
  }
);

recorder.addEventListener(
  "stop",
  () => {
    const recording =
      new Blob(
        chunks,
        {
          type: "audio/webm"
        }
      );

    console.log(recording);
  }
);

recorder.start();

The recording is stored as Blob chunks that can later be combined into a single audio or video file.

MediaRecorder Methods

MediaRecorder Events

Video Recording Example

const stream =
  await navigator.mediaDevices.getUserMedia(
    {
      video: true,
      audio: true
    }
  );

const recorder =
  new MediaRecorder(stream);

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 10000);

This example records camera and microphone input for ten seconds.

Record Screen Sharing

const stream =
  await navigator.mediaDevices.getDisplayMedia(
    {
      video: true
    }
  );

const recorder =
  new MediaRecorder(stream);

recorder.start();

MediaRecorder can record the screen stream returned by getDisplayMedia().

Download Recorded File

const recording =
  new Blob(
    chunks,
    {
      type: "video/webm"
    }
  );

const url =
  URL.createObjectURL(recording);

const link =
  document.createElement("a");

link.href = url;
link.download = "recording.webm";
link.click();

URL.revokeObjectURL(url);

Common MediaRecorder Use Cases

• Voice recording applications.
• Video interview platforms.
• Screen recording software.
• Browser-based podcast tools.
• Lecture recording.
• Video messaging applications.
• Online learning platforms.
• Meeting recording systems.

MediaRecorder Best Practices

• Always request permissions only after user interaction.
• Stop recording and media tracks when finished.
• Release Object URLs after downloads.
• Handle permission denial gracefully.
• Choose appropriate MIME types supported by the browser.
• Record in chunks for long recordings to reduce memory usage.
• Display recording indicators while recording is active.
• Test browser compatibility before deployment.

Common MediaRecorder Mistakes

• Not stopping the recorder before saving.
• Ignoring the dataavailable event.
• Keeping camera or microphone active after recording.
• Using unsupported MIME types.
• Not handling permission errors.
• Loading long recordings entirely into memory.
• Forgetting to revoke Object URLs.
• Recording without clear user consent.

Media Devices API vs MediaRecorder API

Key Takeaways

• MediaRecorder records audio, video, and screen streams.
• It works together with the Media Devices API.
• Recording data is received through the dataavailable event.
• Output is typically stored as Blob objects.
• Always stop tracks and release resources after recording.
• Respect privacy by requesting permissions only when necessary.