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 |
Совместимоть с браузерами
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Еще по теме
- Использование 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