Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Alpha transparency in Chrome video

Alpha transparency in Chrome video

Chrome 31 now supports video alpha transparency in WebM.

In other words, Chrome takes the alpha channel into account when playing 'green
screen' videos encoded to WebM (VP8 and VP9) with
an alpha channel. This means you can play videos with transparent backgrounds: over web pages, images or even other videos.

There's a demo at
simpl.info/videoalpha. Somewhat surreal, and a bit rough around the edges (literally) but you get the idea!

How to make alpha videos

The method we describe uses the open source tools Blender and ffmpeg:

Film your subject in front of a single color background such as a bright
green curtain.

Process the video to build an array of PNG still images with transparency
data.

Encode to a video format (in this case, WebM).

There are
also proprietary tools to do the same job, such as Adobe After
Effects, which you may find
simpler.

1. Make a green screen video

First of all, you need to film your subject in a way that everything in the
background can be 'removed' (made transparent) by subsequent processing.

The easiest way to do this is to film in front of a single color background,
such as a screen or curtain. Green or blue are the colors most often used, mostly because of their difference from skin tones.

Ensure your subject does not have clothes or objects that are the same color
as the backdrop, otherwise these will show up as 'holes' in the final video. Even small logos or jewelry can be problematic.

Use consistent, even lighting, and avoid shadows: the aim is to have the
smallest possible range of colors in the background that will subsequently
need to be made transparent.

2. Create raw alpha video from green screen video

The following steps describe one way to create a raw alpha video from green screen videos:

Once you've shot a green screen video, you can use an open source tool like Blender to convert the video
to an array of PNG files with alpha data. Use Blender's color keying to
remove the green screen and make it transparent. (Note that PNG is not
compulsory: any format that preserves alpha channel data is fine.)

Convert the array of PNG files to a raw YUVA video using an open source tool
such as ffmpeg:
ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

If you want to add audio, you can use ffmpeg to mux that in with a command like
this:

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

3. Encode alpha video to WebM

Raw alpha videos can be encoded to WebM in two ways.

With ffmpeg: we added support to ffmpeg to encode WebM alpha videos.

Use ffmpeg with an input video including alpha data, set the output format to
WebM, and encoding will automatically be done in the correct format as per
the spec. (Note: you'll currently need to make sure to get the latest
version of ffmpeg from the git tree for
this to work.)

webm-tools is a set of simple open source tools related to WebM, maintained by the WebM Project authors, including a tool for creating WebM videos with alpha transparency.

Run the binary with --help to see list of options supported by alpha_encoder.

4. Playback in Chrome

To play the encoded WebM file in Chrome, simply set the file as the source of a
video element.

How did they do it?

We talked to Google engineer Vignesh Venkatasubramanian about his work on the
project. He summarized the key challenges involved:

The VP8 bitstream had no support for alpha channel. So we had to incorporate
alpha without breaking the VP8 bitstream and without breaking existing
players.

Chrome's renderer was not capable of rendering videos with alpha.

Chrome has multiple rendering paths for multiple hardware/GPU devices. Every
rendering path had to be changed to support rendering of alpha videos.

We can think of lots of interesting use cases for video alpha transparency:
games, interactive videos, collaborative story telling (add your own video to a
background video/image), videos with alternative characters or plots, web apps
that use overlay video components...

Happy film making! Let us know if you build something amazing with alpha
transparency.