VideoFrame: VideoFrame()-Konstruktor

Der erste Typ des Konstruktors (siehe oben) erstellt ein neues VideoFrame aus 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 Frames in Mikrosekunden repräsentiert.

timestamp

Ein Integer, der den Zeitstempel des Frames in Mikrosekunden repräsentiert.

alpha Optional

Ein String, der beschreibt, wie der Benutzeragent mit Alphakanälen umgehen soll. Der Standardwert ist "keep".

• "keep": Gibt an, dass der Benutzeragent die Daten des Alphakanals behalten soll.
• "discard": Gibt an, dass der Benutzeragent die Daten des Alphakanals ignorieren oder entfernen soll.

visibleRect Optional

Ein Objekt, das das sichtbare Rechteck des VideoFrames repräsentiert und Folgendes enthält:

x

Die x-Koordinate.

y

Die y-Koordinate.

width

Die Breite des Frames.

height

Die Höhe des Frames.

displayWidth Optional

Die Breite des VideoFrames, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

displayHeight Optional

Die Höhe des VideoFrames, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

Der zweite Typ des Konstruktors (siehe oben) erstellt ein neues VideoFrame aus 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-Pixel-Format repräsentiert. Einer der folgenden Strings, die auf der Seite für die format-Eigenschaft vollständig beschrieben sind:

• "I420"
• "I420A"
• "I422"
• "I444"
• "NV12"
• "RGBA"
• "RGBX"
• "BGRA"
• "BGRX"

codedWidth

Die Breite des VideoFrames in Pixeln, möglicherweise einschließlich nicht sichtbarer Polsterung und vor der Berücksichtigung potenzieller Verhältnis-Anpassungen.

codedHeight

Die Höhe des VideoFrames in Pixeln, möglicherweise einschließlich nicht sichtbarer Polsterung und vor der Berücksichtigung potenzieller Verhältnis-Anpassungen.

timestamp

Ein Integer, der den Zeitstempel des Frames in Mikrosekunden repräsentiert.

duration Optional

Ein Integer, der die Dauer des Frames in Mikrosekunden repräsentiert.

layout Optional

Eine Liste, die die folgenden Werte für jede Ebene im VideoFrame enthält:

offset

Ein Integer, der den Offset in Bytes angibt, wo die gegebene Ebene beginnt.

stride

Ein Integer, der die Anzahl der Bytes einschließlich Polsterung angibt, die von jeder Reihe der Ebene verwendet wird. Ebenen dürfen sich nicht überlappen. Wenn kein layout angegeben wird, werden die Ebenen dicht gepackt.

visibleRect Optional

Ein Objekt, das das sichtbare Rechteck des VideoFrames repräsentiert und Folgendes enthält:

x

Die x-Koordinate.

y

Die y-Koordinate.

width

Die Breite des Frames.

height

Die Höhe des Frames.

displayWidth Optional

Die Breite des VideoFrames, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

displayHeight Optional

Die Höhe des VideoFrames, wenn es nach Anwendung von Seitenverhältnis-Anpassungen angezeigt wird.

colorSpace

Ein Objekt, das den Farbraum des VideoFrames repräsentiert und Folgendes enthält:

primaries

Ein String, der die Video-Farbprimärwerte beschreibt, wie auf der Seite für die VideoColorSpace.primaries-Eigenschaft beschrieben.

transfer

Ein String, der die Video-Farbübertragungsfunktion beschreibt, wie auf der Seite für die VideoColorSpace.transfer-Eigenschaft beschrieben.

matrix

Ein String, der die Video-Farbmatrix beschreibt, wie auf der Seite für die VideoColorSpace.matrix-Eigenschaft beschrieben.

fullRange

Ein Boolean. Wenn true, gibt dies an, dass Vollbereichs-Farbwerte verwendet werden.

transfer

Ein Array von ArrayBuffers, das VideoFrame abtrennen und übernehmen wird. Wenn das Array den ArrayBuffer enthält, der data unterstützt, wird VideoFrame diesen Puffer direkt verwenden, statt daraus zu kopieren.

Die folgenden Beispiele stammen aus dem Artikel Videoverarbeitung mit WebCodecs. In diesem ersten Beispiel wird ein VideoFrame aus einer Leinwand 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 aus 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);