MediaStream Recording API

MediaStream Recording API, иногда просто называемый Media Recording API или MediaRecorder API, тесно связан с Media Capture and Streams API и WebRTC API. MediaStream Recording API делает возможным захват данных, сгенерированных MediaStream или HTMLMediaElement объектом для анализа, обработки или сохранения на дисковое пространство. С ним так же удивительно легко работать.

Базовая концепция

MediaStream Recording API состоит из единого интерфейса, MediaRecorder, который делает всю работу, принимая данные из MediaStream и доставляя их обработчику. Данные поставляются с помощью серии событий, уже в том формате, который был указан, когда MediaRecorder был создан. Процесс записи потока прост:

  1. Установите MediaStream или HTMLMediaElement (в виде <audio> или <video> элемента), чтобы тот служил в качестве источника медиа-данных.
  2. Установите MediaRecorder.dataavailable_event обработчик событий для событий; он будет вызываться каждый раз, как данные будут доступны.
  3. Создайте MediaRecorder объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрейт его треков).
  4. Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите MediaRecorder.start() для начала записи.
  5. Ваш обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чьё значение Blob, который содержит медиа-данные. Вы можете принудительно вызвать dataavailable событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.
  6. Запись останавливается автоматически, когда исходное медиа закончит проигрываться.
  7. Вы можете остановить запись в любое время, вызвав MediaRecorder.stop().

Вы можете так же использовать свойства MediaRecorder объекта для определения состояния процесса записи и его pause() и resume() методы, чтобы остановить и возобновить запись исходной медиа.

Если вам нужно или вы хотите проверить, поддерживается ли определённый MIME-тип, это так же возможно. Просто вызовите MediaRecorder.isMimeTypeSupported().

Чтобы узнать больше о MediaStream Recording API, смотрите Using the MediaStream Recording API, который показывает, как использовать API для записи аудио клипов. Другая статья, Recording a media element, описывает, как получить поток из <audio> или <video> элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).

Ссылки

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

Specification
MediaStream Recording

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

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.

Смотрите также