MediaRecorder
=============

The **`MediaRecorder`** это интерфейс MediaStream Recording API представляющий функциональность для простой записи медиа. Создаётся с использованием `MediaRecorder()` конструктора.

Конструктор
-----------

`MediaRecorder()`

Создаёт новый объект `MediaRecorder`, получающий `MediaStream` для записи. Доступны такие параметры, как установка типа MIME контейнера (`"video/webm","video/mp4"` и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.

Свойства
--------

`MediaRecorder.mimeType` (en-US) Только для чтения 

Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании.

`MediaRecorder.state` Только для чтения 

Возвращает текущее состояние объекта `MediaRecorder` (`inactive`, `recording`, или `paused`.)

`MediaRecorder.stream` (en-US) Только для чтения 

Возвращает поток который был передан конструктору при создании объекта `MediaRecorder`

`MediaRecorder.ignoreMutedMedia`

Показывает записывает ли `MediaRecorder` дорожку `MediaStreamTrack` если она отключена. Если атрибут равен `false`, `MediaRecorder` будет записывать тишину для аудио и чёрные кадры для видео. По умолчанию равно `false`

`MediaRecorder.videoBitsPerSecond` (en-US) Только для чтения 

Возвращает скорость кодирования видео. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

`MediaRecorder.audioBitsPerSecond;` Только для чтения 

Возвращает скорость кодирования аудио. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

Методы
------

`MediaRecorder.isTypeSupported()` (en-US)

Возвращает `Boolean` (en-US) значение показывающее поддерживается ли MIME тип текущим user agent.

`MediaRecorder.pause()` (en-US)

Приостанавливает запись медиа.

`MediaRecorder.requestData()`

Запрашивает `Blob` содержащий сохранённые данные полученные с начала записи (или с последнего вызова `requestData()`). После вызова этого метода, запись продолжается, но в новый `Blob.`

`MediaRecorder.resume()` (en-US)

Возобновляет запись медиа после паузы.

`MediaRecorder.start()`

Начинает запись медиа. В этот метод можно передать аргумент `timeslice` со значением в миллисекундах. Если он определён, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.

`MediaRecorder.stop()` (en-US)

Останавливает запись, после чего запускается событие `dataavailable`, содержащее последний `Blob` сохранённых данных.

Обработчики событий
-------------------

`MediaRecorder.ondataavailable`

Вызывает обработчик `dataavailable` события, которое запускается раз в `timeslice` миллисекунд (или, если `timeslice` не был задан - по окончанию записи). Событие типа `BlobEvent` (en-US), сдержит записанное медиа в `data` (en-US). Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.

`MediaRecorder.onerror` (en-US)

`event handler` вызывается для обработки события `recordingerror`, включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе `MediaRecorderErrorEvent` (en-US), свойство которого `error` (en-US) содержит `DOMException` (en-US) описывающие произошедшие ошибки.

`MediaRecorder.onpause` (en-US)

`event handler` вызывается для обработки события `pause (en-US)`, случившегося во время приостановки медиа.

`MediaRecorder.onresume` (en-US)

`event handler` вызывается для обработки события `resume`, случившегося во время возобновления записи.

`MediaRecorder.onstart` (en-US)

`event handler`вызывается для обработки события `start`, случившегося во время начала записи.

`MediaRecorder.onstop` (en-US)
`event handler` вызывается для обработки события `stop`, случившегося во время завершения записи, а так же при окончании `MediaStream` — или после вызова `MediaRecorder.stop()` (en-US)
Пример
------
```

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


**Примечание:** Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите здесь

Спецификации
------------

| Specification |
| --- |
| MediaStream Recording # mediarecorder-api |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ещё по теме
-----------

* Использование MediaRecorder API (en-US)
* 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`