I would like to record the HTML output with the alpha channel preserved so that the resulting video has a transparent background, that way I can use the web app's output as an overlay in post-production tools such as Final Cut Pro or Adobe Premier.
I'm using Singular.live to provide on-screen graphics in OBS Studio. Singular.live is a web app that provides a very user friendly tool to create and output HTML 5 animation layers to overlay on video in programs such as OBS Studio. (It is similar to Apple Motion or Adobe AfterEffects except it is a web app.) In OBS Studio, the web widget (which is based on Chrome), can have a transparent background so that the Singular.live HTML output is displayed as a video overlay with no background.
A problem: Is there a good way to record a web app's animation as video with a transparent background rather than defaulting to white?
OBS can record it, but it has to add a background. Likewise using a screen recorder such as QuickTime to record the animation playing directly in Chrome or Safari. The somewhat obvious solution of using a chroma key doesn't work well in this case since some transparency is involved in the overlays and thus the chroma key's color influences the overlays even after applying a filter to remove it.
I'd imagine someone has wanted to record HTML animation as video for product demos or other such uses, so I keep thinking I have to be missing an obvious way to get the output out of the browser, but have not found such a method yet.
