Alpha-Transparenz in Chrome-Video

Sam Dutton
François Beaufort
François Beaufort
GitHub

Alphatransparenz in Chrome-Videos

Chrome 31 unterstützt jetzt die Alphatransparenz von Videos in WebM.

Mit anderen Worten: Chrome berücksichtigt den Alphakanal bei der Wiedergabe von „Green-Screen“-Videos, die mit einem Alphakanal im WebM-Format (VP8 und VP9) codiert wurden. Das bedeutet, dass Sie Videos mit transparentem Hintergrund über Webseiten, Bilder oder sogar andere Videos legen können.

Eine Demo finden Sie unter simpl.info/videoalpha. Etwas surreal und an den Rändern etwas rau, aber Sie verstehen sicher, was ich meine.

Alphavideos erstellen

Bei der von uns beschriebenen Methode werden die Open-Source-Tools Blender und ffmpeg verwendet:

  1. Filme dein Motiv vor einem einfarbigen Hintergrund, z. B. einem hellgrünen Vorhang.
  2. Verarbeiten Sie das Video, um ein Array von PNG-Standbildern mit Transparenzdaten zu erstellen.
  3. Codieren Sie das Video in ein Videoformat (in diesem Fall WebM).

Es gibt auch proprietäre Tools, mit denen sich dieselbe Aufgabe erledigen lässt, z. B. Adobe After Effects, das für Sie möglicherweise einfacher zu bedienen ist.

1. Greenscreen-Video erstellen

Zuerst müssen Sie Ihr Motiv so filmen, dass alles im Hintergrund durch die anschließende Bearbeitung „entfernt“ (transparent gemacht) werden kann.

Am einfachsten ist es, vor einem einfarbigen Hintergrund zu filmen, z. B. vor einem Bildschirm oder Vorhang. Am häufigsten werden grüne oder blaue Farben verwendet, da sie sich von Hauttönen unterscheiden.

Im Internet gibt es viele Anleitungen zum Filmen mit Greenscreen (auch bekannt als Chroma-Key) und viele Orte, an denen du Greenscreen- und Bluescreen-Hintergründe kaufen kannst. Alternativ können Sie einen Hintergrund mit Chroma-Key-Farbe malen.

The Great Gatsby VFX reel zeigt, wie viel mit Greenscreen erreicht werden kann.

Tipps zum Filmen:

  • Achten Sie darauf, dass das Motiv keine Kleidung oder Objekte hat, die die gleiche Farbe wie der Hintergrund haben, da diese sonst im endgültigen Video als „Löcher“ angezeigt werden. Auch kleine Logos oder Schmuck können problematisch sein.
  • Verwenden Sie eine gleichmäßige Beleuchtung und vermeiden Sie Schatten. Ziel ist es, dass der Hintergrund, der später transparent gemacht werden muss, möglichst wenige Farben aufweist.
  • Durch die Verwendung mehrerer diffuser Lichtquellen lassen sich Schatten und Abweichungen bei der Hintergrundfarbe vermeiden.
  • Vermeiden Sie glänzende Hintergründe: Matte Oberflächen streuen das Licht besser.

2. Alpha-Rohvideo aus Greenscreen-Video erstellen

In den folgenden Schritten wird eine Möglichkeit beschrieben, ein Alpha-Rohvideo aus Green-Screen-Videos zu erstellen:

  1. Nachdem Sie ein Green-Screen-Video aufgenommen haben, können Sie es mit einem Open-Source-Tool wie Blender in eine Reihe von PNG-Dateien mit Alphadaten konvertieren. Mit der Chroma-Key-Funktion von Blender können Sie den Greenscreen entfernen und transparent machen. PNG ist nicht zwingend erforderlich. Es kann jedes Format verwendet werden, das Alphakanaldaten beibehält.

  2. Konvertieren Sie das Array von PNG-Dateien mit einem Open-Source-Tool wie ffmpeg in ein YUVA-Rohvideo:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    Alternativ können Sie die Dateien direkt in WebM codieren. Verwenden Sie dazu einen ffmpeg-Befehl wie diesen:

    ffmpeg -i image%04d.png output.webm

Wenn Sie Audio hinzufügen möchten, können Sie ffmpeg verwenden, um es mit einem Befehl wie diesem zu muxen:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. Alpha-Video in WebM codieren

Rohvideos mit Alphakanal können auf zwei Arten in WebM codiert werden.

  1. Mit ffmpeg: Wir haben ffmpeg um die Unterstützung für die Codierung von WebM-Alphavideos erweitert.

    Verwenden Sie ffmpeg mit einem Eingabevideo, das Alphadaten enthält, legen Sie das Ausgabeformat auf WebM fest und die Codierung erfolgt automatisch im richtigen Format gemäß Spezifikation. Hinweis: Derzeit müssen Sie darauf achten, dass Sie die neueste Version von ffmpeg aus dem Git-Baum verwenden, damit dies funktioniert.

    Beispielbefehl:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Mit webm-tools:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools ist eine Reihe einfacher Open-Source-Tools für WebM, die von den Autoren des WebM-Projekts verwaltet werden. Dazu gehört auch ein Tool zum Erstellen von WebM-Videos mit Alphatransparenz.

    Führen Sie das Binärprogramm mit --help aus, um die Liste der von alpha_encoder unterstützten Optionen aufzurufen.

4. Wiedergabe in Chrome

Wenn Sie die codierte WebM-Datei in Chrome abspielen möchten, legen Sie die Datei einfach als Quelle eines Videoelements fest.

Wie haben sie das geschafft?

Wir haben mit dem Google-Entwickler Vignesh Venkatasubramanian über seine Arbeit an dem Projekt gesprochen. Er fasste die wichtigsten Herausforderungen zusammen:

  • Der VP8-Bitstream unterstützte keinen Alphakanal. Wir mussten also Alpha einbauen, ohne den VP8-Bitstream und bestehende Player zu beschädigen.
  • Der Renderer von Chrome konnte Videos mit Alpha nicht rendern.
  • Chrome hat mehrere Rendering-Pfade für verschiedene Hardware-/GPU-Geräte. Jeder Rendering-Pfad musste geändert werden, um das Rendern von Alpha-Videos zu unterstützen.

Wir können uns viele interessante Anwendungsfälle für die Alpha-Transparenz von Videos vorstellen: Spiele, interaktive Videos, gemeinsames Storytelling (fügen Sie Ihr eigenes Video zu einem Hintergrundvideo oder ‑bild hinzu), Videos mit alternativen Charakteren oder Handlungen, Web-Apps, die Overlay-Videokomponenten verwenden.

Viel Spaß beim Filmemachen! Lassen Sie uns wissen, wenn Sie etwas Tolles mit Alphatransparenz erstellen.

Hilfreiche Ressourcen