Shotcut Video Filters - what are they?

Video filters are software plug-ins that enhance the fundamental capabilities of Shotcut by producing various effects, either by modifying the pixels of the frame to which they are applied (such as the "rotate" filter), or by overlaying the scene in the frame by some other image (such as the "text" filter).

Elusien's Shotcut Filters

I have developed several video filters. I have also provided several user interfaces to other filters that did not have them previously. The table below gives a brief description of these and by clicking on the relevant link you will be taken to a webpage that describes and documents the filter and that contains a ZIP file which holds the filter. You can download this ZIP file and install the filter for use in Shotcut.

Filters - click (or right-click) on the relevant Javascript symbol
FilterDescription
Jitter Produces a jittery clip by replacing a number of frames with a previous one.
Persistence Produces a pseudo-motion blur by blending the previous frame's render with the current frame.
JRtransition Produces a nice transition between video clips.
mask_simple_shape Draws some simple shapes into the alpha channel and is intended for "in" and "out" masks in keying, non-rectangular picture-in-picture, transitions, spotlight effects etc.
Sniperscope Simulates a sniper (telescopic) scope.
vertigo Simulates vertigo or dizziness on behalf of the viewer.

Creating a Filter

There are usually 3 software components to a filter:

  1. The software that produces the effect. This can be written in a variety of languages: QML, OpenGL/WebGL, HTML/CSS/Javascript, C++ etc.)
  2. The user-interface to the filter, that enables you to specify certain parameters that will modify the effect to be produced. This is usualy written using QtQuick and its QML language. This file is in general called ui.qml. The name can be different as it is specified in the metadata file
  3. The file containing metadata, called meta.qml

Creating a filter requires some knowledge of programming, but not necessarily as much as you would think. There is quite a bit of useful coding that has been made available to help with this, such as the WebVfx javascript framework I put together some time ago. Also, creating the user interface is a fairly repetetive procedure, so grabbing hold of another filter's "ui.qml" and "meta.qml" files and modifying them to suit your purpose is not that complicated.

Although I used to program in C and C++ for a living, I am more confident these days using HTML, CSS and Javascript for developing new filters. The first two languages are fairly easy to learn and developing programs in them is very easy since they are the basis for most webpages. So you simply write some HTML, style it with some CSS and feed it into a modern web browser, like Google Chrome. If you need to make modifications to the code, do so then check it out again in the browser. Now you have a static webpage (you cannot directly use CSS animations with Shotcut) that you can feed into the Overlay HTML (now renamed Text: HTML) filter.

Let's look at such a filter which puts a date onto a transparent background to overlay the frame. The code is shown below.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {margin:0; padding:0; width: 100%; height: 100%; background-color: transparent;}
            div	       {display: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; text-align: center;}
        </style>
    </head>
    <body>
Video taken: 2019-06-28
    </body>
</html>

However, strictly speaking this is not a filter, it is a webpage you feed into Shotcut's Overlay HTML (Text: HTML) filter. If you want to change the date you have to edit the HTML. To turn it into a filter proper you need to use Javascript and also create a user-interface (UI) to enable you to provide some options when using the Shotcut editor itself. Again, this is not as difficult as it sounds, as my new Shotcut CSS Animations Overlay HTML (Text: HTML) Filter Generator will take away a lot of the difficulty of interfacing with the UI. This genertor is still under development and is not yet available for use. Once it becomes available I shall extend this webpage to show the steps needed to change this simple webpage into a full-blown filter.

The filter will have two options that the user may provide:

  1. The date.
  2. The format in which the date will be displayed.