The MediaStream Recording API, sometimes simply 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 MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.

Basic concepts

The MediaStream Recording API is comprised of a single major interface, MediaRecorder, which does all the work of taking the data from a MediaStream and delivering it to you for processing. The data is delivered by a series of 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 MediaStream or HTMLMediaElement (in the form of an <audio> or <video> element) to serve as the source of the media data.
  2. Set MediaRecorder.ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you.
  3. Create a 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.
  4. Once the source media is playing and you've reached the point where you're ready to record video, call MediaRecorder.start() to begin recording.
  5. Your 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 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 MediaRecorder.stop().

Note: Individual Blobs 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 error event is sent to the MediaRecorder. You can listen for error events by setting up a onerror event handler.

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 pause() and 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 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 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 <option> elements that are then added to a <select> element representing an input source picker.

 

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    let menu = document.getElementById("inputdevices");
    if (device.kind == "audioinput") {
      let item = document.createElement("option");
      item.innerHTML = 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 <audio> or <video> element and use the captured stream (in this case, recording it and saving it to a local disk).

Reference

BlobEvent
Each time a chunk of media data is finished being recorded, it's delivered to consumers in Blob form using a BlobEvent of type dataavailable.
MediaRecorder
The primary interface that implements the MediaStream Recording API.
MediaRecorderErrorEvent
The interface that represents errors thrown by the MediaStream Recording API. Its error property is a DOMException that specifies that error occurred.

Specifications

Specification Status Comment
MediaStream Recording Working Draft Initial definition

Browser compatibility

MediaRecorder

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 47Edge ? Firefox Full support 25
Notes
Full support 25
Notes
Notes Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia(), then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
IE ? Opera Full support 36Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 25
Notes
Full support 25
Notes
Notes Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia(), then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
MediaRecorder() constructorChrome Full support 47Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
mimeTypeChrome Full support 47
Notes
Full support 47
Notes
Notes Prior to Chrome 49, only video is supported, not audio.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android No support No
stateChrome Full support 47
Notes
Full support 47
Notes
Notes Prior to Chrome 49, only video is supported, not audio.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android No support No
streamChrome Full support 47
Notes
Full support 47
Notes
Notes Prior to Chrome 49, only video is supported, not audio.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android No support No
ignoreMutedMedia
Experimental
Chrome Full support 49Edge ? Firefox ? IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android ? Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
videoBitsPerSecond
Experimental
Chrome Full support 49Edge ? Firefox ? IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android ? Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
audioBitsPerSecond
Experimental
Chrome Full support 49Edge ? Firefox ? IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android ? Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
isTypeSupportedChrome Full support 47Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
pauseChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
requestDataChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
resumeChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
startChrome Full support 47Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0
stopChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
ondataavailableChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onerrorChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onpauseChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onresumeChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onstartChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onstopChrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?
onwarning
Deprecated
Chrome Full support 47
Notes Disabled
Full support 47
Notes Disabled
Notes Full support since Chrome 49.
Disabled From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 25IE ? Opera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile ? Firefox Android Full support 25Opera Android Full support 36Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Document Tags and Contributors

Last updated by: fscholz,