TheMediaRecorder это интерфейс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!');}

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

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

Ещё по теме

• Использование MediaRecorder API
• Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, byChris Mills (source on Github.)
• simpl.info MediaStream Recording demo, bySam Dutton.
• Navigator.getUserMedia