VideoFrame: VideoFrame() Konstruktor

Der erste Konstruktionstyp (siehe oben) erstellt ein neues VideoFrame aus einem Bild. Die 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, eine OffscreenCanvas oder ein anderes VideoFrame.

options Optional

Ein Objekt, das Folgendes enthält:

duration Optional

Ein Integer, der die Dauer des Bildes in Mikrosekunden darstellt.

timestamp

Ein Integer, der den Zeitstempel des Bildes in Mikrosekunden darstellt.

alpha Optional

Ein String, der beschreibt, wie der User-Agent mit Alpha-Kanälen umgehen soll. Der Standardwert ist "keep".

• "keep": Weist darauf hin, dass der User-Agent Alpha-Kanal-Daten beibehalten soll.
• "discard": Weist darauf hin, dass der User-Agent Alpha-Kanal-Daten 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 Bildes.

height

Die Höhe des Bildes.

displayWidth Optional

Die Breite des VideoFrame, wenn es nach Anpassungen des Seitenverhältnisses angezeigt wird.

displayHeight Optional

Die Höhe des VideoFrame, wenn es nach Anpassungen des Seitenverhältnisses angezeigt wird.

Der zweite Konstruktionstyp (siehe oben) erstellt ein neues VideoFrame aus einem ArrayBuffer. Die 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 sind:

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

codedWidth

Die Breite des VideoFrame in Pixel, die potenziell nicht sichtbare Auffüllung einschließen kann und bevor mögliche Verhältnis-Anpassungen berücksichtigt werden.

codedHeight

Die Höhe des VideoFrame in Pixel, die potenziell nicht sichtbare Auffüllung einschließen kann und bevor mögliche Verhältnis-Anpassungen berücksichtigt werden.

timestamp

Ein Integer, der den Zeitstempel des Bildes in Mikrosekunden darstellt.

duration Optional

Ein Integer, der die Dauer des Bildes in Mikrosekunden darstellt.

layout Optional

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

offset

Ein Integer, der den Versatz in Bytes darstellt, bei dem die gegebene Ebene beginnt.

stride

Ein Integer, der die Anzahl der Bytes darstellt, einschließlich auffüllendem Daten, die von jeder Zeile der Ebene verwendet werden. Ebenen dürfen sich nicht überlappen. 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 Bildes.

height

Die Höhe des Bildes.

displayWidth Optional

Die Breite des VideoFrame, wenn es nach Anpassungen des Seitenverhältnisses angezeigt wird.

displayHeight Optional

Die Höhe des VideoFrame, wenn es nach Anpassungen des Seitenverhältnisses 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 Vollbereichs-Farbwerte verwendet werden.

transfer

Ein Array von ArrayBuffers, das VideoFrame abkoppelt und übernimmt. Wenn das Array den ArrayBuffer, der data unterstützt, enthält, wird VideoFrame diesen Puffer direkt verwenden, anstatt ihn zu kopieren.

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
// ...
let frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });

Im folgenden Beispiel wird ein VideoFrame aus einem TypedArray erstellt.

const pixelSize = 4;
let init = {
  timestamp: 0,
  codedWidth: 320,
  codedHeight: 200,
  format: "RGBA",
};
let data = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize);
for (let x = 0; x < init.codedWidth; x++) {
  for (let y = 0; y < init.codedHeight; y++) {
    let 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];
let frame = new VideoFrame(data, init);