Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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


Creates a new MediaRecorder object.


MediaRecorder.mimeType Только для чтения
Returns the MIME type that was selected as the recording container for the MediaRecorder object when it was created.
MediaRecorder.state Только для чтения
Returns the current state of the MediaRecorder object (inactive, recording, or paused.)
MediaRecorder.stream Только для чтения
Returns the stream that was passed into the constructor when the MediaRecorder was created.
What to do with a muted input MediaStreamTrack, e.g. insert black frames/zero audio volume in the recording or ignore altogether.
MediaRecorder.videoBitsPerSecond Только для чтения
Actual video encoding bit rate in use (see the constructor MediaRecorder.MediaRecorder() options).
MediaRecorder.audioBitsPerSecond; Только для чтения
Actual audio encoding bit rate in use (see the constructor MediaRecorder.MediaRecorder() options).


MediaRecorder.isTypeSupported(DOMString type)
 Returns a Boolean value indicating if the given MIME type is supported by the current user agent . 
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.

Event Handlers

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.)
Is an EventHandler called to handle the recordingerror event, including reporting errors that arise with media recording. These are fatal errors that stop recording.
Is an EventHandler called to handle the pause event, which occurs when media recording is paused.
Is an EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.
Is an EventHandler called to handle the start event, which occurs when media recording starts.
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.


navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia ||

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

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

  var onSuccess = function(stream) {
    var mediaRecorder = new MediaRecorder(stream);


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

    stop.onclick = function() {
      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');
      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 = window.URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

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

    mediaRecorder.ondataavailable = function(e) {

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

Note: This code sample comes from the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.


Specification Status Comment
MediaStream Recording Рабочий черновик Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 47.0 25.0 (25.0) Нет 40 Нет
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support Нет 47.0 25.0 (25.0) 1.3[1] Нет Нет Нет 47.0
  • [1] The initial Firefox OS implementation only supported audio recording.

See also

Метки документа и участники

Внесли вклад в эту страницу: IegorKozakov
Обновлялась последний раз: IegorKozakov,