[draɪʃtat]

let’s do this!

Creating a transparent webm video

What are we talking about?

I came across this topic when I needed a video without background for using it in XSplit and Open Broadcaster Software Studio (OBS). I needed that for lower thirds, but follower or subscription alerts are a good usage as well.

This blog entry is about how to create a webm file with transparency that can be used in OBS or XSplit. It will work in most browsers as well.

There are two different methods:

The tools

This tutorial expects you to just have a single piece of software installed on your computer:

If you have trouble installing that, post in the comments, stating your operating system.

The console

Almost all commands you’ll see in the rest of the tutorial have to be entered on the command line, in the location of your source files.

If you are not familiar with the command line/terminal of your operating system - good luck.

The source

For the second technique shown in this post you need individual frames as images with a transparent background. In my case this was an animation made in Adobe After Effects which was exported as a series of PNG images with alpha transparency.

But there is another, maybe more common source in the streamer community: Youtube greenscreen videos.

So I will go all the length and first provide an example of how to create a transparent webm with sound from a greesncreen youtube video first, then show you how to do the same for a series of already transparent png images.

Convert greenscreen to transparent webm

Let’s say we want to create a follower alert using this youtube video:

(In case this get’s taken down some time in the future: It’s a greenscreen video with sound)

Downloading

First we need to download the video. For this you can use a program like youtube-dl or an online service like onlinevideoconverter. Whatever floats your boat. Just make sure to save the video in a seperate folder, things will probably get a bit messy.

Converting

If you know how, converting is simple:

ffmpeg \
  -i input.mp4 \
  -b:v 1M \ # video bitrate
  -vf chromakey=0x00FF00:0.2:0.2 \ # greenscreen color
  -c:v libvpx \ # video codec
  -pix_fmt yuva420p \
  -metadata:s:v:0 alpha_mode="1" \
  -auto-alt-ref 0 \
  output.webm

Breakdown

The magic of this command is the -vf chromakey=0x00FF00:0.2:0.2 part.

  • 0x00FF00 is the hex color of the color you want to be transparent. In the case of the demo, this is a clear green.

In case your green isn’t pure, use ffmpeg -i input.mp4 -r 1/1 $filename_%03d.png to extract some frames and then use gimp or an online service to get the right color for your images.
The two values after the color are similarity and blend. As you dan see in the documentation, these two values determine how many shades of green are transparent in the end. Play around with it.

  • -c:v libvpx Is another important part of the command. It means ffmpeg will use libvpx 8, which is the only one understood by XSplit/OBS.

The rest.. well, look into the docs or just use it and be happy. Not knowing things tends to keep people happy anyway.

Result

Convert a series of images to transparent webm

If your lovely graphics designer generated a series of png images with alpha transparency, stuff is easy as well.

Assumption: - The individual frames are named image_00000.png, image_00001.png and so forth.

Converting

ffmpeg \
  -start_number 00000 \
  -i image_%05d.png \
  -c:v libvpx \
  -pix_fmt yuva420p \
  -metadata:s:v:0 \
  alpha_mode="1" \
  -auto-alt-ref 0 \
  output.webm

Breakdown

The only thing here that might confuse you is -i image_%05d.png - This just says “use all images as input that start with ‘image_’ followed by 5 digits (filled with zeros on the right) and ending in png’“.

So if your images are named follower_alert_frame_001.png, follower_alert_frame_002.png and so forth, the command would be:

ffmpeg \
  -start_number 001 \
  -i follower_alert_frame_%03d.png \
  -c:v libvpx \
  -pix_fmt yuva420p \
  -metadata:s:v:0 \
  alpha_mode="1" \
  -auto-alt-ref 0 \
  output.webm

Adding sound

To keep things simple, we use a second step to add audio. Let’s say you have a file alertsound.mp3, you would add it using this command:

ffmpeg \
  -i output.mp4 \ # first input, the video
  -i alertsound.mp3 \ # the sound
  -c copy \ # don't re-encode
  -map 0:v:0 \ # map video
  -map 1:a:0 \ # map audio
  output_with_sound.mp4

Tada. Thank’s for reading! :-)

Comments powered by Talkyard.