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()
-
Останавливает запись, после чего запускается событие
unsupported templ: event, содержащее последнийBlob
сохранённых данных.
Обработчики событий
MediaRecorder.ondataavailable
-
Вызывает обработчик
unsupported templ: eventсобытия, которое запускается раз вtimeslice
миллисекунд (или, еслиtimeslice
не был задан - по окончанию записи). Событие типаBlobEvent
, сдержит записанное медиа вdata
. Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных. MediaRecorder.onerror
-
unsupported templ: eventвызывается для обработки событияunsupported templ: event, включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсеMediaRecorderErrorEvent
, свойство которогоerror
содержитDOMException
описывающие произошедшие ошибки. MediaRecorder.onpause
-
unsupported templ: eventвызывается для обработки событияunsupported templ: event, случившегося во время приостановки медиа. MediaRecorder.onresume
-
unsupported templ: eventвызывается для обработки событияunsupported templ: event, случившегося во время возобновления записи. MediaRecorder.onstart
-
unsupported templ: eventвызывается для обработки событияunsupported templ: event, случившегося во время начала записи. MediaRecorder.onstop
-
unsupported templ: eventвызывается для обработки событияunsupported templ: event, случившегося во время завершения записи, а так же при окончании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 |
Совместимость с браузерами
BCD tables only load in the browser
Ещё по теме
- Использование MediaRecorder API
- 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