VideoFrame

Ein VideoFrame-Objekt kann auf verschiedene Weisen erstellt oder abgerufen werden. Der MediaStreamTrackProcessor zerlegt eine Medienspur in einzelne VideoFrame-Objekte.

Ein VideoFrame ist eine Bildquelle und verfügt über einen Konstruktor, der jede andere Canvas-Quelle akzeptiert ( ein SVGImageElement, ein HTMLVideoElement, ein HTMLCanvasElement, ein ImageBitmap, ein OffscreenCanvas oder ein anderes VideoFrame). Dies 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 Pixelrepräsentation in einem ArrayBuffer, einem TypedArray oder einem DataView.

Erstellte Frames können dann in eine Medienspur umgewandelt werden, z.B. mit der MediaStreamTrackGenerator-Schnittstelle, die eine Medienspur aus einem Stream von Frames erstellt.

VideoFrame()

Erstellt ein neues VideoFrame-Objekt.

VideoFrame.format Schreibgeschützt

Gibt das Pixel-Format 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 eventuell Anpassungen des Seitenverhältnisses 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 eventuell Anpassungen des Seitenverhältnisses berücksichtigt werden.

VideoFrame.codedRect Schreibgeschützt

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

VideoFrame.visibleRect Schreibgeschützt

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

VideoFrame.displayWidth Schreibgeschützt

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

VideoFrame.displayHeight Schreibgeschützt

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

VideoFrame.duration Schreibgeschützt

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

VideoFrame.timestamp Schreibgeschützt

Gibt eine ganze Zahl 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) in Grad im Uhrzeigersinn zurück, die auf das VideoFrame angewendet wird. Beliebige Zahlen (einschließlich negativer) werden auf die nächste Vierteldrehung gerundet.

VideoFrame.allocationSize()

Gibt die Anzahl der Bytes zurück, die erforderlich sind, um das VideoFrame zu speichern, gefiltert nach in die Methode übergebenen Optionen.

VideoFrame.copyTo()

Kopiert den Inhalt des VideoFrame in einen ArrayBuffer.

VideoFrame.clone()

Erstellt ein neues VideoFrame-Objekt mit Verweis auf dieselbe Medienressource wie das Original.

VideoFrame.close()

Löscht alle Zustände und gibt den Verweis auf die Medienressource frei.

Im folgenden Beispiel werden Frames aus 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.

let frame_counter = 0;

const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);

const reader = media_processor.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 {
    frame_counter++;
    const insert_keyframe = frame_counter % 150 === 0;
    encoder.encode(frame, { keyFrame: insert_keyframe });
    frame.close();
  }
}

• Videobearbeitung mit WebCodecs
• WebCodecs-Beispiele