A simple utility class for keying RGBA SVG files into the HDMI output for a raspberry pi.
It's used for adding live SVG graphics to video when using a hardware video switcher that supports chroma-key overlays. This is used in my other application (bugger) which is probably more useful, but if you're building an application for a Raspberry Pi that needs a simple HDMI output of a keyed SVG, this will get you started.
In generaly, you'd write an API or other class to interface with some control surface or software, and use this to command the raspberry pi of what SVG you want to output. For a scoreboard, you'd load a template, replace what you need, and pass the file in to be displayed.
I wanted a scoreboard overlay and didn't want to subscribe to some service.
It uses a Raspberry Pi 4 (or other linux computer) to load an SVG file, chroma-key the alpha channel, then display it on the output. You can then use this output display to feed into a hardware keyer such as an Atem Mini or Roland and use it for real-time streaming video overlays.
- Scoreboards or statistics
- Lower thirds
- Video / news clip overlays
- Anything else you want to overlay that can be rendered in an SVG document.
This was tested on a raspberry pi 4 running Raspbian x64 Lite. It theoretically works on other NUC or whatever as well, but hasn't been really tested.
- Flash the SD card using Raspberry Pi Imager.
- Boot, login, apt update and all the normal setup.
- Create your venv and install dependencies
python3 -mvenv venv
source venv/bin/activate
pip3 install cairosvg dispmanx numpy
- Edit /boot/firmware/config.txt to use a dispmanx compatible framebuffer
sudo sed -i 's/^dtoverlay=vc4-kms-v3d/dtoverlay=vc4-fkms-v3d/' /boot/firmware/config.txt
- reboot, source your venv again, and run the test to see it work. By default it renders a scoreboard template with a green chromakey.
source venv/bin/activate
git clone https://github.com/yatesdr/svgkeyer.git
cd svgkeyer
python3 svgkeyer.py
Usage is pretty simple. Create a class instance, and tell it an SVG file to render. The SVG should be the same size as your target display, and should be prepared separately. You can use templates of whatever type you prefer, but template substitution must be done separately as it's not included in this class.
Example usage:
from svgkeyer import svgkeyer
myoutput = svgkeyer()
myoutput.show("path/to/svg/file.svg")
This will output your SVG on the primary display in 1920x1080p resolution. If there's an alpha channel in the SVG, it will key it for greenscreen style chroma-keying.
Optionally, you can use blue screen keying (or any other color) by setting the chromakey property:
myoutput.chromakey=(255,0,0) # use a red keyer
myoutput.chromakey=(0,0,255) # use a blue keyer
myoutput.chromakey=(0,255,0) # use a green keyer
I'm currently developing a more full fledged application that uses this library as the output, it will be released soon. Watch for "bugger" in my repo at a future date if it's not already there.
Yes, it's docker compatible. You have to pass the display in per dispmanx documentation and run it rootful.
sudo docker run ... --device /dev/vchiq:/dev/vchiq