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
был создан. Процесс записи потока прост:
- Установите
MediaStream
илиHTMLMediaElement
(в виде<audio>
или<video>
элемента), чтобы тот служил в качестве источника медиа-данных. - Установите
MediaRecorder.dataavailable_event
обработчик событий для событий; он будет вызываться каждый раз, как данные будут доступны. - Создайте
MediaRecorder
объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрейт его треков). - Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите
MediaRecorder.start()
для начала записи. - Ваш обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чьё значение
Blob
, который содержит медиа-данные. Вы можете принудительно вызватьdataavailable
событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд. - Запись останавливается автоматически, когда исходное медиа закончит проигрываться.
- Вы можете остановить запись в любое время, вызвав
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 |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- 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