VideoFrame
Baseline 2024>
Neu verfügbar
*
Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.
Das VideoFrame Interface der Web Codecs API repräsentiert einen Frame eines Videos.
VideoFrame ist ein transferierbares Objekt.
Beschreibung
Ein VideoFrame-Objekt kann auf verschiedene Weisen erstellt oder zugegriffen werden. Der MediaStreamTrackProcessor zerlegt eine Mediatrack in einzelne VideoFrame-Objekte.
Ein VideoFrame ist eine Bildquelle und hat 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 Pixel-Darstellung in einem ArrayBuffer, einer TypedArray oder einer DataView.
Erstellte Frames können dann in eine Mediatrack umgewandelt werden, beispielsweise mit der MediaStreamTrackGenerator Schnittstelle, die eine Mediatrack aus einem Stream von Frames erstellt.
Konstruktor
VideoFrame()-
Erstellt ein neues
VideoFrame-Objekt.
Instanzeigenschaften
VideoFrame.formatSchreibgeschützt-
Gibt das Pixelformat des
VideoFramezurück. VideoFrame.codedWidthSchreibgeschützt-
Gibt die Breite des
VideoFramein Pixeln zurück, möglicherweise inklusive nicht sichtbarer Auffüllung, und bevor mögliche Verhältnisänderungen berücksichtigt werden. VideoFrame.codedHeightSchreibgeschützt-
Gibt die Höhe des
VideoFramein Pixeln zurück, möglicherweise inklusive nicht sichtbarer Auffüllung, und bevor mögliche Verhältnisänderungen berücksichtigt werden. VideoFrame.codedRectSchreibgeschützt-
Gibt ein
DOMRectReadOnlymit der Breite und Höhe zurück, diecodedWidthundcodedHeightentsprechen. VideoFrame.visibleRectSchreibgeschützt-
Gibt ein
DOMRectReadOnlyzurück, das das sichtbare Rechteck von Pixeln für diesesVideoFramebeschreibt. VideoFrame.displayWidthSchreibgeschützt-
Gibt die Breite des
VideoFramebeim Anzeigen nach Anwendung von Seitenverhältnis Anpassungen zurück. VideoFrame.displayHeightSchreibgeschützt-
Gibt die Höhe des
VideoFramebeim Anzeigen nach Anwendung von Seitenverhältnis-Anpassungen zurück. 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 ein
VideoColorSpaceObjekt zurück. VideoFrame.flipSchreibgeschützt-
Gibt zurück, ob das
VideoFramehorizontal gespiegelt ist. VideoFrame.rotationSchreibgeschützt-
Gibt die Rotation (0, 90, 180 oder 270) in Grad im Uhrzeigersinn zurück, die auf das
VideoFrameangewendet wurde. Willkürliche Zahlen (einschließlich negativer) werden auf die nächste Vierteldrehung gerundet.
Instanzmethoden
VideoFrame.allocationSize()-
Gibt die Anzahl der Bytes zurück, die benötigt werden, um das
VideoFramezu speichern, gefiltert nach Optionen, die in die Methode übergeben werden. VideoFrame.copyTo()-
Kopiert den Inhalt des
VideoFramein einenArrayBuffer. VideoFrame.clone()-
Erstellt ein neues
VideoFrame-Objekt mit Verweis auf die gleiche Medienquelle wie das Original. VideoFrame.close()-
Löscht alle Zustände und gibt die Referenz zur Medienquelle frei.
VideoFrame.metadata()-
Gibt die mit dem
VideoFrameverknüpften Metadaten zurück.
Beispiele
Im folgenden Beispiel werden Frames von einem MediaStreamTrackProcessor zurückgegeben und dann kodiert. Sehen Sie sich das vollständige Beispiel an und lesen Sie mehr darüber im Artikel Videobearbeitung 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
| Spezifikation |
|---|
| WebCodecs> # videoframe-interface> |