VideoFrame

Ein VideoFrame-Objekt kann auf verschiedene Weise erstellt oder abgerufen werden. Der MediaStreamTrackProcessor zerlegt eine Medienspur in einzelne VideoFrame-Objekte.

Ein VideoFrame ist eine Bildquelle und verfügt über einen Konstruktor, der jede andere Canvas-Quelle akzeptiert ( ein SVGImageElement, ein HTMLVideoElement, ein HTMLCanvasElement, ein ImageBitmap, ein OffscreenCanvas, oder ein anderes VideoFrame). Das bedeutet, dass ein Frame aus einem Bild oder Videoelement erstellt werden kann.

Ein zweiter Konstruktor ermöglicht die Erstellung eines VideoFrame aus seiner binären Pixelrepräsentation in einem ArrayBuffer, einem TypedArray oder einem DataView.

Erstellte Frames können dann in eine Medienspur umgewandelt werden, zum Beispiel mit der MediaStreamTrackGenerator Schnittstelle, die eine Medienspur aus einem Stream von Frames erstellt.

VideoFrame()

Erstellt ein neues VideoFrame-Objekt.

VideoFrame.format Nur lesbar

Gibt das Pixelformat des VideoFrame zurück.

VideoFrame.codedWidth Nur lesbar

Gibt die Breite des VideoFrame in Pixeln zurück, möglicherweise einschließlich unsichtbarer Polsterung und vor Berücksichtigung potenzieller Verhältnis-Anpassungen.

VideoFrame.codedHeight Nur lesbar

Gibt die Höhe des VideoFrame in Pixeln zurück, möglicherweise einschließlich unsichtbarer Polsterung und vor Berücksichtigung potenzieller Verhältnis-Anpassungen.

VideoFrame.codedRect Nur lesbar

Gibt ein DOMRectReadOnly mit der Breite und Höhe zurück, die codedWidth und codedHeight entsprechen.

VideoFrame.visibleRect Nur lesbar

Gibt ein DOMRectReadOnly zurück, das das sichtbare Rechteck der Pixel für dieses VideoFrame beschreibt.

VideoFrame.displayWidth Nur lesbar

Gibt die Breite des VideoFrame zurück, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

VideoFrame.displayHeight Nur lesbar

Gibt die Höhe des VideoFrame zurück, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

VideoFrame.duration Nur lesbar

Gibt eine ganze Zahl zurück, die die Dauer des Videos in Mikrosekunden angibt.

VideoFrame.timestamp Nur lesbar

Gibt eine ganze Zahl zurück, die den Zeitstempel des Videos in Mikrosekunden angibt.

VideoFrame.colorSpace Nur lesbar

Gibt ein VideoColorSpace Objekt zurück.

VideoFrame.allocationSize()

Gibt die Anzahl der Bytes zurück, die benötigt werden, um das VideoFrame zu halten, gefiltert durch Optionen, die in die Methode übergeben werden.

VideoFrame.copyTo()

Kopiert den Inhalt des VideoFrame in einen ArrayBuffer.

VideoFrame.clone()

Erstellt ein neues VideoFrame-Objekt mit Bezug auf die gleiche Medienressource wie das Original.

VideoFrame.close()

Löscht alle Zustände und gibt die Referenz zur Medienressource frei.

Im folgenden Beispiel werden Frames von einem MediaStreamTrackProcessor zurückgegeben und dann kodiert. Sehen Sie das vollständige Beispiel und lesen Sie mehr darüber in dem Artikel Videoverarbeitung mit 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();
  }
}

• Videoverarbeitung mit WebCodecs
• WebCodecs Beispiele