API записи потока медиаданных

API записи потока медиаданных, иногда называемый API записи медиаданных или API MediaRecorder, тесно связан с API захвата медиаданных и потоков и API WebRTC. API записи потока медиаданных позволяет захватывать данные, генерируемые объектом MediaStream или HTMLMediaElement, для анализа, обработки или сохранения на диск. Работа с ним удивительно проста.

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

Процесс записи потока прост:

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

Если во время записи возникнет ошибка, событие error будет отправлено в MediaRecorder. Вы можете прослушивать события error с помощью обработчика события onerror.

Здесь показан пример, в котором в качестве источника MediaStream используется HTML-холст, и запись останавливается через 9 секунд.

const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout((event) => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

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

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

Если вы хотите записать ввод с камеры и/или микрофона, вы можете изучить доступные устройства ввода перед началом процесса построения MediaRecorder. Для этого вам нужно вызвать navigator.mediaDevices.enumerateDevices(), чтобы получить список доступных устройств медиа. Затем вы можете просмотреть этот список, идентифицировать потенциальные источники ввода и даже фильтровать список по необходимым критериям.

В этом фрагменте кода enumerateDevices() используется для просмотра доступных устройств ввода, поиска устройств аудио ввода и создания элементов <option>, которые затем добавляются к элементу <select>, представляющему элемент выбора источника ввода.

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    const menu = document.getElementById("input-devices");
    if (device.kind === "audioinput") {
      const item = document.createElement("option");
      item.textContent = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});

Код, подобный этому, может использоваться для того, чтобы пользователь мог ограничить набор устройств, которые он хочет использовать.

Чтобы узнать больше о работе с API записи потока медиаданных, см. Использование API записи потока медиаданных, где показано, как использовать API для записи аудиоклипов. Вторая статья Запись элемента медиа описывает, как получить поток из элемента <audio> или <video> и использовать полученный поток (в данном случае, записывать его и сохранять на локальный диск).

BlobEvent

Каждый раз, когда фрагмент данных медиа завершается записью, он передаётся потребителям в виде Blob с помощью события BlobEvent типа dataavailable.

MediaRecorder

Основной интерфейс, реализующий API записи потока медиаданных.

MediaRecorderErrorEvent Устаревший Нестандартный

Интерфейс, представляющий ошибки, выброшенные API записи потока медиаданных. Его свойство error — это DOMException, указывающее на произошедшую ошибку.

• Страница API захвата медиа и потоков
• MediaDevices.getUserMedia()
• Демонстрация записи MediaStream на simpl.info, автором которой является Sam Dutton
• API Media Recorder HTML5 в действии в Chrome и Firefox
• Полифилл MediaRecorder для Safari и Edge
• TutorRoom: Веб-приложение для захвата/воспроизведения/загрузки видео HTML, используя getUserMedia и API записи MediaStream Recording (исходный код на GitHub)
• Простой демонстрационный пример записи видео
• Пример расширенного рекордера потоков медиа
• OpenLang: Веб-приложение для учебного языка HTML, использующее MediaDevices и API записи MediaStream Recording для записи видео (исходный код на GitHub)
• API MediaStream Recorder доступен в Safari Technology Preview 73