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.:
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.
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?
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.
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.
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.
I’ll look in detail at your documentation later today but a quick scan through indicates the huge amount of work you’ve done on this and I for one really appreciate it!!
I presume the answer is yes, but just to check, this system allows full use of transparency (opacity:0;)?
This means I can now add a message on my Shotcut/HTML tutorials to point them to this new method, or give viewers the option of reverting to SC 20.06 for the future.
Hi @Elusien, I did find a few minutes to try this out and I got it working. Just having a few issues with centering the video at 1920x1080 but I’m going to try tweaking my code a little later. Will report back.
Until then, a question: since you have to add
class="animate-this"
to animated elements, what do I do if the HTML has already got elements marked with a class? I guess change them to “id=” and replace the css full-stops to hashes?
The answer to this is to use “display: flex” on the <body> element. See the example I have on the webpage:
display : flex; /* Use 'flex' to centre on the screen */
flex-direction : row;
justify-content : center; /* Centre text vertically inside the logo */
align-items : center; /* Centre text horizontally inside the logo */
In CSS classes are like adjectives, you can have several classes applying to a single element (like “tall”, “thin”, “green”, “round-edges”, “animate-this”) and each class can be applied to more than one element.
IDs are like names. Each element must have a unique ID so it can be referenced separately from everything else.
Hi @elusien! Excellent way of looking at it. Thanks!
Ok, I’m having trouble getting it to play in OBS. I centred the video by nesting it inside a 1920x1080 box (fullscreen box) and setting height and width to 100%.
My animation works fine in Chrome. But I followed the instructions in OBS and it doesn’t seem to work.
HTML file is here: JonRay OBS test 01.zip (5.1 KB)
My video is here is you’d like to download it:
Lots of food for thought here…
