There are several “use cases” for WebVfx in Shotcut. Some of which can be replaced using keyframes instead e.g. simple scrolling credits, both vertical and horizontal. Other effects cannot easily be replaced by keyframes, such as complex text animation, image (de)fragmentation, explosion/implosion and filters that manipulate the video frames, like “persistence”, “sniperscope” and other WebGL operations such as transitions and so on.
For me there are two main options to work around the fact that WebVfx is being discontinued in the not too distant future:
- Keep an old version of Shotcut that does support WebVfx e.g. version 2006;
- Use OBS
Both of these solutions can run HTML/CSS/Javascript, so which is the better option?
OBS includes a modern version of the Chromium browser. As such it supports all the modern CSS animation features. It also plays all CSS animations (as-is) and synchronises them with the frames being recorded. Whereas Shotcut’s WebVfx runs an old version of QtWebkit that does not support the more modern CSS animations, nor does it synchronise CSS animations with the frames being recorded. So with OBS you could find a nice animation on the web (say on codepen.io) copy it to a local HTML file and use it as a “Browser Source”, running it without change in OBS. It is possible to record it and when you play the recording it will be (in most cases) identical to running the HTML in a normal Google Chrome browser. With Webvfx you have to convert the CSS animation to run as Javascript (e.g. using my CSS animation conversion generator), since this is the only way to synchronise the animation with the frames being recorded. So a definite win for OBS on this score.
Shotcut can save videos with transparency (alpha-channel), OBS cannot. Why does this matter? Well if you find a nice CSS animation that you want to overlay on top of a video and you want it to “float” on top of it, with the WebVfx solution you’d run it through my CSS animation generator (assuming it wasn’t using any of the non-supported CSS features), run it in Shotcut-with-WebVfx and record it in an alpha-channel format video that you could then use as a clip in the latest Shotcut (that didn’t have WebVfx). With the OBS solution you’d have to run the animation as-is over a coloured background that you could then Chroma-key out in the Shotcut-without-WebVfx. This is only OK for OBS if the opacity in the clip was either full (1.0) or totally empty (0.0), if there is a range of opacities this would only work with Shotcut-with-WebVfx. So a definite win for Shotcut-with-WebVfx on this score.
OBS can run multiple sources concurrently, so you would think that you could run the video clip as the “lower” source with the (semi-)transparent CSS animation as the “upper” source. While this can be done, synchronising the CSS animation to start playing at exactly the right instance is next to impossible since the two sources are completely independent of each other (unlike tracks in Shotcut’s timeline). EDIT - I am looking at another feature “scenes” that may make this possible. Watch this space.
There are quite a few WebVfx filters that have been written that manipulate video data and it would be quite difficult, though not impossible, to move these over to OBS. Another win for Shotcut-with-WebVfx.
Looking at these and other issues my strategy for moving forward once WebVfx is discontinued will be:
- For CSS animations that do not use transparency, or use only opacity=0.0 (where Chroma-key can be utilised) I will use OBS to record the animation and import it as a clip into Shotcut. I will also probably use this method for animations based on Javascript code, again because of the automatic synchronisation with frames recorded.
- For all other CSS animation and HTML:Text (Overlay HTML) filters I will continue to do these using Shotcut version 2006, recording them in alpha-channel video format if necessary, and import it as a clip into Shotcut
There are still a few issues with recording “browser sources” in OBS, the main one being timing. To start the animation you press a button and to start recording you press another button. Obviously you cannot press them simultaneously so you need start recording before you start the animation and then you need a way of finding exactly which frame is the one at animation time=0.0. It isn’t rocket science though and I’m putting together something to make this easier to do.