VideoFrame: VideoFrame() Konstruktor
Baseline 2024 *Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.
Der VideoFrame()
Konstruktor erstellt ein neues VideoFrame
Objekt, das ein Einzelbild eines Videos darstellt.
Syntax
new VideoFrame(image)
new VideoFrame(image, options)
new VideoFrame(data, options)
Parameter
Der erste Konstruktor-Typ (siehe oben) erstellt ein neues VideoFrame
von einem Bild. Seine Parameter sind:
image
-
Ein Bild, das die Bilddaten für das neue
VideoFrame
enthält. Es kann eines der folgenden Objekte sein: einSVGImageElement
, einHTMLVideoElement
, einHTMLCanvasElement
, einImageBitmap
, einOffscreenCanvas
, oder ein anderesVideoFrame
. options
Optional-
Ein Objekt, das Folgendes enthält:
duration
Optional-
Ein Integer, der die Dauer des Einzelbildes in Mikrosekunden darstellt.
timestamp
-
Ein Integer, der den Zeitstempel des Einzelbildes in Mikrosekunden darstellt.
alpha
Optional-
Ein String, der beschreibt, wie der Benutzeragent mit Alphakanälen umgehen sollte. Der Standardwert ist "keep".
"keep"
: Gibt an, dass der Benutzeragent die Alphakanaldaten beibehalten soll."discard"
: Gibt an, dass der Benutzeragent die Alphakanaldaten ignorieren oder entfernen soll.
visibleRect
Optional-
Ein Objekt, das das sichtbare Rechteck des
VideoFrame
darstellt und Folgendes enthält: displayWidth
Optional-
Die Breite des
VideoFrame
, wenn es nach Anwendung von Seitenverhältnisanpassungen angezeigt wird. displayHeight
Optional-
Die Höhe des
VideoFrame
, wenn es nach Anwendung von Seitenverhältnisanpassungen angezeigt wird. flip
Optional-
Ein boolescher Wert. Wenn
true
, wird eine horizontale Spiegelung angewendet. Standardwert istfalse
. rotation
Optional-
Ein Integer, der die Drehung (0, 90, 180 oder 270) im Uhrzeigersinn in Grad darstellt. Standardwert ist
0
. Willkürliche Zahlen (einschließlich negativer) werden zur nächsten Vierteldrehung gerundet.
Der zweite Konstruktor-Typ (siehe oben) erstellt ein neues VideoFrame
von einem ArrayBuffer
. Seine Parameter sind:
data
-
Ein
ArrayBuffer
, einTypedArray
, oder einDataView
, das die Daten für das neueVideoFrame
enthält. options
-
Ein Objekt, das Folgendes enthält:
format
-
Ein String, der das Video-Pixelformat darstellt. Einer der folgenden Strings, die auf der Seite für die
format
Eigenschaft vollständig beschrieben werden:"I420"
"I420A"
"I422"
"I444"
"NV12"
"RGBA"
"RGBX"
"BGRA"
"BGRX"
codedWidth
-
Breite des
VideoFrame
in Pixeln, potenziell einschließlich nicht sichtbarer Polsterung, und vor Berücksichtigung potenzieller Verhältnisänderungen. codedHeight
-
Höhe des
VideoFrame
in Pixeln, potenziell einschließlich nicht sichtbarer Polsterung, und vor Berücksichtigung potenzieller Verhältnisänderungen. timestamp
-
Ein Integer, der den Zeitstempel des Einzelbildes in Mikrosekunden darstellt.
duration
Optional-
Ein Integer, der die Dauer des Einzelbildes in Mikrosekunden darstellt.
layout
Optional-
Eine Liste, die für jede Ebene im
VideoFrame
die folgenden Werte enthält:offset
-
Ein Integer, der den Offset in Bytes darstellt, an dem die gegebene Ebene beginnt.
stride
-
Ein Integer, der die Anzahl der Bytes, einschließlich Polsterung, darstellt, die von jeder Zeile der Ebene verwendet werden. Ebenen dürfen sich nicht überschneiden. Wenn kein
layout
angegeben ist, werden die Ebenen eng gepackt.
visibleRect
Optional-
Ein Objekt, das das sichtbare Rechteck des
VideoFrame
darstellt und Folgendes enthält: displayWidth
Optional-
Die Breite des
VideoFrame
, wenn es nach Anwendung von Seitenverhältnisanpassungen angezeigt wird. displayHeight
Optional-
Die Höhe des
VideoFrame
, wenn es nach Anwendung von Seitenverhältnisanpassungen angezeigt wird. colorSpace
-
Ein Objekt, das den Farbraum des
VideoFrame
darstellt und Folgendes enthält:primaries
-
Ein String, der die Video-Farbprimärfarben darstellt, beschrieben auf der Seite für die
VideoColorSpace.primaries
Eigenschaft. transfer
-
Ein String, der die Video-Farbübertragungsfunktion darstellt, beschrieben auf der Seite für die
VideoColorSpace.transfer
Eigenschaft. matrix
-
Ein String, der die Video-Farbmatrix darstellt, beschrieben auf der Seite für die
VideoColorSpace.matrix
Eigenschaft. fullRange
-
Ein Boolean. Wenn
true
, wird angezeigt, dass Vollbereichsfarbwerte verwendet werden.
transfer
-
Ein Array von
ArrayBuffer
s, dieVideoFrame
abtrennen und in Besitz nehmen wird. Wenn das Array den fürdata
unterstützendenArrayBuffer
enthält, wirdVideoFrame
diesen Puffer direkt verwenden, anstatt ihn zu kopieren. flip
Optional-
Ein boolescher Wert. Wenn
true
, wird eine horizontale Spiegelung angewendet. Standardwert istfalse
. rotation
Optional-
Ein Integer, der die Drehung (0, 90, 180 oder 270) im Uhrzeigersinn in Grad darstellt. Standardwert ist
0
. Willkürliche Zahlen (einschließlich negativer) werden zur nächsten Vierteldrehung gerundet.
Beispiele
Die folgenden Beispiele stammen aus dem Artikel Videobearbeitung mit WebCodecs. In diesem ersten Beispiel wird ein VideoFrame
aus einem Canvas erstellt.
const cnv = document.createElement("canvas");
// draw something on the canvas
// …
const frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });
Im folgenden Beispiel wird ein VideoFrame
von einem TypedArray
erstellt.
const pixelSize = 4;
const init = {
timestamp: 0,
codedWidth: 320,
codedHeight: 200,
format: "RGBA",
};
const data = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize);
for (let x = 0; x < init.codedWidth; x++) {
for (let y = 0; y < init.codedHeight; y++) {
const offset = (y * init.codedWidth + x) * pixelSize;
data[offset] = 0x7f; // Red
data[offset + 1] = 0xff; // Green
data[offset + 2] = 0xd4; // Blue
data[offset + 3] = 0x0ff; // Alpha
}
}
init.transfer = [data.buffer];
const frame = new VideoFrame(data, init);
Spezifikationen
Specification |
---|
WebCodecs # dom-videoframe-videoframe |