VideoFrame

Интерфейс VideoFrame из API Web Codecs представляет собой кадр видео.

VideoFrame — это передаваемый объект.

Объект VideoFrame может быть создан или получен несколькими способами. MediaStreamTrackProcessor разбивает медиапоток на отдельные объекты VideoFrame.

VideoFrame — это источник изображения и имеет конструктор, который принимает любой другой источник холста (элемент SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas или другой VideoFrame). Это означает, что кадр может быть создан из элемента изображения или видео.

Второй конструктор позволяет создать VideoFrame из его бинарного представления пикселей в ArrayBuffer, TypedArray или DataView.

Созданные кадры могут быть преобразованы в медиапоток, например, с помощью интерфейса MediaStreamTrackGenerator, который создает медиапоток из потока кадров.

VideoFrame()

Создаёт новый объект VideoFrame.

VideoFrame.format Только для чтения

Возвращает формат пикселей VideoFrame.

VideoFrame.codedWidth Только для чтения

Возвращает ширину VideoFrame в пикселях, потенциально включая невидимые отступы, до применения потенциальных корректировок соотношения сторон.

VideoFrame.codedHeight Только для чтения

Возвращает высоту VideoFrame в пикселях, потенциально включая невидимые отступы, до применения потенциальных корректировок соотношения сторон.

VideoFrame.codedRect Только для чтения

Возвращает DOMRectReadOnly с шириной и высотой, соответствующими codedWidth и codedHeight.

VideoFrame.visibleRect Только для чтения

Возвращает DOMRectReadOnly, описывающий видимый прямоугольник пикселей для этого VideoFrame.

VideoFrame.displayWidth Только для чтения

Возвращает ширину VideoFrame при отображении после применения корректировок соотношения сторон.

VideoFrame.displayHeight Только для чтения

Возвращает высоту VideoFrame при отображении после применения корректировок соотношения сторон.

VideoFrame.duration Только для чтения

Возвращает целое число, указывающее длительность видео в микросекундах.

VideoFrame.timestamp Только для чтения

Возвращает целое число, указывающее временную метку видео в микросекундах.

VideoFrame.colorSpace Только для чтения

Возвращает объект VideoColorSpace.

VideoFrame.allocationSize()

Возвращает количество байтов, необходимое для хранения VideoFrame, отфильтрованное параметрами, переданными в метод.

VideoFrame.copyTo()

Копирует содержимое VideoFrame в ArrayBuffer.

VideoFrame.clone()

Создаёт новый объект VideoFrame со ссылкой на тот же медиаресурс, что и оригинал.

VideoFrame.close()

Очищает все состояния и освобождает ссылку на медиаресурс.

В следующем примере кадры возвращаются из 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
• Примеры WebCodecs