MediaStream Recording API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

Ссылки

BlobEvent MediaRecorder

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

Specification
MediaStream Recording

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

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