MediaRecorder

The MediaRecorder interface of the MediaRecorder API provides functionality to easily capture media. It is created by the invocation of the MediaRecorder() constructor.

Constructor

MediaRecorder.MediaRecorder()

Creates a new MediaRecorder object.

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.

Methods

MediaRecorder.canRecordMimeType()

A DOMString that indicates whether the value of MediaRecorder.mimeType is one the user agent can record. 

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.

Event Handlers

MediaRecorder.ondataavailable

Called to handle the dataavailable event, which can be used to grab the recorded media (which is made available as a Blob object in the event's data attribute.)

MediaRecorder.onerror

Is an EventHandler called to handle the recordingerror event, including reporting errors that arise with media recording. These are fatal errors that stop recording.

MediaRecorder.onpause

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

MediaRecorder.onresume

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

MediaRecorder.onstart

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

MediaRecorder.onstop

Is 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

Is an EventHandler called to handle the warning event, which occurs when non-fatal errors occur that do not stop the recording.

Example

navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia ||
                          navigator.webkitGetUserMedia);

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

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

  var onSuccess = 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.requestData();
    }

    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 = window.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);
    }
  }

  var onError = function(err) {
    console.log('The following error occured: ' + err);
  }

  navigator.getUserMedia(constraints, onSuccess, onError);
} else {
   console.log('getUserMedia not supported on your browser!');
}

Specifications

Browser compatibility

• [1] The initial Firefox OS implementation only supported audio recording.
• [2] To try this feature on Chrome, enable Experimental Web Platform features from chrome://flags . Currently only video is supported, not audio.

See also

• Using the MediaRecorder API
• Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
• simpl.info MediaStream Recording demo, by Sam Dutton.
• Navigator.getUserMedia