How to Export with Alpha Channel in OBS Studio

1

I have been using OBS for some time now to complement Shotcut. I do quite a few animations using HTML/CSS/Javascript and up until now I have either used an old version of Shotcut (20.07.11) to record them, or OBS.

If the animation contained transparency (an alpha channel) then v20.07.11 was the best option (though not always possible), exporting the file using “Quicktime Animation”, which preserves the alpha channel. It was possible to export a “green-screen” version using OBS but if elements above the green-screen background were semi-opaque, then they merged with the green-screen and the unwanted effect could not easilybe removed using Shotcut’s Chroma Key flters.

I did some experiments today investigating this and eventually found a way to export a “Quicktime Animation” video from OBS that preserves the alpha channel. Be aware that Quicktime Animation videos are an aweful lot bigger than the equivalent green-screen version.

So, in OBS Studio, if you want to export a video with alpha channel of a browser-source animation (e.g. for a transparent overlay in Shotcut) then in Settings you need do the following (images shown below):

In the OBS “Advanced” menu:

  • Set Color Format to RGB

In the OBS “Output Menu”:

  • Set Output Mode to Advanced
  • Click on the Recording tab
  • Set Type to Custom Output (FFmpeg)
  • Set Container Format to mov
  • Set Video Encoder to png (Default Encoder)t

Do not forget to reset these to the defaults for your normal use of OBS.

OBS_alpha_1
OBS_alpha_11233×531 25 KB

OBS_alpha_2
OBS_alpha_21226×562 31.8 KB

2 Likes
2

@Elusien
I really want to thank you for this information. In the past I made (a lot) of tests (with mov, webm) but without success. Your shared settings work form me.
I like to create intro’s with html/css/js (and js frameworks) but until now with a solid background color.

3

Using OBS for recording animations has its advantages and its drawbacks. It can run the latest HTML/CSS/Javascript animations because it uses the Chromium Embedded Framework (CEF) which in turn uses the latest W3C standards. However, if the animation is complex it can drop frames when recording.

The advantage of the old Webvfx versions of Shotcut is that they do not drop frames on export, so the animation can be as complex as you like. The disadvantage is that it is using a very old version of Webkit, which cannot handle the newer Javascript syntax and CSS animation directives and you had to provide the interface between your Javascript code and Webvfx.

4

@Elusien
I know but at the moment no issue found recording with OBS maybe because I used slow animation. The only one issue was transparency .

5

This topic was automatically closed after 90 days. New replies are no longer allowed.