Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

VideoFrame

Baseline 2024
Neu verfügbar
*

Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Want more browser support for this feature? Tell us why.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.

Das VideoFrame Interface der Web Codecs API repräsentiert einen Frame eines Videos.

VideoFrame ist ein transferierbares Objekt.

Beschreibung

Ein VideoFrame-Objekt kann auf verschiedene Weisen erstellt oder zugegriffen werden. Der MediaStreamTrackProcessor zerlegt eine Mediatrack 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 aus 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 Mediatrack umgewandelt werden, beispielsweise mit der MediaStreamTrackGenerator Schnittstelle, die eine Mediatrack aus einem Stream von Frames erstellt.

Konstruktor

VideoFrame()

Erstellt ein neues VideoFrame-Objekt.

Instanzeigenschaften

VideoFrame.format Schreibgeschützt

Gibt das Pixelformat des VideoFrame zurück.

VideoFrame.codedWidth Schreibgeschützt

Gibt die Breite des VideoFrame in Pixeln zurück, möglicherweise inklusive nicht sichtbarer Auffüllung, und bevor mögliche Verhältnisänderungen berücksichtigt werden.

VideoFrame.codedHeight Schreibgeschützt

Gibt die Höhe des VideoFrame in Pixeln zurück, möglicherweise inklusive nicht sichtbarer Auffüllung, und bevor mögliche Verhältnisänderungen berücksichtigt werden.

VideoFrame.codedRect Schreibgeschützt

Gibt ein DOMRectReadOnly mit der Breite und Höhe zurück, die codedWidth und codedHeight entsprechen.

VideoFrame.visibleRect Schreibgeschützt

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

VideoFrame.displayWidth Schreibgeschützt

Gibt die Breite des VideoFrame beim Anzeigen nach Anwendung von Seitenverhältnis Anpassungen zurück.

VideoFrame.displayHeight Schreibgeschützt

Gibt die Höhe des VideoFrame beim Anzeigen nach Anwendung von Seitenverhältnis-Anpassungen zurück.

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

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

VideoFrame.rotation Schreibgeschützt

Gibt die Rotation (0, 90, 180 oder 270) in Grad im Uhrzeigersinn zurück, die auf das VideoFrame angewendet wurde. Willkürliche Zahlen (einschließlich negativer) werden auf die nächste Vierteldrehung gerundet.

Instanzmethoden

VideoFrame.allocationSize()

Gibt die Anzahl der Bytes zurück, die benötigt werden, um das VideoFrame zu speichern, gefiltert nach Optionen, die in die Methode übergeben werden.

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 die Referenz zur Medienquelle frei.

VideoFrame.metadata()

Gibt die mit dem VideoFrame verknüpften Metadaten zurück.

Beispiele

Im folgenden Beispiel werden Frames von einem MediaStreamTrackProcessor zurückgegeben und dann kodiert. Sehen Sie sich das vollständige Beispiel an und lesen Sie mehr darüber im Artikel Videobearbeitung mit WebCodecs.

js
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

Spezifikation
WebCodecs
# videoframe-interface

Browser-Kompatibilität

Siehe auch