@elusien, I can’t thank you enough for looking into all the alternative options. That technique using OBS sounds promising and quite ingenious! Thanks for the detailed instructions.
And I presume in the future users will be able to revert to the last version of SC with Webvfx capabilities to create HTML effects, and export segments of videos where necessary. It’s good to have a plan of the proposed changes.
Yes, OBS is a free powerful tool and I use it for years! 
I resorted to using OBS with its own internal browser as a source. The beautiful thing is that can specify the display size when recording. (so, you could do 4k on an hd display). Obviously, you would need to make sure that your computer can render it without being choppy, but that is an issue not limited to OBS.
I was surprised how well it worked.
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:
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:
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.
Fantastic detailed information, @elusien. Much appreciated. 
Will comment further when I get some time. J
My plan is to install v20.06 on my PC and name it Shotcut_with_WebVfx. Then whenever I want to use WebVfx features I’ll use this one. Of course this will probably have to be at the end of processing, since the MLT file from this will not be compatible with Shotcut versions going forward.
I will export the clip I want to apply the filter to, modify it using Shtotcut_with_WebVfx, export it and import it as a clip into the latest version of Shotcut.
See here for how to install multiple versions of Shotcut:
This is my conclusion too. Maybe we can export a clip with an alpha channel with our animation or effect. One thing I’m going to miss a lot is the transitions. I really like the crossfade, crosszoom, ans so.
I’ve already tried using OBS to do a CSS logo animation and it works quite well. Unfortunately OBS cannot export a video with alpha-channel and the animation had a transparent background.
So I gave it a single colour background (#00fe00), exported it virtually lossless, imported it as a clip in Shotcut and used Chroma Key. However I had to have quite a color-distance to get it to work and that made some of the green in my logo to become transparent.
I sorted the problem by exporting in OBS using lossless (not virtually lossless) that way I could narrow the color-distance. The file produced had the following characteristics:
General
Complete name : C:\Users\elusi\Videos\2020-06-06 16-33-12.avi
Format : AVI
Format/Info : Audio Video Interleave
File size : 240 MiB
Duration : 20 s 387 ms
Overall bit rate : 98.6 Mb/s
Writing application : Lavf58.29.100
Video
ID : 0
Format : YUV
Codec ID : ULY0
Codec ID/Info : Ut Video Lossless Codec
Codec ID/Hint : Ut Video
Duration : 20 s 367 ms
Bit rate : 97.3 Mb/s
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate : 30.000 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Compression mode : Lossless
Bits/(Pixel*Frame) : 1.564
Stream size : 236 MiB (99%)
I tried both Chroma Advanced and Chroma Simple. Below are the two results (advanced, then simple). The tolerance levels were the lowest I could go without getting a colour-cast on the video. I am going to experiment a bit more to see if I can do better.
Of course, there’s the AppImage solution (for Linux anyway). Is there any reason that can’t continue to work for future Shotcut versions? All the Qt modules are self-contained in the one file.
BTW, thanks for providing the AppImage solution. It’s a wonderfully clean way to run such a powerful program without a full install. Nice…
Hi @elusien, thanks for this investigation. I was wondering if a green background was the best option in your case since there is green in the image. Maybe choose a contrasting colour which isn’t in the design, although the design in your example is multicoloured so that may be difficult. Just a thought.
Another thought of mine is to do the HTML animation entirely in Chrome but adding the video as a background using the code
source src=“video.mp4” type=“video/mp4”
… as in this Youtube tutorial video I just came across:
https://www.youtube.com/watch?v=05ZHUuQVvJM
… but then you’d have to take a screen capture of the result, then import into SC, which really would be the same thing as exporting from SC 20.06 in the first place… ??
Chroma Key isn’t perfect. Even with high values of color-distance there is still a small amount of green tinge around the logo.
Yes a totslly differnt colour would be better, except that I have a rainbow gradient in the logo, which contains many colours.
Running it in a straightforward Chrome Browser is in my opinion not as good as running as a “browser source” in OBS (which in effect has its own version of Chrome embedded in it - actually Chromium, which is the basis of Google Chrome and Microsoft Edge) The problem with running in a straightforward browser is two-fold:
First you have to find a screen recorder that records the browser window at high resolution and in a lossless (or near-lossless) format. Don’t forget the speedup/slowdown I had to do with Sharex. OBS already does this.
Secondly, I don’t know of any screen recorders that save an alpha-channel video, so you still have the problem with chroma key.
I too thought of have the background being an HTML <video> element with the transparent clip above it. You end up with a synchronisation problem between the video and the animation. It is not insurmountable, but not so straightforward either. Again having the video as one OBS source and the animation as the other is probably a better way to go - again synchronisation needs to be sorted out.
Using the HTML <canvas> with frames taken from an HTML <video> source was one of the options I thought about for porting the filters over to OBS, since this was how I developed “sniperscope” and “persistence” etc. in the first place using Google Chrome, but it is much easier to use Shotcut_with_WebVfx where they already work and where the user interface has been designed.
Thanks for these observations @elusien… Very interesting. So using SC 12.06 (or the latest one that includes WebVfx) or the OBS solution would be the way to go. Makes me think though how special and unique the HTML/Webvfx thing was in Shotcut. I’ve often wondered if SC was the only video software available in the whole wide world (including commercial ones) which allowed you to overlay HTML animations over video? Or am I way off here? Real shame to lose that in SC. I understand why, but it’s still a pity, I think.
I’ve not come across any other video editor that has the possibility to overlay an HTML webpage over the video clip being edited. Shotcut would indeed seem to be the only one. OBS can of course do it, but it isn’t really a video editor, it is a video/stream recorder and streaming program.
OBS is very good for recording “browser sources”. In fact in someways it is superior to Shotcut in that it can handle modern HTML5/CSS3 animations that are beyond the capabilities of WebVfx and you can even interact with the webpage e.g. clicking on buttons on the page, creating hover effects, filling in forms, typing other input (a perfect way of producing a typewriter effect" since it is you that is doing the typing, not some CSS animation), while all the time recording the interaction.
The transparent overlay feature works well, apart from synchronisation, which I am still trying to get a foolproof solution for. See below for an example. This was recorded directly in OBS, Shotcut was not used at all.:
Hi @elusien, just reading your reply, but the video doesn’t play for me… could you add the direct link below it? Thanks!
Thanks, I see it now. Excellent! Lots of food for thought here…
Hi @Elusien
I don’t know JS, but I coded time ago in old languages. I’ve been searching the canvas capture with alpha channel, and get to an old bug report for chromium, regarding this.
Here https://bugs.chromium.org/p/chromium/issues/detail?id=690968
And looking in the code of the demo of the fix, I thought you could do something interesting with it. It seems that they are capturing a canvas with alpha channel and recording it in webm format. What do you think?
https://cdn.rawgit.com/uysalere/js-demos/master/canvascapture_alpharecording.html
This is an added feature that could be used for various effects and one I was looking at to port some of my filters to the browser. I developed them using the Chrome Browser, WebGL, javascript and the <canvas> HTML element.
I only learned about the ability to record the <canvas> element with transparency a week or so ago. However this can’t be used for CSS animations. These are totally separate from the images displayed in the <canvas> element. So recording this element will not capture the CSS animation.
There are quite a few javascript frameworks (libraries) that you can use to program animation in the <canvas> element and produce some interesting effects, but so far as I can see, it won’t help with CSS animations.
I was thinking all that you see was in a canvas element (fail) Indeed I have found a Chrome addon to save canvas, and I was ready to try it now.
Thank you. Invaluable knowledge.
For an idea of what can be achieved using canvas frameworks, see here:
I am still investigating ways to run a CSS animation with variable transparency over a single video clip using javascript to synchronise the two and OBS as the recording application. There have been recent developments in javascript to control CSS animation and first i need to see if they are available in the Chromium Embedded Framework (CEF) that is part of OBS. If they are then it would make the synchronisation that much easier.
SUCCESS
I believe I now have a good way of recording CSS animations on Shotcut video clips after the demise of WebVfx by using OBS Studio (obsproject.com).
The main issue has been to synchronise the animation with the video clip. I now have a mechanism for doing this by inserting the video clip as an HTML5 <video> element in the HTML beneath the elements that are being animated and using Javascript to do the synchronisation.
I have packaged up the Javascript and put a description of the process to follow on my webpage at elusien.co.uk/shotcut. It is not a difficult process, though it may be a little “fiddly”.
As I said earlier, using OBS has some advantages over WebVfx in that almost any CSS animation can be used more or less without alteration, whereas with WebVfx it had to be converted to use the Javascript animation polyfill. Also, more modern features are now made available, like perspective and transform-style: preserve-3d, which are not supported by WebVfx.
