VideoFrame - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

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.

* 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 übertragbares Objekt.

In diesem Artikel

Beschreibung

Ein VideoFrame Objekt kann auf verschiedene Weise erstellt oder aufgerufen werden. Der MediaStreamTrackProcessor zerlegt einen Medientrack 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 Pixelrepräsentation in einem ArrayBuffer, einer TypedArray, oder einer DataView.

Erstellte Frames können dann in einen Medientrack umgewandelt werden, zum Beispiel mit dem MediaStreamTrackGenerator Interface, das einen Medientrack 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, möglicherweise einschließlich nicht sichtbarer Auffüllungen, und bevor potenzielle Verhältnis-Anpassungen betrachtet werden.

VideoFrame.codedHeight Schreibgeschützt

Gibt die Höhe des VideoFrame in Pixeln zurück, möglicherweise einschließlich nicht sichtbarer Auffüllungen, und bevor potenzielle Verhältnis-Anpassungen betrachtet 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 der Pixel 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 der Seitenverhältnis-Anpassungen zurück.

VideoFrame.duration Schreibgeschützt

Gibt ein Integer zurück, das die Dauer des Videos in Mikrosekunden angibt.

VideoFrame.timestamp Schreibgeschützt

Gibt ein Integer zurück, das 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 an, die auf das VideoFrame angewendet wird. 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 zu halten, gefiltert durch 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 Bezug auf die gleiche Medienressource wie das Original.

VideoFrame.close()

Löscht alle Zustände und gibt die Referenz zur Medienressource frei.

VideoFrame.metadata()

Gibt die Metadaten zurück, die mit dem VideoFrame verbunden sind.

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 Videoverarbeitung 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();
  }
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden