2

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.

Rubén
  • 693
  • 6
  • 18
Timothy R. Butler
  • 479
  • 3
  • 10
  • 26
  • Welcome to [webapp.se]. What web application are you intending to use to record the web page as a video transparency? – Rubén Dec 30 '20 at 00:06
  • @Rubén I think I was more looking for a way to record a web app than a web app to record a web app. Was I incorrect in thinking this was germane since the target of recording was a web app? I'm trying to find the app to use to record -- I'm not sure it is even possible. I just have a web app I want to record. – Timothy R. Butler Dec 30 '20 at 05:17
  • Someone provided me with information on how to actually record the web app in question's output with an alpha channel. If you are willing to reopen the question, I could answer it in case someone else wanted to know, too. – Timothy R. Butler Jan 02 '21 at 17:19
  • @TimothyR.Butler Could you explain in the comment how to do this ? – xurei Jul 28 '21 at 14:54

1 Answers1

0

I'm having a hard time wrapping my head around all of this but... The browser source in OBS makes it so you can edit the page's CSS. If you can find the element you want to make transparent, you can do that, and it'll understand it.

Good Samaritan
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 09 '21 at 11:39