Resources
There are several tools that mix video and overlays to create a great live stream. Streaming production software like OBS, vMix and Wirecast use alpha channels to render and combine overlays with your video sources. However, some live streaming workflows include devices like the Blackmagic ATEM Mini that can’t support key and fill inputs. Here’s a quick guide on how to generate uno overlays with a chroma key background for your unique streaming workflow.
Key and fill signals are output signals that can be combined to create high-quality, smoothly animated video graphics with perfect transparency. Fill carries the content of the graphic, such as the colors and shapes.
Meanwhile, the key signal defines the parts of the graphic that are visible or transparent – also known as the alpha portion of video graphics. The key signal is usually visualized in greyscale, with white representing full opacity and black for full transparency.
However, some video mixing tools can’t handle a separate input key for transparency, and have to rely on chroma keying to add overlays.
Beyond being used for green screens, chroma keying is a powerful production tool that allows the arrangement of visual elements from different sources on the same image.
While using key and fill signals is like painting a shape on paper, chroma keying is like cutting the whole shape out. By removing a solid color (like a green background) and making it transparent, chroma keying lets you add an overlay over your video feed.
A video keyer can add a custom background, your live streamer, and overlays.
There are a number of video switchers that are popular for live streaming because they’re compact, portable and affordable, however don’t support key and fill inputs. For example:
While these video keyers are very useful for smaller production environments and lessen the CPU load on your computer, they also come with the usual limitations of chroma keying.
There are a few basic issues that are common with every chroma key tool. If an overlay contains the same color as the key color (so for example, if you use a green background and the overlay also contains the same shade of green), those parts of the graphics will be removed.
Complex graphics are harder for chroma keying devices to manage.
Many of uno’s overlays use fade animation, shading, and gradients to create smooth transitions and add visual appeal. These look best with varying levels of transparency carried in the alpha channel. Meanwhile, video switchers that rely on chroma key backgrounds can’t reproduce the same transparency effects. Chrome keying is binary, which means that pixels are either on or off.
With chroma keying, overlays might suddenly appear or disappear at the end of an animation. Gradients can flicker and edges can look choppy. You might also see what looks like a ‘glitter’ effect around the border of an overlay.
You can work around this issue by adjusting the intensity of background color, or by tweaking the chroma key settings – for example, by adjusting the tolerance for color similarity. However, this can result in color bleeding, where some of the key color remains visible on your overlay. Some overlays allow you to turn off gloss effects which could help. Or, choose overlays with clear borders that don't use fade animation, for example our Pyrite-themed Lower Third.
If you’re using a chroma keyer in your workflow, you can generate any uno overlay into stream graphics with a chroma key background color. Simply take the following steps:
1. Copy the Output URL from the overlay interface. You can either press the Copy Output URL button, or copy the address directly from your browser.
You should end up with a URL similar this one: https://app.overlays.uno/output/738dPgmSqdOXqTBtla79UV
2. Define the desired background color at the end of the Output URL. There are two ways to option the background query string:
https://app.overlays.uno/output/738dPgmSqdOXqTBtla79UV?bgcolor=green
https://app.overlays.uno/output/738dPgmSqdOXqTBtla79UV?bgcolor=rgb(0,255,0)
3. Copy the edited Output URL with the background query string, and paste it into your browser. This will render the overlay with a greenscreen background.
Tip: If you’re using a PC, you can hit F11 to switch the browser tab to full screen.
4. Connect your laptop or computer’s HDMI output to the device that will do the chroma keying (for example, your ATEM Mini’s HDMI input).
With those simple steps, you should be ready to go! You can also find more details in the manuals provided by your device, like this detailed guide for the ATEM Mini. And, you can always get more advice on the official uno Discord and find out what other streamers are doing.
