VideoFrame.flip — Eigenschaft · JavaScript-Referenz

Signatur

VideoFrame.flip

Beschreibung

Die Eigenschaft flip des VideoFrame-Interfaces gibt true zurück, wenn der Frame bei der Darstellung horizontal gespiegelt werden soll. Die Pixeldaten im Speicher werden dabei nicht verändert. flip ist nur ein Metadatum zur Ausrichtung und gehört zu rotation.

Gesetzt wird der Wert beim Erzeugen des Frames über das Init-Wörterbuch des Konstruktors (new VideoFrame(source, { flip: true })). Alternativ übernimmt der VideoDecoder die Werte flip und rotation aus seiner VideoDecoderConfig. Danach lässt sich der Wert nur noch lesen.

Typische Einsatzfälle:

gespiegelte Selfie-Kameras,
Videos von Mobilgeräten mit Ausrichtungs-Metadaten,
eigene Rendering-Pipelines mit WebGL/WebGPU oder copyTo(), in denen die Ausrichtung selbst umgesetzt werden muss.

Laut Spezifikation wird die Spiegelung vor der Drehung (rotation) angewendet.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Frame horizontal gespiegelt dargestellt werden soll, sonst false (Standardwert).

Beispiele

Gespiegelten Frame erzeugen und flip auslesen

const canvas = new OffscreenCanvas(320, 240);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, 160, 240);

const frame = new VideoFrame(canvas, { timestamp: 0, flip: true });
console.log(frame.flip);     // true
console.log(frame.rotation); // 0
frame.close();

true 0

Spiegelung beim eigenen Rendern berücksichtigen

// Zeichnet die Pixeldaten des Frames und setzt flip von Hand um
const drawFrame = async (frame, ctx) => {
  const bitmap = await createImageBitmap(frame);
  ctx.save();
  if (frame.flip) {
    ctx.translate(ctx.canvas.width, 0);
    ctx.scale(-1, 1); // horizontal spiegeln
  }
  ctx.drawImage(bitmap, 0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.restore();
  bitmap.close();
};

Selfie-Kamera: Frames für die Vorschau spiegeln

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();
const reader = new MediaStreamTrackProcessor({ track }).readable.getReader();

const { value: frame } = await reader.read();
// Neuen Frame mit Spiegel-Metadatum erzeugen (Pixeldaten bleiben gleich)
const mirrored = new VideoFrame(frame, { flip: true });
frame.close();

console.log('Gespiegelt:', mirrored.flip);
mirrored.close();

Gespiegelt: true

// Wichtig · Fallstricke

Nur Metadaten: flip verändert die Pixel nicht. Mit copyTo() kopierte Daten und Texturen aus WebGL/WebGPU liegen weiter in der ursprünglichen Ausrichtung vor. Die Spiegelung muss man selbst umsetzen.
Reihenfolge: Zuerst wird gespiegelt, dann um rotation Grad im Uhrzeigersinn gedreht. Wer die Reihenfolge vertauscht, erhält bei 90° und 270° ein falsches Bild.
Frames aus anderen Frames: Wird ein VideoFrame aus einem anderen VideoFrame erzeugt, verrechnet die Spezifikation flip und rotation mit den Werten der Quelle. Zweimal Spiegeln hebt sich also auf. Prüfe das Ergebnis immer über die Eigenschaft.
Ausgabe beim Zeichnen: Ob drawImage() oder createImageBitmap() die Ausrichtung automatisch anwenden, kann je nach Implementierung verschieden sein. Teste das im Zielbrowser, damit nicht doppelt gespiegelt wird.
Kompatibilität: flip und rotation sind neue Teile von WebCodecs und bisher nicht überall verfügbar. Prüfe die Unterstützung zum Beispiel mit 'flip' in VideoFrame.prototype. Außerdem ist WebCodecs nur in sicheren Kontexten (HTTPS) verfügbar.
Nach close() sollte der Frame nicht mehr benutzt werden. Gib Frames immer frei, sonst läuft der Speicher voll.

Siehe auch

SpeechGrammar.weight VideoFrame.format VideoFrame.duration VideoFrame.rotation VideoFrame.colorSpace