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

js
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: ein SVGImageElement, ein HTMLVideoElement, ein HTMLCanvasElement, ein ImageBitmap, ein OffscreenCanvas, oder ein anderes VideoFrame.

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:

x

Die x-Koordinate.

y

Die y-Koordinate.

width

Die Breite des Einzelbildes.

height

Die Höhe des Einzelbildes.

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 ist false.

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, ein TypedArray, oder ein DataView, das die Daten für das neue VideoFrame 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:

x

Die x-Koordinate.

y

Die y-Koordinate.

width

Die Breite des Einzelbildes.

height

Die Höhe des Einzelbildes.

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 ArrayBuffers, die VideoFrame abtrennen und in Besitz nehmen wird. Wenn das Array den für data unterstützenden ArrayBuffer enthält, wird VideoFrame diesen Puffer direkt verwenden, anstatt ihn zu kopieren.

flip Optional

Ein boolescher Wert. Wenn true, wird eine horizontale Spiegelung angewendet. Standardwert ist false.

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.

js
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.

js
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

Browser-Kompatibilität