VideoFrame

Beschreibung

Ein VideoFrame-Objekt kann auf verschiedene Weise erstellt oder aufgerufen werden. Der MediaStreamTrackProcessor unterteilt eine Medienspur 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 von 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 Mediendatei umgewandelt werden, zum Beispiel mit dem Interface MediaStreamTrackGenerator, das eine Mediendatei aus einem Stream von Frames erstellt.

Konstruktor

VideoFrame()

Erstellt ein neues VideoFrame-Objekt.

Instanz-Eigenschaften

VideoFrame.format Schreibgeschützt

Gibt das Pixelformat des VideoFrame zurück.

VideoFrame.codedWidth Schreibgeschützt

Gibt die Breite des VideoFrame in Pixeln zurück, einschließlich eventuell nicht sichtbarer Auffüllungen und vor möglichen Verhältnis-Anpassungen.

VideoFrame.codedHeight Schreibgeschützt

Gibt die Höhe des VideoFrame in Pixeln zurück, einschließlich eventuell nicht sichtbarer Auffüllungen und vor möglichen Verhältnis-Anpassungen.

VideoFrame.codedRect Schreibgeschützt

Gibt ein DOMRectReadOnly zurück, dessen Breite und Höhe mit codedWidth und codedHeight übereinstimmen.

VideoFrame.visibleRect Schreibgeschützt

Gibt ein DOMRectReadOnly zurück, das das sichtbare Rechteck der Pixel für dieses VideoFrame beschreibt.

VideoFrame.displayWidth Schreibgeschützt

Gibt die Breite des VideoFrame zurück, wenn es nach Anwendung der Seitenverhältnis-Anpassungen angezeigt wird.

VideoFrame.displayHeight Schreibgeschützt

Gibt die Höhe des VideoFrame zurück, wenn es nach Anwendung der Seitenverhältnisanpassungen angezeigt wird.

VideoFrame.duration Schreibgeschützt

Gibt eine Ganzzahl zurück, die die Dauer des Videos in Mikrosekunden angibt.

VideoFrame.timestamp Schreibgeschützt

Gibt eine Ganzzahl zurück, die den Zeitstempel des Videos in Mikrosekunden angibt.

VideoFrame.colorSpace Schreibgeschützt

Gibt ein VideoColorSpace-Objekt zurück.

VideoFrame.flip Schreibgeschützt Experimentell

Gibt zurück, ob das VideoFrame horizontal gespiegelt ist.

VideoFrame.rotation Schreibgeschützt Experimentell

Gibt die Drehung (0, 90, 180 oder 270) im Uhrzeigersinn angewendet auf das VideoFrame zurück. Beliebige Zahlen (einschließlich negativer) werden auf die nächste Vierteldrehung gerundet.

Instanz-Methoden

VideoFrame.allocationSize()

Gibt die Anzahl der Bytes zurück, die erforderlich sind, um das VideoFrame entsprechend der durch die Methode übergebenen Optionen zu halten.

VideoFrame.copyTo()

Kopiert den Inhalt des VideoFrame in einen ArrayBuffer.

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 den Verweis auf die Medienquelle frei.

Beispiele

Im folgenden Beispiel werden Frames aus einem MediaStreamTrackProcessor zurückgegeben und dann codiert. Sehen Sie sich das vollständige Beispiel an und lesen Sie mehr darüber im Artikel Videoverarbeitung 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

Browser-Kompatibilität

Siehe auch

• Videoverarbeitung mit WebCodecs
• WebCodecs-Beispiele