Web/API/MediaRecorder

The MediaRecorder interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder() constructor.

Constructor

MediaRecorder()

Creates a new MediaRecorder object, given a MediaStream to record. Options are available to do things like set the container's MIME type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate.

Properties

MediaRecorder.mimeType Read only

Returns the MIME type that was selected as the recording container for the MediaRecorder object when it was created.

MediaRecorder.state Read only

Returns the current state of the MediaRecorder object (inactive, recording, or paused.)

MediaRecorder.stream Read only

Returns the stream that was passed into the constructor when the MediaRecorder was created.

MediaRecorder.ignoreMutedMedia

Indicates whether the MediaRecorder instance will record input when the input MediaStreamTrack is muted. If this attribute is false, MediaRecorder will record silence for audio and black frames for video. The default is false.

MediaRecorder.videoBitsPerSecond Read only

Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).

MediaRecorder.audioBitsPerSecond Read only

Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).

Methods

MediaRecorder.pause()

Pauses the recording of media.

MediaRecorder.requestData()

Requests a Blob containing the saved data received thus far (or since the last time requestData() was called. After calling this method, recording continues, but in a new Blob.

MediaRecorder.resume()

Resumes recording of media after having been paused.

MediaRecorder.start()

Begins recording media; this method can optionally be passed a timeslice argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk.

MediaRecorder.stop()

Stops recording, at which point a dataavailable event containing the final Blob of saved data is fired. No more recording occurs.

Static methods

MediaRecorder.isTypeSupported()

A static method which returns a Boolean value indicating if the given MIME media type is supported by the current user agent. 

Event handlers

MediaRecorder.ondataavailable

Called to handle the dataavailable event, which is periodically triggered each time timeslice milliseconds of media have been recorded (or when the entire media has been recorded, if timeslice wasn't specified). The event, of type BlobEvent, contains the recorded media in its data property. You can then collect and act upon that recorded media data using this event handler.

MediaRecorder.onerror

An EventHandler called to handle the error event, including reporting errors that arise with media recording. These are fatal errors that stop recording. The received event is based on the MediaRecorderErrorEvent interface, whose error property contains a DOMException that describes the actual error that occurred.

MediaRecorder.onpause

An EventHandler called to handle the pause event, which occurs when media recording is paused.

MediaRecorder.onresume

An EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.

MediaRecorder.onstart

An EventHandler called to handle the start event, which occurs when media recording starts.

MediaRecorder.onstop

An EventHandler called to handle the stop event, which occurs when media recording ends, either when the MediaStream ends — or after the MediaRecorder.stop() method is called.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

error

Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec. Also available via the onerror property.

Example

if (navigator.mediaDevices) {
  console.log('getUserMedia supported.');

  var constraints = { audio: true };
  var chunks = [];

  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {

    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";
      record.style.color = "black";
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
    }

    mediaRecorder.onstop = function(e) {
      console.log("data available after MediaRecorder.stop() called.");

      var clipName = prompt('Enter a name for your sound clip');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');
     
      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "Delete";
      clipLabel.innerHTML = clipName;

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      var audioURL = URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

      deleteButton.onclick = function(e) {
        evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  })
  .catch(function(err) {
    console.log('The following error occurred: ' + err);
  })
}

This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.

Specifications

Specification	Status	Comment
MediaStream Recording	Working Draft	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
MediaRecorder	Chrome Full support 47	Edge Full support 79	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 No support No	Opera Full support 36	Safari No support No	WebView Android Full support 47	Chrome Android Full support 47	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 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
MediaRecorder() constructor	Chrome Full support 47	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
audioBitsPerSecond Experimental'	Chrome Full support 49	Edge Full support 79	Firefox Full support 71	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android ?	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
error event	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
ignoreMutedMedia Deprecated'Non-standard'	Chrome No support 49 — 57	Edge No support No	Firefox ?	IE No support No	Opera No support 36 — 44	Safari No support No	WebView Android No support 49 — 57	Chrome Android No support 49 — 57	Firefox Android ?	Opera Android No support 36 — 44	Safari iOS No support No	Samsung Internet Android No support 5.0 — 7.0
isTypeSupported	Chrome Full support 47	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
mimeType	Chrome Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Edge Full support 79	Firefox Full support 25 Notes' Full support 25 Notes' Notes' Starting with Firefox 71, the behavior of mimeType is more consistent. For example, it now returns the media type even after recording has stopped.	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Chrome Android Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
ondataavailable	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onerror	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onpause	Chrome Full support 49	Edge Full support 79	Firefox Full support 65	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 65	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onresume	Chrome Full support 49	Edge Full support 79	Firefox Full support 65	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 65	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onstart	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onstop	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
onwarning Deprecated'	Chrome Full support 49	Edge Full support 79	Firefox No support 25 — 71	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
pause	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
requestData	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
resume	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
start	Chrome Full support 47	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
state	Chrome Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Chrome Android Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
stop	Chrome Full support 49	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
stream	Chrome Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Edge Full support 79	Firefox Full support 25	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49 Full support 49 No support 47 — 49 Notes' Notes' Prior to Chrome 49, only video is supported, not audio.	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
videoBitsPerSecond Experimental'	Chrome Full support 49	Edge Full support 79	Firefox Full support 71	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android ?	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0
warning event Deprecated'	Chrome Full support 49	Edge Full support 79	Firefox No support 25 — 71	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 25	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0

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.

Non-standard. Expect poor cross-browser support.'

Non-standard. Expect poor cross-browser support.

Deprecated. Not for use in new websites.'

Deprecated. Not for use in new websites.

See implementation notes.'

See implementation notes.

See also

• Using the MediaRecorder API
• [[../../../../../../mdn.github.io/web-dictaphone/index|Web Dictaphone]]: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
• Recording a media element
• simpl.info MediaStream Recording demo, by Sam Dutton.
• navigator.mediaDevices.getUserMedia
• OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)

MediaRecorder by Mozilla Contributors is licensed under CC-BY-SA 2.5.