DasVideoFrame-Interface derWeb Codecs API repräsentiert einen Frame eines Videos.

VideoFrame ist einübertragbares Objekt.

Beschreibung

EinVideoFrame-Objekt kann auf verschiedene Weise erstellt oder aufgerufen werden. DerMediaStreamTrackProcessor unterteilt eine Medienspur in einzelneVideoFrame-Objekte.

EinVideoFrame ist eine Bildquelle und hat einen Konstruktor, der jede andere Canvas-Quelle akzeptiert (einSVGImageElement,einHTMLVideoElement,einHTMLCanvasElement,einImageBitmap,einOffscreenCanvas,oder ein anderesVideoFrame).Das bedeutet, dass ein Frame von einem Bild- oder Videoelement erstellt werden kann.

Ein zweiter Konstruktor ermöglicht die Erstellung einesVideoFrame aus seiner binären Pixel-Darstellung in einemArrayBuffer, einerTypedArray, oder einerDataView.

Erstellte Frames können dann in eine Mediendatei umgewandelt werden, zum Beispiel mit dem InterfaceMediaStreamTrackGenerator, das eine Mediendatei aus einem Stream von Frames erstellt.

Konstruktor

VideoFrame()

Erstellt ein neuesVideoFrame-Objekt.

Instanz-Eigenschaften

VideoFrame.formatSchreibgeschützt

Gibt das Pixelformat desVideoFrame zurück.

VideoFrame.codedWidthSchreibgeschützt

Gibt die Breite desVideoFrame in Pixeln zurück, einschließlich eventuell nicht sichtbarer Auffüllungen und vor möglichen Verhältnis-Anpassungen.

VideoFrame.codedHeightSchreibgeschützt

Gibt die Höhe desVideoFrame in Pixeln zurück, einschließlich eventuell nicht sichtbarer Auffüllungen und vor möglichen Verhältnis-Anpassungen.

VideoFrame.codedRectSchreibgeschützt

Gibt einDOMRectReadOnly zurück, dessen Breite und Höhe mitcodedWidth undcodedHeight übereinstimmen.

VideoFrame.visibleRectSchreibgeschützt

Gibt einDOMRectReadOnly zurück, das das sichtbare Rechteck der Pixel für diesesVideoFrame beschreibt.

VideoFrame.displayWidthSchreibgeschützt

Gibt die Breite desVideoFrame zurück, wenn es nach Anwendung derSeitenverhältnis-Anpassungen angezeigt wird.

VideoFrame.displayHeightSchreibgeschützt

Gibt die Höhe desVideoFrame zurück, wenn es nach Anwendung der Seitenverhältnisanpassungen angezeigt wird.

VideoFrame.durationSchreibgeschützt

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

VideoFrame.timestampSchreibgeschützt

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

VideoFrame.colorSpaceSchreibgeschützt

Gibt einVideoColorSpace-Objekt zurück.

VideoFrame.flipSchreibgeschütztExperimentell

Gibt zurück, ob dasVideoFrame horizontal gespiegelt ist.

VideoFrame.rotationSchreibgeschütztExperimentell

Gibt die Drehung (0, 90, 180 oder 270) im Uhrzeigersinn angewendet auf dasVideoFrame zurück. Beliebige Zahlen (einschließlich negativer) werden auf die nächste Vierteldrehung gerundet.

Instanz-Methoden

VideoFrame.allocationSize()

Gibt die Anzahl der Bytes zurück, die erforderlich sind, um dasVideoFrame entsprechend der durch die Methode übergebenen Optionen zu halten.

VideoFrame.copyTo()

Kopiert den Inhalt desVideoFrame in einenArrayBuffer.

VideoFrame.clone()

Erstellt ein neuesVideoFrame-Objekt mit Verweis auf die gleiche Medienquelle wie das Original.

VideoFrame.close()

Löscht alle Zustände und gibt den Verweis auf die Medienquelle frei.

Beispiele

Im folgenden Beispiel werden Frames aus einemMediaStreamTrackProcessor zurückgegeben und dann codiert. Sehen Sie sich das vollständige Beispiel an und lesen Sie mehr darüber im ArtikelVideoverarbeitung mit WebCodecs.

let frameCounter = 0;const track = stream.getVideoTracks()[0];const mediaProcessor = new MediaStreamTrackProcessor(track);const reader = mediaProcessor.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 {    frameCounter++;    const insertKeyframe = frameCounter % 150 === 0;    encoder.encode(frame, { keyFrame: insertKeyframe });    frame.close();  }}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Videoverarbeitung mit WebCodecs
• WebCodecs-Beispiele