W3cubDocs

/Web APIs

MediaRecorder

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

EventTarget MediaRecorder

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.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 true or false value indicating if the given MIME media type is supported by the current user agent.

Events

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

dataavailable

Fires periodically 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.

error

Fired when there 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.

pause

Fired when media recording is paused.

resume

Fired when media recording resumes after being paused.

start

Fired when media recording starts.

stop

Fired when media recording ends, either when the MediaStream ends, or after the MediaRecorder.stop() method is called.

warning

Fired when media recording has a non-fatal error, or after the MediaRecorder.onwarning() method is called.

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);
  })
}

Note: 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
MediaStream Recording
# mediarecorder-api

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
MediaRecorder
47
79
25
Before 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).
No
36
14
47
47
25
Before 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).
36
14
5.0
MediaRecorder
47
79
25
No
36
14
47
47
25
36
14
5.0
audioBitrateMode
89
89
No
No
75
No
89
89
No
63
No
15.0
audioBitsPerSecond
49
79
71
No
36
14.1
49
49
79
36
14.5
5.0
dataavailable_event
49
79
25
No
36
14
49
49
25
36
14
5.0
error_event
49
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
79
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
25
No
36
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
14
49
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
49
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
25
36
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
14
5.0
The interface for this event is a plain Event, not MediaRecorderErrorEvent. See bug 1250432.
isTypeSupported
47
79
25
No
36
14
47
47
25
36
14
5.0
mimeType
49
47-49
Before Chrome 49, only video is supported, not audio.
79
25
Starting with Firefox 71, the behavior of mimeType is more consistent. For example, it now returns the media type even after recording has stopped.
No
36
14
49
47-49
Before Chrome 49, only video is supported, not audio.
49
47-49
Before Chrome 49, only video is supported, not audio.
25
36
14
5.0
pause
49
79
25
No
36
14.1
49
49
25
36
14.5
5.0
pause_event
49
79
65
No
36
14.1
49
49
65
36
14.5
5.0
requestData
49
79
25
No
36
14
49
49
25
36
14
5.0
resume
49
79
25
No
36
14.1
49
49
25
36
14.5
5.0
resume_event
49
79
65
No
36
14.1
49
49
65
36
14.5
5.0
start
47
79
25
No
36
14
47
47
25
36
14
5.0
start_event
49
79
25
No
36
14
49
49
25
36
14
5.0
state
49
47-49
Before Chrome 49, only video is supported, not audio.
79
25
No
36
14
49
47-49
Before Chrome 49, only video is supported, not audio.
49
47-49
Before Chrome 49, only video is supported, not audio.
25
36
14
5.0
stop
49
79
25
No
36
14
49
49
25
36
14
5.0
stop_event
49
79
25
No
36
14
49
49
25
36
14
5.0
stream
49
47-49
Before Chrome 49, only video is supported, not audio.
79
25
No
36
14
49
49
47-49
Before Chrome 49, only video is supported, not audio.
25
36
14
5.0
videoBitsPerSecond
49
79
71
No
36
14.1
49
49
79
36
14.5
5.0
warning_event
49
79
25-71
No
36
No
49
49
25
36
No
5.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder