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


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.


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.) Read only
Returns the stream that was passed into the constructor when the MediaRecorder was created.
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).


Pauses the recording of media.
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.
Resumes recording of media after having been paused.
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.
Stops recording, at which point a dataavailable event containing the final Blob of saved data is fired. No more recording occurs.

Static methods

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

Event handlers

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.
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.
An EventHandler called to handle the pause event, which occurs when media recording is paused.
An EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.
An EventHandler called to handle the start event, which occurs when media recording starts.
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.
MediaRecorder.onwarning This deprecated API should no longer be used, but will probably still work.
An EventHandler called to handle the warning event, which occurs when media recording has a non-fatal error, or after the MediaRecorder.onwarning() method is called.


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

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.
warning This deprecated API should no longer be used, but will probably still work.
Fired when a problem occurs that does not halt recording.
Also available via the onwarning property.


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

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

  .then(function(stream) {

    var mediaRecorder = new MediaRecorder(stream);


    record.onclick = function() {
      console.log("recorder started"); = "red"; = "black";

    stop.onclick = function() {
      console.log("recorder stopped"); = ""; = "";

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

      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "Delete";
      clipLabel.innerHTML = clipName;


      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 =;

    mediaRecorder.ondataavailable = function(e) {
  .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.


Specification Status Comment
MediaStream Recording Working Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also