Using a video Media Source with transparency in OBS studio

I’ve had a frustrating time getting transparent video exported from Procreate working as a Media Source in OBS Studio. Solved now.

This is James / experimenting

I want to use Procreate to make titles for my videos. Then I can create the titles in the morning on my train journey, and I can have hand-drawn titles. Procreate has a nice feature where you can record a time-lapse of your drawing, so I can use that to have the titles write on the screen.

Upon experimenting with this I have found that the Media Source layer in OBS Studio is a bit fussy about formats and alpha channels. The video exported from Procreate is in MP4 format with alpha channel, but in order to get the alpha channel to work in OBS studio I first needed to convert the video to Apple ProRes with transparency by right-clicking on the file and selecting Services>Encode Selected Video Files:

Select Apple ProRes and tick Preserve Transparency:

Next convert the video to webm format using the following command line:

ffmpeg -i titles.mov -c:v libvpx-vp9 -pix_fmt yuva420p titles.webm

What a lot of fuss. Was it worth it? Here’s the output:

I notice the colours look washed-out. And it seems to have cut off the very end of the animation. And I need to freeze the titles at the end. More issues to fix. Perhaps I’m overthinking this.