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

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

MediaRecorder.onpause

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

MediaRecorder.onresume

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

MediaRecorder.onstart

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

MediaRecorder.onstop

event handler вызывается для обработки события 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
MediaStream Recording
# mediarecorder-api

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaRecorder
MediaRecorder() constructor
options parameter
audioBitrateMode
Experimental
audioBitsPerSecond
dataavailable event
error event
isTypeSupported() static method
mimeType
pause
pause event
requestData
resume
resume event
start
start event
state
stop
stop event
stream
videoBitsPerSecond

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Ещё по теме