Alpha-Transparenz in Chrome-Video

Sam Dutton
François Beaufort
François Beaufort
GitHub

Video zur Alpha-Transparenz in Chrome

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

Anders ausgedrückt: Chrome berücksichtigt bei der Wiedergabe von Greenscreen den Alphakanal. in WebM (VP8 und VP9) codierte Videos mit ein Alphakanal ist. Das bedeutet, dass Sie Videos mit transparentem Hintergrund abspielen können, und zwar über Webseiten, Bilder oder sogar andere Videos.

Eine Demo finden Sie unter simpl.info/videoalpha: Ein wenig surreal und ein bisschen über die Ecken (buchstäblich), aber man versteht schon eine Idee!

Alphavideos erstellen

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

  1. Filmen Sie Ihr Motiv vor einem einfarbigen Hintergrund, z. B. vor einem hellen einen grünen Vorhang.
  2. Das Video verarbeiten, um ein transparentes PNG-Standbild zu erstellen Daten.
  3. Die Codierung muss in ein Videoformat erfolgen (in diesem Fall WebM).

Es gibt Auch proprietäre Tools wie Adobe After Effects unterstützen diesen Zweck. einfacher zu machen.

1. Greenscreen-Video erstellen

Zunächst musst du dein Motiv so filmen, dass alles im Hintergrund kann entfernt werden (transparent gemacht) durch nachträgliche Verarbeitung.

Am einfachsten ist es, vor einem einfarbigen Hintergrund zu filmen, wie ein Bildschirm oder einen Vorhang. Grün oder Blau werden am häufigsten verwendet, weil sie sich von verschiedenen Hauttönen unterscheiden.

Es gibt mehrere Anleitungen online zum Drehen von Greenscreen-Videos (auch bekannt als und vielen Geschäften, an denen Sie Bluescreen-Hintergründe. Alternativ können Sie einen Hintergrund mit Chroma Key Paint streichen.

The Great Gatsby VFX-Video zeigt, was mit Greenscreen alles möglich ist.

Tipps zum Filmen:

  • Achte darauf, dass die Person keine Kleidung oder Gegenstände hat, die dieselbe Farbe haben als Hintergrund verwenden, da diese andernfalls als Löcher dargestellt werden. im letzten Video sehen. Selbst kleine Logos oder Schmuckstücke können problematisch sein.
  • Verwende eine einheitliche, gleichmäßige Beleuchtung und vermeide Schatten. Ziel ist es, kleinstmöglichen Farbbereich für den Hintergrund, der anschließend müssen transparent gemacht werden.
  • Mehr diffuses Licht hilft, Schatten und Hintergrundfarben zu vermeiden. verschiedene Varianten.
  • Vermeide glänzende Hintergründe: Matte Oberflächen schärfen das Licht besser.

2. Roh-Alpha-Video aus Greenscreen-Video erstellen

Die folgenden Schritte beschreiben eine Möglichkeit, ein Roh-Alpha-Video aus Greenscreen-Videos zu erstellen:

  1. Nachdem du ein Greenscreen-Video aufgenommen hast, kannst du es mit einem Open-Source-Tool wie Blender konvertieren. in ein Array von PNG-Dateien mit Alphadaten. Mit der Farbcodierung in Blender können Sie den Greenscreen entfernen und ihn transparent machen. (Beachten Sie, dass das PNG-Format obligatorisch: Jedes Format, das Alphakanal-Daten speichert, ist zulässig.)

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

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

    Alternativ können Sie die Dateien mit einem ffmpeg-Befehl direkt in WebM codieren wie hier:

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

Wenn du Audio hinzufügen möchtest, verwende „ffmpeg“, um sie mit einem Befehl wie zu muxn: dies:

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

3. Alpha-Video in WebM codieren

Rohe Alphavideos können auf zwei Arten in WebM codiert werden.

  1. Mit ffmpeg: Wir unterstützen jetzt ffmpeg, um WebM-Alphavideos zu codieren.

    Verwenden Sie ffmpeg mit einem Eingabevideo mit Alphadaten und legen Sie das Ausgabeformat auf WebM und die Codierung erfolgt automatisch im korrekten Format gemäß die Spezifikation entspricht. (Hinweis: Sie müssen derzeit darauf achten, dass Sie die aktuelle Version von ffmpeg aus der Git-Baumstruktur herunterladen. 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 gepflegt werden, darunter ein Tool zum Erstellen 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 aufzurufen.

4. Wiedergabe in Chrome

Um die codierte WebM-Datei in Chrome wiederzugeben, legen Sie die Datei einfach als Quelle eines Videoelement.

Wie haben sie das gemacht?

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

  • Der VP8-Bitstream hatte keine Unterstützung für den Alphakanal. Also mussten wir ohne den VP8-Bitstream zu unterbrechen und bestehende .
  • Der Renderer von Chrome konnte keine Videos mit Alphaversion rendern.
  • Chrome bietet mehrere Renderingpfade für mehrere Hardware-/GPU-Geräte. Jeden musste der Rendering-Pfad geändert werden, damit er das Rendern von Alpha-Videos unterstützt.

Es gibt viele interessante Anwendungsfälle für die Alpha-Transparenz von Videos: Spiele, interaktive Videos, gemeinsames Erzählen von Geschichten (fügen Sie Ihr eigenes Video zu einem Hintergrundvideo/-bild), Videos mit alternativen Charakteren oder Diagrammen, Web-Apps die Overlay-Video-Komponenten nutzen.

Viel Spaß beim Filmemachen! Teilen Sie uns mit, wenn Sie mit Alpha-Funktionen etwas Tolles entwickeln. Transparenz.

Hilfreiche Ressourcen