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 был создан. Процесс записи потока прост:
Установите MediaRecorder.dataavailable_event обработчик событий для событий; он будет вызываться каждый раз, как данные будут доступны.
Создайте MediaRecorder объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрейт его треков).
Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите MediaRecorder.start() для начала записи.
Ваш обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чьё значение Blob, который содержит медиа-данные. Вы можете принудительно вызвать dataavailable событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.
Запись останавливается автоматически, когда исходное медиа закончит проигрываться.
Вы можете так же использовать свойства MediaRecorder объекта для определения состояния процесса записи и его pause() и resume() методы, чтобы остановить и возобновить запись исходной медиа.
Если вам нужно или вы хотите проверить, поддерживается ли определённый MIME-тип, это так же возможно. Просто вызовите MediaRecorder.isMimeTypeSupported().
Чтобы узнать больше о MediaStream Recording API, смотрите Using the MediaStream Recording API, который показывает, как использовать API для записи аудио клипов. Другая статья, Recording a media element, описывает, как получить поток из <audio> или <video> элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).
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.
The compatibility table on 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.
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)