What to do if/when WebVfx disappears

Help/How To
1

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
2

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…

3

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’.

The best and popular screen-, window-, game- and streaming/recordingtool. :smiley:

4

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.

5

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
6

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

7

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

8

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/

9

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.

10

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
11

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
12

Ups! I read about headless chrome here 无头 Chrome 使用入门  |  Blog  |  Chrome for Developers 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.

13

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
14

@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.

15

Yes, OBS is a free powerful tool and I use it for years! :smiley:

16

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
17

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.

4 Likes
18

Fantastic detailed information, @elusien. Much appreciated. :+1: :+1: Will comment further when I get some time. J

19

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:

3 Likes
20

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.