MediaRecorder

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

Конструктор

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

Свойства

MediaRecorder.mimeType Только для чтения
Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. 
MediaRecorder.state Только для чтения
Возвращает текущее состояние объекта MediaRecorder (inactive, recording, или paused.)
MediaRecorder.stream Только для чтения
Возвращает поток который был передан конструктору при создании объекта MediaRecorder
MediaRecorder.ignoreMutedMedia
Показывает записывает ли MediaRecorder дорожку MediaStreamTrack если она отключена. Если аттрибут равен false, MediaRecorder будет записывать тишину для аудио и черные кадры для видео. По умолчанию равно false
MediaRecorder.videoBitsPerSecond Только для чтения
Возвращает скорость кодирования видео. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).
MediaRecorder.audioBitsPerSecond; Только для чтения
Возвращает скорость кодирования аудио. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).

Методы

MediaRecorder.isTypeSupported()
Возвращает Boolean значение показывающее поддерживается ли MIME тип текущим user agent.
MediaRecorder.pause()
Приостанавливает запись медиа.
MediaRecorder.requestData()
Запрашивает Blob содержащий сохраненные данные полученные  с начала записи (или с последнего вызова requestData()). После вызова этого метода, запись продолжается, но в новый Blob.
MediaRecorder.resume()
Возобновляет запись медиа после паузы.
MediaRecorder.start()
Начинает запись медиа. В этот метод можно передать аргумент timeslice со значением в миллисекундах. Если он определен, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.
MediaRecorder.stop()
Останавливает запись, после чего запускается событие dataavailable, содержащее последний Blob сохраненных данных.

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

MediaRecorder.ondataavailable
Вызывает обработчик dataavailable события, которое запускается раз в timeslice миллисекунд (или, если timeslice не был задан - по окончанию записи). Событие типа BlobEvent, сдержит записанное медиа в data.  Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.
MediaRecorder.onerror
EventHandler вызывается для обработки события recordingerror, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе MediaRecorderErrorEvent, свойство которого error содержит DOMException описывающие произошедшие ошибки.
MediaRecorder.onpause
EventHandler вызывается для обработки события pause, случившегося во время приостановки медиа.
MediaRecorder.onresume
EventHandler вызывается для обработки события resume, случившегося во время возбновления записи.
MediaRecorder.onstart
EventHandlerвызывается для обработки события start, случившегося во время начала записи.
MediaRecorder.onstop
EventHandler вызывается для обработки события stop, случившегося во время завершения записи, а так же при окончании MediaStream — или после вызова MediaRecorder.stop()

Пример

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 Status Comment
MediaStream Recording Рабочий черновик Initial definition

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
MediaRecorderChrome Полная поддержка 47Edge Нет поддержки НетFirefox Полная поддержка 25
Замечания
Полная поддержка 25
Замечания
Замечания Prior to 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).
IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 47Chrome Android Полная поддержка 47Firefox Android Полная поддержка 25
Замечания
Полная поддержка 25
Замечания
Замечания Prior to 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).
Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
MediaRecorder() constructorChrome Полная поддержка 47Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 47Chrome Android Полная поддержка 47Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
audioBitsPerSecond
Экспериментальная
Chrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 71IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android ? Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
error eventChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
ignoreMutedMedia
Экспериментальная
Chrome Нет поддержки 49 — 57Edge Нет поддержки НетFirefox ? IE ? Opera Полная поддержка 36Safari ? WebView Android Нет поддержки 49 — 57Chrome Android Нет поддержки 49 — 57Firefox Android ? Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Нет поддержки 5.0 — 7.0
isTypeSupportedChrome Полная поддержка 47Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 47Chrome Android Полная поддержка 47Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
mimeTypeChrome Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Edge Нет поддержки НетFirefox Полная поддержка 25
Замечания
Полная поддержка 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.
IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Chrome Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
ondataavailableChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onerrorChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onpauseChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 65IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 65Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onresumeChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 65IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 65Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onstartChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onstopChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
onwarning
Устаревшая
Chrome Полная поддержка 49Edge Нет поддержки НетFirefox Нет поддержки 25 — 71IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
pauseChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
requestDataChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
resumeChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
startChrome Полная поддержка 47Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 47Chrome Android Полная поддержка 47Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
stateChrome Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Chrome Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
stopChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
streamChrome Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49
Полная поддержка 49
Нет поддержки 47 — 49
Замечания
Замечания Prior to Chrome 49, only video is supported, not audio.
Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
videoBitsPerSecond
Экспериментальная
Chrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 71IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android ? Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка 5.0
warning event
Устаревшая
Chrome Полная поддержка 49Edge Нет поддержки НетFirefox Нет поддержки 25 — 71IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.

Еще по теме