docs.rodeo

MDN Web Docs mirror

MediaStream Recording API

{{DefaultAPISidebar("MediaStream Recording")}} 

The MediaStream Recording API, sometimes referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a {{domxref("MediaStream")}}  or {{domxref("HTMLMediaElement")}}  object for analysis, processing, or saving to disk. It’s also surprisingly easy to work with.

Concepts and usage

The MediaStream Recording API is comprised of a single major interface, {{domxref("MediaRecorder")}} , which does all the work of taking the data from a {{domxref("MediaStream")}}  and delivering it to you for processing. The data is delivered by a series of {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}}  events, already in the format you specify when creating the MediaRecorder. You can then process the data further or write it to file as desired.

Overview of the recording process

The process of recording a stream is simple:

  1. Set up a {{domxref("MediaStream")}}  or {{domxref("HTMLMediaElement")}}  (in the form of an {{HTMLElement("audio")}}  or {{HTMLElement("video")}}  element) to serve as the source of the media data.
  2. Create a {{domxref("MediaRecorder")}}  object, specifying the source stream and any desired options (such as the container’s MIME type or the desired bit rates of its tracks).
  3. Set {{domxref("MediaRecorder.dataavailable_event", "ondataavailable")}}  to an event handler for the {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}}  event; this will be called whenever data is available for you.
  4. Once the source media is playing and you’ve reached the point where you’re ready to record video, call {{domxref("MediaRecorder.start()")}}  to begin recording.
  5. Your {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}}  event handler gets called every time there’s data ready for you to do with as you will; the event has a data attribute whose value is a {{domxref("Blob")}}  that contains the media data. You can force a dataavailable event to occur, thereby delivering the latest sound to you so you can filter it, save it, or whatever.
  6. Recording stops automatically when the source media stops playing.
  7. You can stop recording at any time by calling {{domxref("MediaRecorder.stop()")}} .

[!NOTE] Individual {{domxref("Blob")}} s containing slices of the recorded media will not necessarily be individually playable. The media needs to be reassembled before playback.

If anything goes wrong during recording, an {{domxref("MediaRecorder/error_event", "error")}}  event is sent to the MediaRecorder. You can listen for error events by setting up a {{domxref("MediaRecorder.error_event", "onerror")}}  event handler.

Example here, we use an HTML Canvas as source of the {{domxref("MediaStream")}} , and stop recording after 9 seconds.

const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const 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);
}

// demo: to download after 9sec
setTimeout((event) => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

Examining and controlling the recorder status

You can also use the properties of the MediaRecorder object to determine the state of the recording process, and its {{domxref("MediaRecorder.pause", "pause()")}}  and {{domxref("MediaRecorder.resume", "resume()")}}  methods to pause and resume recording of the source media.

If you need or want to check to see if a specific MIME type is supported, that’s possible as well. Just call {{domxref("MediaRecorder.isTypeSupported_static", "MediaRecorder.isTypeSupported()")}} .

Examining potential input sources

If your goal is to record camera and/or microphone input, you may wish to examine the available input devices before beginning the process of constructing the MediaRecorder. To do so, you’ll need to call {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}}  to get a list of the available media devices. You can then examine that list and identify the potential input sources, and even filter the list based on desired criteria.

In this code snippet, enumerateDevices() is used to examine the available input devices, locate those which are audio input devices, and create {{HTMLElement("option")}}  elements that are then added to a {{HTMLElement("select")}}  element representing an input source picker.

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    const menu = document.getElementById("input-devices");
    if (device.kind === "audioinput") {
      const item = document.createElement("option");
      item.textContent = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});

Code similar to this can be used to let the user restrict the set of devices they wish to use.

For more information

To learn more about using the MediaStream Recording API, see Using the MediaStream Recording API, which shows how to use the API to record audio clips. A second article, Recording a media element, describes how to receive a stream from an {{HTMLElement("audio")}}  or {{HTMLElement("video")}}  element and use the captured stream (in this case, recording it and saving it to a local disk).

Interfaces

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN