WebCodecs VideoFrame Plane: Ein tiefer Einblick in den Zugriff auf Videobilddaten

WebCodecs stellt einen Paradigmenwechsel in der webbasierten Medienverarbeitung dar. Es bietet Low-Level-Zugriff auf die Bausteine von Medien und ermöglicht es Entwicklern, anspruchsvolle Anwendungen direkt im Browser zu erstellen. Eines der leistungsstärksten Merkmale von WebCodecs ist das VideoFrame-Objekt und darin die VideoFrame-Planes, die die rohen Pixeldaten von Videobildern zugänglich machen. Dieser Artikel bietet eine umfassende Anleitung zum Verständnis und zur Nutzung von VideoFrame-Planes für die fortgeschrittene Videobearbeitung.

Das VideoFrame-Objekt verstehen

Bevor wir uns mit den Planes befassen, lassen Sie uns das VideoFrame-Objekt selbst rekapitulieren. Ein VideoFrame repräsentiert ein einzelnes Bild eines Videos. Es kapselt die dekodierten (oder kodierten) Videodaten zusammen mit zugehörigen Metadaten wie Zeitstempel, Dauer und Formatinformationen. Die VideoFrame-API bietet Methoden für:

• Lesen von Pixeldaten: Hier kommen die Planes ins Spiel.
• Kopieren von Frames: Erstellen neuer VideoFrame-Objekte aus bestehenden.
• Schließen von Frames: Freigeben der zugrunde liegenden Ressourcen, die vom Frame gehalten werden.

Das VideoFrame-Objekt wird während des Dekodierungsprozesses erstellt, typischerweise durch einen VideoDecoder, oder manuell, wenn ein benutzerdefinierter Frame erstellt wird.

Was sind VideoFrame-Planes?

Die Pixeldaten eines VideoFrame sind oft in mehrere Ebenen (Planes) organisiert, insbesondere in Formaten wie YUV. Jede Ebene repräsentiert eine andere Komponente des Bildes. Zum Beispiel gibt es in einem YUV420-Format drei Ebenen:

• Y (Luma): Repräsentiert die Helligkeit (Luminanz) des Bildes. Diese Ebene enthält die Graustufeninformationen.
• U (Cb): Repräsentiert die Blau-Differenz-Chromakomponente.
• V (Cr): Repräsentiert die Rot-Differenz-Chromakomponente.

RGB-Formate, obwohl scheinbar einfacher, können in einigen Fällen ebenfalls mehrere Ebenen verwenden. Die Anzahl der Ebenen und ihre Bedeutung hängen vollständig vom VideoPixelFormat des VideoFrame ab.

Der Vorteil der Verwendung von Ebenen besteht darin, dass sie einen effizienten Zugriff und eine effiziente Bearbeitung bestimmter Farbkomponenten ermöglichen. Zum Beispiel möchten Sie vielleicht nur die Luminanz (Y-Ebene) anpassen, ohne die Farbe (U- und V-Ebenen) zu beeinflussen.

Zugriff auf VideoFrame-Planes: Die API

Die VideoFrame-API bietet die folgenden Methoden, um auf die Daten der Ebenen zuzugreifen:

• copyTo(destination, options): Kopiert den Inhalt des VideoFrame an ein Ziel, das ein anderes VideoFrame, ein CanvasImageBitmap oder eine ArrayBufferView sein kann. Das options-Objekt steuert, welche Ebenen wie kopiert werden. Dies ist der primäre Mechanismus für den Zugriff auf die Ebenen.

Das options-Objekt in der copyTo-Methode ermöglicht es Ihnen, das Layout und das Ziel für die Videobilddaten anzugeben. Wichtige Eigenschaften sind:

• format: Das gewünschte Pixelformat der kopierten Daten. Dies kann dasselbe sein wie das ursprüngliche VideoFrame oder ein anderes Format (z. B. Konvertierung von YUV zu RGB).
• codedWidth und codedHeight: Die Breite und Höhe des Videobildes in Pixeln.
• layout: Ein Array von Objekten, das die Anordnung jeder Ebene im Speicher beschreibt. Jedes Objekt im Array gibt an:
• offset: Der Versatz in Bytes vom Anfang des Datenpuffers bis zum Beginn der Daten der Ebene.
• stride: Die Anzahl der Bytes zwischen dem Beginn jeder Zeile in der Ebene. Dies ist entscheidend für den Umgang mit Padding.

Schauen wir uns ein Beispiel an, bei dem ein YUV420-VideoFrame in einen rohen Puffer kopiert wird:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 has 3 planes: Y, U, and V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Important to release resources
}

Erklärung:

• Wir berechnen die Größe jeder Ebene basierend auf width und height. Y hat die volle Auflösung, während U und V unterabgetastet sind (4:2:0).
• Das layout-Array definiert die Speicheranordnung. Der offset gibt an, wo jede Ebene im Puffer beginnt, und der stride gibt die Anzahl der Bytes an, die übersprungen werden müssen, um zur nächsten Zeile in dieser Ebene zu gelangen.
• Die format-Option ist auf 'I420' gesetzt, was ein gängiges YUV420-Format ist.
• Entscheidend ist, dass nach dem Kopieren videoFrame.close() aufgerufen wird, um Ressourcen freizugeben.

Pixelformate: Eine Welt der Möglichkeiten

Das Verständnis von Pixelformaten ist für die Arbeit mit VideoFrame-Planes unerlässlich. Das VideoPixelFormat definiert, wie die Farbinformationen innerhalb des Videobildes kodiert sind. Hier sind einige gängige Pixelformate, denen Sie begegnen könnten:

• I420 (YUV420p): Ein planares YUV-Format, bei dem die Y-, U- und V-Komponenten in separaten Ebenen gespeichert sind. U und V sind sowohl in horizontaler als auch in vertikaler Richtung um den Faktor 2 unterabgetastet. Es ist ein sehr verbreitetes und effizientes Format.
• NV12 (YUV420sp): Ein semi-planares YUV-Format, bei dem Y in einer Ebene gespeichert ist und die U- und V-Komponenten in einer zweiten Ebene verschachtelt (interleaved) sind.
• RGBA: Rot-, Grün-, Blau- und Alpha-Komponenten werden in einer einzigen Ebene gespeichert, typischerweise mit 8 Bit pro Komponente (32 Bit pro Pixel). Die Reihenfolge der Komponenten kann variieren (z. B. BGRA).
• RGB565: Rot-, Grün- und Blau-Komponenten werden in einer einzigen Ebene mit 5 Bit für Rot, 6 Bit für Grün und 5 Bit für Blau gespeichert (16 Bit pro Pixel).
• GRAYSCALE: Repräsentiert Graustufenbilder mit einem einzigen Luma- (Helligkeits-) Wert für jedes Pixel.

Die Eigenschaft VideoFrame.format gibt Ihnen das Pixelformat eines bestimmten Frames an. Überprüfen Sie diese Eigenschaft unbedingt, bevor Sie versuchen, auf die Ebenen zuzugreifen. Eine vollständige Liste der unterstützten Formate finden Sie in der WebCodecs-Spezifikation.

Praktische Anwendungsfälle

Der Zugriff auf VideoFrame-Planes eröffnet eine breite Palette von Möglichkeiten für die fortgeschrittene Videoverarbeitung im Browser. Hier sind einige Beispiele:

1. Echtzeit-Videoeffekte

Sie können Echtzeit-Videoeffekte anwenden, indem Sie die Pixeldaten im VideoFrame manipulieren. Zum Beispiel könnten Sie einen Graustufenfilter implementieren, indem Sie die R-, G- und B-Komponenten jedes Pixels in einem RGBA-Frame mitteln und dann alle drei Komponenten auf diesen Durchschnittswert setzen. Sie könnten auch einen Sepia-Ton-Effekt erstellen oder Helligkeit und Kontrast anpassen.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. Computer-Vision-Anwendungen

VideoFrame-Planes bieten direkten Zugriff auf die Pixeldaten, die für Computer-Vision-Aufgaben benötigt werden. Sie können diese Daten verwenden, um Algorithmen für Objekterkennung, Gesichtserkennung, Bewegungsverfolgung und mehr zu implementieren. Sie können WebAssembly für leistungskritische Abschnitte Ihres Codes nutzen.

Zum Beispiel könnten Sie einen farbigen VideoFrame in Graustufen umwandeln und dann einen Kantenerkennungsalgorithmus (z. B. Sobel-Operator) anwenden, um Kanten im Bild zu identifizieren. Dies könnte als Vorverarbeitungsschritt für die Objekterkennung verwendet werden.

3. Videobearbeitung und Compositing

Sie können VideoFrame-Planes verwenden, um Videobearbeitungsfunktionen wie Zuschneiden, Skalieren, Drehen und Compositing zu implementieren. Durch die direkte Bearbeitung der Pixeldaten können Sie benutzerdefinierte Übergänge und Effekte erstellen.

Zum Beispiel könnten Sie einen VideoFrame zuschneiden, indem Sie nur einen Teil der Pixeldaten in einen neuen VideoFrame kopieren. Sie würden die layout-Offsets und -Strides entsprechend anpassen.

4. Benutzerdefinierte Codecs und Transkodierung

Obwohl WebCodecs integrierte Unterstützung für gängige Codecs wie AV1, VP9 und H.264 bietet, können Sie es auch verwenden, um benutzerdefinierte Codecs oder Transkodierungs-Pipelines zu implementieren. Sie müssten den Kodierungs- und Dekodierungsprozess selbst handhaben, aber VideoFrame-Planes ermöglichen Ihnen den Zugriff auf und die Bearbeitung der rohen Pixeldaten. Dies könnte für Nischen-Videoformate oder spezielle Kodierungsanforderungen nützlich sein.

5. Fortgeschrittene Analytik

Durch den Zugriff auf die zugrunde liegenden Pixeldaten können Sie eine tiefgehende Analyse von Videoinhalten durchführen. Dazu gehören Aufgaben wie die Messung der durchschnittlichen Helligkeit einer Szene, die Identifizierung dominanter Farben oder die Erkennung von Änderungen im Szeneninhalt. Dies kann fortgeschrittene Videoanalyseanwendungen für Sicherheit, Überwachung oder Inhaltsanalyse ermöglichen.

Arbeiten mit Canvas und WebGL

Obwohl Sie die Pixeldaten in VideoFrame-Planes direkt bearbeiten können, müssen Sie das Ergebnis oft auf dem Bildschirm rendern. Die CanvasImageBitmap-Schnittstelle bietet eine Brücke zwischen VideoFrame und dem <canvas>-Element. Sie können ein CanvasImageBitmap aus einem VideoFrame erstellen und es dann mit der drawImage()-Methode auf den Canvas zeichnen.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

Für fortgeschritteneres Rendering können Sie WebGL verwenden. Sie können die Pixeldaten von VideoFrame-Planes in WebGL-Texturen hochladen und dann Shader verwenden, um Effekte und Transformationen anzuwenden. Dies ermöglicht es Ihnen, die GPU für eine leistungsstarke Videoverarbeitung zu nutzen.

Leistungsüberlegungen

Die Arbeit mit rohen Pixeldaten kann rechenintensiv sein, daher ist es entscheidend, die Leistungsoptimierung zu berücksichtigen. Hier sind einige Tipps:

• Kopien minimieren: Vermeiden Sie unnötiges Kopieren von Pixeldaten. Versuchen Sie, Operationen nach Möglichkeit direkt (in-place) durchzuführen.
• WebAssembly verwenden: Für leistungskritische Abschnitte Ihres Codes sollten Sie die Verwendung von WebAssembly in Betracht ziehen. WebAssembly kann eine nahezu native Leistung für rechenintensive Aufgaben bieten.
• Speicherlayout optimieren: Wählen Sie das richtige Pixelformat und Speicherlayout für Ihre Anwendung. Erwägen Sie die Verwendung von gepackten Formaten (z. B. RGBA), wenn Sie nicht häufig auf einzelne Farbkomponenten zugreifen müssen.
• OffscreenCanvas verwenden: Verwenden Sie für die Hintergrundverarbeitung OffscreenCanvas, um den Hauptthread nicht zu blockieren.
• Ihren Code profilieren: Verwenden Sie die Entwicklertools des Browsers, um Ihren Code zu profilieren und Leistungsengpässe zu identifizieren.

