[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ja/docs/Web/API/VideoFrame [Back]  [Original]

VideoFrame - Web API | MDN

MDN Web Docs

View in English Always switch to English

VideoFrame

Baseline 2024 *

20249

Want more browser support for this feature? Tell us why.

*

VideoFrame API

VideoFrame

VideoFrame MediaStreamTrackProcessor VideoFrame

VideoFrame SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, VideoFrame

2 ArrayBufferTypedArrayDataView VideoFrame

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

js
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
# videoframe-interface


Web Proxy Viewer  |  New URL  |  Original Page