MediaStream Recording API

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

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> элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).

Ссылки

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

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

Enable JavaScript to view this browser compatibility table.

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

• Using the MediaStream Recording API
• Recording a media element
• simpl.info MediaStream Recording demo, by Sam Dutton
• navigator.mediaDevices.getUserMedia()
• HTML5's Media Recorder API in Action on Chrome and Firefox
• TutorRoom: HTML5 video capture/playback/download using getUserMedia and the MediaRecorder API (source on GitHub)
• FingerSpell: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only (source on GitHub)
• Simple video recording demo
• Advanced media stream recorder sample