API WebCodecs

API WebCodecs предоставляет веб-разработчикам низкоуровневый доступ к отдельным кадрам потока видео и фрагментам аудио. Он полезен для веб-приложений, которые требуют полного контроля над обработкой медиа. Например, для видео- или аудиоредакторов и видеоконференций.

Многие веб-API используют кодеки медиа внутри. Например, Web Audio API и WebRTC API. Однако эти API не позволяют разработчикам работать с отдельными кадрами потока видео и несмешанными фрагментами закодированного аудио или видео.

Веб-разработчики обычно использовали WebAssembly, чтобы обойти это ограничение и работать с кодеками медиа в браузере. Однако это требует дополнительной пропускной способности для загрузки кодеков, которые уже существуют в браузере, что снижает производительность и энергоэффективность, а также добавляет дополнительную нагрузку на разработку.

API WebCodecs предоставляет доступ к кодекам, которые уже находятся в браузере. Он предоставляет доступ к исходным кадрам видео, фрагментам аудиоданных, декодерам изображений, кодерам и декодерам аудио и видео.

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

Методы, имеющие названия configure(), encode(), decode(), и flush(), работают асинхронно, добавляя управляющие сообщения в конец очереди, в то время как методы, имеющие названия reset() и close(), синхронно прерывают всю запланированную работу и очищают очередь обработки. После reset(), можно добавить больше работы, вызвав configure(), но close() — это постоянная операция.

Методы с названиями flush() могут использоваться для ожидания завершения всей работы, которая была запланирована на момент вызова flush(). Однако, как правило, его следует вызывать только после добавления всей необходимой работы в очередь. Он не предназначен для принудительного продвижения работы в определенные моменты времени. Излишнее его использование повлияет на качество кодирования и приведет к тому, что декодерам потребуется следующий вход в виде ключевого кадра.

В настоящее время нет API для демодуляции контейнеров медиа. Разработчики, работающие с контейнерными медиа, должны реализовать свои собственные или использовать сторонние библиотеки. Например, MP4Box.js или jswebm можно использовать для демодуляции аудио- и видеоданных в EncodedAudioChunk и EncodedVideoChunk объекты соответственно.

AudioDecoder

Декодирует EncodedAudioChunk объекты.

VideoDecoder

Декодирует EncodedVideoChunk объекты.

AudioEncoder

Кодирует AudioData объекты.

VideoEncoder

Кодирует VideoFrame объекты.

EncodedAudioChunk

Представляет закодированные аудиобайты, специфичные для кодека.

EncodedVideoChunk

Представляет закодированные видеобайты, специфичные для кодека.

AudioData

Представляет некодированные аудиоданные.

VideoFrame

Представляет кадр некодированных видеоданных.

VideoColorSpace

Представляет цветовое пространство кадра видео.

ImageDecoder

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

ImageTrackList

Представляет список дорожек, доступных в изображении.

ImageTrack

Представляет отдельную дорожку изображения.

В следующем примере кадры возвращаются из MediaStreamTrackProcessor, а затем кодируются. Полный пример и дополнительную информацию можно найти в статье Обработка видео с помощью WebCodecs.

let frame_counter = 0;
const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);
const reader = media_processor.readable.getReader();
while (true) {
  const result = await reader.read();
  if (result.done) break;
  let frame = result.value;
  if (encoder.encodeQueueSize > 2) {
    // Too many frames in flight, encoder is overwhelmed
    // let's drop this frame.
    frame.close();
  } else {
    frame_counter++;
    const insert_keyframe = frame_counter % 150 === 0;
    encoder.encode(frame, { keyFrame: insert_keyframe });
    frame.close();
  }
}

• Обработка видео с помощью WebCodecs
• Примеры API WebCodecs
• Обработка видео в реальном времени с помощью WebCodecs и потоков: Обработка конвейеров
• Обработка кадров видео в браузере – WebAssembly, WebGPU, WebGL, WebCodecs, WebNN и WebTransport