Alpha-Transparenz in Chrome-Video

Dutton
Beaufort
François Beaufort
GitHub

Alpha-Transparenz in Chrome-Video

Chrome 31 unterstützt jetzt die Alpha-Transparenz von Videos in WebM.

Mit anderen Worten: Chrome berücksichtigt bei der Wiedergabe von Greenscreen-Videos, die in WebM (VP8 und VP9) mit einem Alphakanal codiert sind, den Alphakanal. Das bedeutet, dass du Videos mit transparentem Hintergrund abspielen kannst: über Webseiten, Bilder oder sogar über andere Videos.

Unter simpl.info/videoalpha finden Sie eine Demo. Eher surreal und im wahrsten Sinne des Wortes ein bisschen krass, aber du hast schon eine Idee!

So erstellst du Alpha-Videos

Bei der hier beschriebenen Methode kommen die Open-Source-Tools Blender und ffmpeg zum Einsatz:

  1. Filmen Sie das Motiv vor einem einfarbigen Hintergrund, z. B. vor einem leuchtend grünen Vorhang.
  2. Verarbeiten Sie das Video, um ein Array von Standbildern im PNG-Format mit Transparenzdaten zu erstellen.
  3. In ein Videoformat codieren (in diesem Fall WebM).

Dafür gibt es auch proprietäre Tools wie Adobe After Effects, die möglicherweise einfacher sind.

1. Greenscreen-Video erstellen

Zuerst musst du das Motiv so filmen, dass alles im Hintergrund durch die nachfolgende Verarbeitung "entfernt" (transparent) werden kann.

Am einfachsten ist dies, wenn Sie vor einem einfarbigen Hintergrund filmen, z. B. vor einem Bildschirm oder Vorhang. Grün oder Blau sind die Farben, die am häufigsten verwendet werden, vor allem aufgrund ihres Unterschieds zu Hauttönen.

Es gibt mehrere Anleitungen online zum Filmen von Greenscreen-Videos (auch als Chroma Key bezeichnet) und vielen Anbietern, um Green- und Bluescreen-Hintergründe zu kaufen. Alternativ können Sie den Hintergrund mit Chroma-Key-Farbe streichen.

Die VFX-Videocollage von Great Gatsby zeigt, wie viel man mit Greenscreen erreichen kann.

Einige Tipps zum Filmen:

  • Achten Sie darauf, dass sich keine Kleidung oder Objekte befindet, die dieselbe Farbe wie der Hintergrund haben, da sie ansonsten im Video als „Löcher“ erscheinen. Selbst kleine Logos oder Schmuck können problematisch sein.
  • Verwende eine gleichmäßige, gleichmäßige Beleuchtung und vermeide Schatten: Ziel ist es, im Hintergrund einen möglichst kleinen Farbbereich zu verwenden, der anschließend transparent gemacht werden muss.
  • Durch die Verwendung mehrerer gestreifter Lichter werden Schatten und Abweichungen der Hintergrundfarbe vermieden.
  • Vermeide glänzende Hintergründe: Bei matten Oberflächen ist das Licht besser diffus.

2. Alpha-Rohvideo aus Greenscreen-Video erstellen

In den folgenden Schritten wird eine Möglichkeit zum Erstellen eines Alpha-Rohvideos aus Greenscreen-Videos beschrieben:

  1. Nachdem Sie ein Greenscreen-Video aufgenommen haben, können Sie ein Open-Source-Tool wie Blender verwenden, um das Video in ein Array von PNG-Dateien mit Alphadaten zu konvertieren. Mit der Farbschlüsselung von Blender entfernen Sie den Greenscreen und machen ihn transparent. PNG ist nicht obligatorisch. Alle Formate, die Alphakanaldaten erhalten, sind zulässig.

  2. Konvertieren Sie das Array der 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 mit einem ffmpeg-Befehl wie dem folgenden direkt in WebM codieren:

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

Wenn Sie Audioinhalte hinzufügen möchten, können Sie diese mit ffmpeg mit einem Befehl wie dem folgenden mux mux hinzufügen:

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

3. Alpha-Video in WebM codieren

Alpha-Rohvideos können auf zwei Arten in WebM codiert werden.

  1. Mit ffmpeg: Wir haben die Unterstützung für ffmpeg hinzugefügt, um WebM-Alphavideos zu codieren.

    Verwenden Sie ffmpeg mit einem Eingabevideo, das Alphadaten enthält, und setzen Sie das Ausgabeformat auf WebM. Die Codierung erfolgt automatisch im richtigen Format gemäß der Spezifikation. (Hinweis: Sie müssen derzeit die neueste ffmpeg-Version aus dem Git-Baum herunterladen, damit dies funktioniert.)

    Beispielbefehl:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Webm-Tools verwenden:

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

    webm-tools ist eine Reihe einfacher Open-Source-Tools im Zusammenhang mit WebM, die von den Autoren des WebM-Projekts verwaltet werden, einschließlich eines Tools zur Erstellung von WebM-Videos mit Alpha-Transparenz.

    Führen Sie die Binärdatei mit --help aus, um eine Liste der von alpha_encoder unterstützten Optionen zu sehen.

4. Wiedergabe in Chrome

Zur Wiedergabe der codierten WebM-Datei in Chrome legen Sie die Datei einfach als Quelle eines Videoelements fest.

Wie haben sie das gemacht?

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

  • Der VP8-Bitstream hatte keine Unterstützung für den Alphakanal. Wir mussten also Alpha integrieren, ohne den VP8-Bitstream zu unterbrechen und vorhandene Spieler zu unterbrechen.
  • Der Renderer von Chrome konnte keine Videos mit Alphaversion rendern.
  • Chrome bietet mehrere Rendering-Pfade für verschiedene Hardware-/GPU-Geräte. Jeder Renderingpfad musste geändert werden, um das Rendern von Alphavideos zu unterstützen.

Wir können uns viele interessante Anwendungsfälle für die Alphatransparenz von Videos einfallen lassen: Spiele, interaktive Videos, gemeinsames Storytelling (eigenes Video zu einem Hintergrundvideo oder -bild hinzufügen), Videos mit alternativen Charakteren oder Handlungen, Web-Apps, die Overlay-Videokomponenten verwenden.

Viel Spaß beim Filmen! Teilen Sie uns mit, wenn Sie mit Alphatransparenz tolle Inhalte erstellen.

Hilfreiche Ressourcen