What to do if/when WebVfx disappears

This is direct from the Qt website news:

Support of Qt 5.9 LTS ends in May 2020. If you are still with Qt 5.9 LTS, update to the soon released Qt 5.15 LTS or Qt 5.12 LTS is recommended. If you can’t update, extended support is available for an additional fee after the standard support ends.

Version 5.9 is what MLT-Shotcut currently uses and which is needed for WebVfx. Later versions of Qt do not support Qt-Webkit upon which WebVfx depends.

If/when Dan updates MLT-Shotcut to a supported version of Qt it will not be possible to migrate WebVfx, so it will have to be abandoned. I could be wrong about this and if @shotcut were to correct me I would be more than happy.

I have been looking at a couple of workarounds for when (if?) this happens, the first of which is obvious:

  1. Keep a copy of the most recent version of Shotcut that supports WebVfx to handle those existing projects that use the Text:HTML filter, since an upgrade of Qt will break them.

  2. Run the HTML-CSS-Javascript animations in a modern browser, record the screen and input the resulting video clip into Shotcut.

I have been experimenting with SHAREX (https://getsharex.com/) which does screen recording. Unfortunately it only runs on Windows systems, but there are other screen recorders that run on Linux and \MacOs.

I created a reasonably heavy CSS animation (a spinning translucent coloured cube with writing on each side). I then started the animation and used sharex to record the screen. It did a reasonable job recording at 30fps, but there was definitely some jerkiness where it struggled to keep up at that frame rate.

So what I did was I increased the duration of the animation by a factor of 3 (10 secs -> 30 secs) and I also reduced the framerate in Sharex by a factor of 3 from 30fps to 10fps. I then recorded the screen and input the resulting MP4 file into Shotcut and increased its speed by a factor of 3 and ended up with a much smoother 10 second clip than I did originally.

Recording a browser window is ugly, however Google Chrome, Microsoft Edge and Firefox have a feature whereby you can make the window full-screen (function key F11). No tabs or other browser “real estate” is visible. Sharex has the ability to record a full-screen.

While this technique cannot be used to replace those WebVfx Text:HTML filters that process data stored in the video being edited in shotcut (such as the “sniper-scope” and “persistence” filters and the “gl-transitions”, it is quite a good compromise for Text:HTML filters that are independent of the video data, such as video credits, titles, text-manipulation (e.g. exploding text, typewriter-text, text-flow etc). In fact, in some ways it is better since you can now use all of the modern CSS3 animation techniques (including perspective and 3D) that are not supported by WebVfx, Text:HTML or Text:Simple.

I include below two such video clips that were relatively easy to program in HTML and CSS without any Javascript required. It is not possible to create these using WebVfx. The first one is the Cube and the second one is called “The Writing on the Wall”.

Does anyone have any other suggestions?

1 Like

For me, the demise of the text:HTML filter and Webvx capabilities would be a big blow.
Designing HTML text effects using @elusien’s framework has been something I have been doing for 3 years now and personally, the day this feature goes would be a sad day indeed. Shotcut will have lost a great feature!!

I have to be pragmatic though and I understand that @shotcut might have to upgrade to the new version of Qt. I will have to get over it (if it does happen)! Maybe there will be new things that the new upgrade of Qt will bring? (I have no experience of what upgrading Qt actually means or the benefits it will give to SC, forgive me).

@elusien, I’m sorry that it’s likely SC will lose your cool features including:
Filters (Persistence, Sniperscope, Jitter, JR transition (!), Vertigo)
HTML animation converter,
36 GL transitions,
Stopwatch,
Slideshow,
Explosion,
Fragment,
Typewriter text,
Textflow …

@elusien - thanks for this post - workaround information is very helpful. (I notice that @kinuris also mentioned these two workarounds in a previous post a few days ago which I didn’t get round to replying to).

The technique of taking a screen capture by changing the duration of the animation and reducing the framerate in ShareX then increasing clip speed in SC is ingenious! (Although complicated).

The drawback with taking a screen capture of an HTML animation though as I see it is that if you make text animation featuring fade-ins or fade-outs (ie opacity changes in the HTML) you won’t be able to overlay it over a video Shotcut because the background colour of the screen capture will show through as it fades.

One final question: If the Webfx does disappear from Shotcut (say from version 20.06), would it be possible to create a Webvfx animation in 20.04, save as a MLT, then select “Import MLT as clip” in 20.06 - would this work? I suspect not but I’m hoping it might…

That’s really sad to hear.
I personally use WebFx exclusively for the “Text: HTML” filter.
As far as I understand @shotcut, he tries to use a different “rich text” architecture:


(…I am looking to add another rich text technology from Qt that is still supported, and it has very good visual editor support. It is much more limited than HTML5/CSS/JavaScript/WebGL/Canvas but satisfies a lot of basic textual needs.)

For example ‘OBS-Studio’.
https://obsproject.com/download
The best and popular screen-, window-, game- and streaming/recordingtool. :smiley:

I am looking into possible ways of doing something with the filters. I need a few days to look into it more closely.

HTML animations can be done offline and imported into Shotcut as video clips. I am experimenting with this at the moment and can see that we can get much more complex animations in clips for Shotcut (like the spinning cube and “the Writing on the Wall”.

The main problem is Opacity. Total transparency (opacity: 0) could be handled using the Chroma Key filter, but levels of opacity cannot, so far as I can see. However, like I intimated with the filters, there may be a way. It would involve exporting the clip out of Shotcut to which you want to apply the HTML or other WebVfx effect, and use this as the background for the HTML effect. This is do-able. Again I am experimenting with this.

So far as I know (and again I could be corrected on this) the answer is “No”. the MLT would be asking to use WebVfx and that wouldn’t be available.

I’ve been experimenting with this since last night and getting some really good results without having to resort to resort to speeding up and slowing down, as I did with Sharex, by feeding the HTML directly into OBS as a “source”.

As I said, I hope within a few days to have done some more experimenting and come up with a way, if not to fully replace WebVfx, at lease to alleviate the hassle that its removal would cause.

Here is the plan:

  • the next version 20.06 will not upgrade Qt and still include WebVfx
  • the next version will mark the following filters as deprecated in the filter chooser:
    • Text: HTML
    • Rutt-Etra-Izer
    • Swirl
    • Text: 3D
  • after the next version, I will work on replacements for the following HTML-based filters
    • Choppy
    • Crop: Circle
    • Crop: Rectangle
    • in addition, I will add a Text: Rich filter with a template system similar to Text: HTML
  • by the end of the year, Qt will be upgraded to 5.12 and WebVfx and 32-bit Windows dropped

I recommend people use open source 2D animation tools: Krita, Synfig, Pencil, OpenToonz, and the new enve. Of course, there is also Blender.

2 Likes

Will support for preview scaling be factored into the replacement for the Choppy filter?

@shotcut - Thank you for the clarity of the planned changes.

Good to have upfront updates what’s coming … although not mention, I presume “corner pin” filter and all those masking filters remain available. Very useful for sophisticated transitioning … in many anime …

Good to know SC leader encourage use of Blender for animation which will be my key complementary tool with SC which I plan to continue using. Blender is good for “animation” for many cool “after effect” … In case some of you maybe new to Blender like me, can take a quick look on many of the nice/cool effects I have learnt as a “newbie” . 20+ effects so far and increasing !

I have notes on them and intent to make tutorial as many in the Youtube tutorial are using old version of Blender or the tutorial is really hard to follow … anyway will see if I need to make tutorial depending on popular demand. The version I use now is Blender 2.82.

https://www.youtube.com/channel/UCwOSrEW-tqV4bhs3YAzBxTw/

Hi there

This whole code is beyond me, but maybe it can be useful to reach the goal

and

http://techslides.com/html5-canvas-animation-converted-to-video

I’ve read too about using a headless browser like PhantomJS to capture HTML5 animations…

I think both of the links use the chroma-key method, but I’m not sure enough to dismiss them.

I looked into PhantomJS a week or so ago. But development was frozen over 2 years ago as it was based on (wait for it) QtWebkit - the same as WebVfx, that is no longer supported.

1 Like

I learnt how to expand Shotcut’s capabilities by using WebVfx (expecially from @jonray’s tutorials), so this news is quite the disappointment :slightly_frowning_face:.
There are suggestions how to replace some of the functionality, which is reassuring. Since the upgrade will be towards the end of this year, I am hopeful there will be enough options to get around this loss.

1 Like

Ups! I read about headless chrome here https://developers.google.com/web/updates/2017/04/headless-chrome but I don’t know if it could be useful.

EDIT: Anyway I use OBS for screen recording (tutorials and games), so I’ll feel fine using it for HTML sourcing.

I don’t think Headless Chrome, Chrome Devtools Protocol, Puppeteer and so on are a good match for a replacement of WebVfx in MLT. Chromium Embedded Framework (CEF) looks closer to being something that could have been used but I guess Dan has already looked into that and found it impossible to implement, or unsuitable.

It looks as if animation inside Shotcut will have to be the kind that relies on Keyframes. If you want something more complex then you will have to go outside Shotcut like the set of apps Dan listed above. I will probably stick with HTML/CSS/Javascript as I find it relatively simple to generate decent animations using this system. How to get them into Shotcut for compositing is the question though.

I will probably go down the OBS (Open Broadcaster Software) route, which is arguably the best way to record HTML animations. It has a feature called “Browsr Source”, which allows you to perform all sorts of custom layout, text, image, video, and even audio tasks (anything that you can program in HTML/CSS/Javascript to run in a normal browser - within reason, of course), can be added directly into OBS. It uses CEF and can have as its source either a local file or a remote URL.

e.g. If I have a clip in Shotcut that previously would have needed a Text:HTML filter that used opacity variations I would:

  • export the clip from Shotcut (lossless, or virtually losslless);
  • import it on the lower track in OBS.;
  • run the HTML a a local browser source on the upper track;
  • export the composite video from OBS (again [virtually] lossless) and import it into Shotcut to replace the original clip - et voila!

This procedure should also work for clips to which the sniperscope, persistence and gl-transition filters are to be applied. Once I have some spare time I’ll do some more experimenting

3 Likes

@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! :smiley:

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.

1 Like