Browserkompatibilität

WebCodecs und die VideoFrame-API werden in den meisten modernen Browsern unterstützt, einschließlich Chrome, Firefox und Safari. Der Grad der Unterstützung kann jedoch je nach Browserversion und Betriebssystem variieren. Überprüfen Sie die neuesten Browser-Kompatibilitätstabellen auf Websites wie MDN Web Docs, um sicherzustellen, dass die von Ihnen verwendeten Funktionen in Ihren Zielbrowsern unterstützt werden. Für die browserübergreifende Kompatibilität wird die Funktionserkennung (Feature Detection) empfohlen.

Häufige Fallstricke und Fehlerbehebung

Hier sind einige häufige Fallstricke, die Sie bei der Arbeit mit VideoFrame-Planes vermeiden sollten:

• Falsches Layout: Stellen Sie sicher, dass das layout-Array die Speicheranordnung der Pixeldaten korrekt beschreibt. Falsche Offsets oder Strides können zu beschädigten Bildern führen.
• Nicht übereinstimmende Pixelformate: Stellen Sie sicher, dass das Pixelformat, das Sie in der copyTo-Methode angeben, mit dem tatsächlichen Format des VideoFrame übereinstimmt.
• Speicherlecks: Schließen Sie VideoFrame- und CanvasImageBitmap-Objekte immer, wenn Sie damit fertig sind, um die zugrunde liegenden Ressourcen freizugeben. Andernfalls kann es zu Speicherlecks kommen.
• Asynchrone Operationen: Denken Sie daran, dass copyTo eine asynchrone Operation ist. Verwenden Sie await, um sicherzustellen, dass die Kopieroperation abgeschlossen ist, bevor Sie auf die Pixeldaten zugreifen.
• Sicherheitseinschränkungen: Seien Sie sich der Sicherheitseinschränkungen bewusst, die beim Zugriff auf Pixeldaten von Videos mit fremdem Ursprung (cross-origin) gelten können.

Beispiel: YUV- zu RGB-Konvertierung

Betrachten wir ein komplexeres Beispiel: die Konvertierung eines YUV420-VideoFrame in einen RGB-VideoFrame. Dies beinhaltet das Lesen der Y-, U- und V-Ebenen, deren Konvertierung in RGB-Werte und das anschließende Erstellen eines neuen RGB-VideoFrame.

Diese Konvertierung kann mit der folgenden Formel implementiert werden:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Hier ist der Code:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

Dieses Beispiel demonstriert die Leistungsfähigkeit und Komplexität der Arbeit mit VideoFrame-Planes. Es erfordert ein gutes Verständnis von Pixelformaten, Speicherlayout und Farbraumkonvertierungen.

Fazit

Die VideoFrame-Plane-API in WebCodecs eröffnet eine neue Ebene der Kontrolle über die Videoverarbeitung im Browser. Indem Sie verstehen, wie Sie direkt auf Pixeldaten zugreifen und diese bearbeiten, können Sie fortschrittliche Anwendungen für Echtzeit-Videoeffekte, Computer Vision, Videobearbeitung und mehr erstellen. Obwohl die Arbeit mit VideoFrame-Planes eine Herausforderung sein kann, sind die potenziellen Vorteile erheblich. Da sich WebCodecs weiterentwickelt, wird es zweifellos zu einem unverzichtbaren Werkzeug für Webentwickler, die mit Medien arbeiten.

Wir ermutigen Sie, mit der VideoFrame-Plane-API zu experimentieren und ihre Möglichkeiten zu erkunden. Durch das Verständnis der zugrunde liegenden Prinzipien und die Anwendung bewährter Praktiken können Sie innovative und leistungsstarke Videoanwendungen erstellen, die die Grenzen des Möglichen im Browser verschieben.

Weiterführende Informationen

• MDN Web Docs zu WebCodecs
• WebCodecs-Spezifikation
• WebCodecs Beispielcode-Repositories auf GitHub.