Lower Third

Include a text overlay in your video stream. See lower third on Wikipedia.

Screenshot of 'lower third' hack in action

Photo on the right video tile by Zachary Kadolph on Unsplash

Installation

Drag the following link into your browser’s bookmark bar: Lower Third

To inject the script click the link in the bookmark bar while the Jitsi Meet tab is active. The effects only last until the next page reload.

Usage

Once the hack is loaded a new ‘L’ button will be visible in the toolbar.

'L' button in Jitsi's toolbar

Press that button to activate the functionality.

Dialog to enter the text for the lower third

In the dialog that appears enter the text to be displayed and press “Enable”. If your video is currently active it will now display the entered text at the bottom. If not, the text will show the next time you turn on the camera. Press the ‘L’ button again to disable the lower third.

Mirrored video

In many Jitsi installations the local video is mirrored by default. In that case the text displayed to you will be mirrored as well. You can change how the video is displayed to you by right-clicking your video tile and selecting “Flip”.

Limitations

  • The lower third feature can’t be used together with Jitsi’s “Blur my background” feature. That’s because both are using Jitsi Meet’s built-in ‘effect’ mechanism (see “How does it work?” below). And there can only be one effect active at a time.
  • For the same reason this feature doesn’t work when sharing the screen and overlaying the camera video on top of the screen.

How does it work?

lib-jitsi-meet has an API that allows adding an ‘effect’ to the video stream. The “blur my background” feature for example is implemented as an effect. See JitsiStreamBlurEffect.js.

When enabling an effect the startEffect() function gets the current MediaStream as input and needs to return a MediaStream instance as output. This hack uses the same approach as the “blur my background” implementation. The original video is drawn onto a <canvas> and then the lower third is drawn on top. The contents of this canvas are captured as a video stream and that is what is returned by our startEffect() function.

Source Code

Find lower-third.js on GitHub.