Skip to content

Instantly share code, notes, and snippets.

@vmx
Last active May 22, 2021 16:37
Show Gist options
  • Save vmx/143d296158a4099a59f16fcbeeaa02d5 to your computer and use it in GitHub Desktop.
Save vmx/143d296158a4099a59f16fcbeeaa02d5 to your computer and use it in GitHub Desktop.
Setup for the live-streaming at FOSSGIS 2021

Setup for the live-streaming at FOSSGIS 2021

The FOSSGIS 2021 is using OBS for the live-streaming. The speakers are in a Jitsi room, they either present live or a pre-recorded video is played. The speakers will be available for a Q&A Session after the talk. A moderator will introduce the talk and also run the Q&A Session.

The person working in OBS will have the following setup:

OBS

In OBS we will use the video capture feature to stream the moderator and speaker individually. This means that there will be one dedicated Chromium window for each of them. You will join the Jitsi room with as many windows as there are people that will be speaking.

Chromium

Chromium works better than Firefox for Jitsi. As several extensions are installed, and we want an as clean as possible environment, it is recommended to create a dedicated profile for the conference.

Start your Chromium with a specific user data directioty, e.g.:

chromium --user-data-dir=${HOME}/.config/chromium_fossgis 

When you install extensions, they are hidden behind the extension icon (a puzzle piece). For quicker access you can pin them by clicking on that icon and then the pin icon next to the extension.

Bookmarklets

OBS identifies windows by their title. The windows you run Jitsi in will have the same title, in order to distinguish them, I've created Bookmarklets, download the fossgis_bookmarklets.html file below.

To import them, open the Chromium menu, go to "Bookmarks -> Import bookmarks and settings…". Then select from the dropdown menu "Bookmars HTML File" and click on "Choose File" and select the just downloaded fossgis_bookmarklets.html. They should now be imported, confirm the dialog window by clicking "Done".

In the "bookmarks bar" should now be an item called "Imported" which contains those bookmarklets. You can now use them to change the window title of the current window.

For faster access you can also drag and drop them from the "Imported" folder directly into the toolbar.

Please note that changing the window title only works when you have a single tab open within that window. When you have multiple tabs open, the title won't change.

Mute Tab Extension

For every speaker and the moderator we have a dedicated maximized Jitsi window. As every window would produce sound, you need to be able to mute all tabs except for one. Chromium only supports muting a whole site (in our case Jitsi) and not individual tabs. Hence, you need to install the Mute Tab Extension. As there is always only a single moderator, you might use that window as "source of truth" for the audio, and mute everyone else.

Stylus Extension

As we want to have a clean picture of the moderator and the speakers, without any toolbars or notifications from Jitsi, we apply some custom styling. Note that when you enable that custom styles, you won't be enable to interact with Jitsi. So first pin the speaker (by clicking on the speaker) and then enable the Stylus styling.

Install the Stylus Extension and download the fossgis-jitsi.json from below. Now click on the Stylus icon and click on "Manage". It opens a new tab, there is a "Backup" section on the left side. Click on the "Import" button there and select the fossgis-jitsi.css file. You should get a popup saying "Finished importing styles" that you can confirm with clicking on the "Close" button.

When you now got to https://meet.fossgis.de/ you should see a small "1" at the bottom of the Stylus icon. This means that the style gets applied. When you now join a meeting you won't see any controls. Click on the Stylus icon and remove the checkbox from the "FOSSGIS Jitsi" entry at the top. Now you should see the controls as usual.

So once you've pinned the moderator/speakers (by clicking on them) you can enable the "FOSSGIS Jitsi" style again, so you won't record any controls.

[
{
"enabled": true,
"updateUrl": null,
"url": null,
"installDate": 1620215087502,
"name": "FOSSGIS Jitsi",
"sections": [
{
"code": "/* Hide controls. The ones that show up on hover */\n.subject.visible {\n top: -120px;\n}\n.new-toolbox.visible .toolbox-background {\n bottom: -160px;\n}\n.new-toolbox.visible {\n bottom: calc((40px * 2) * -1) !important;\n}\n\n\n/* Hide notifications */\n.atlaskit-portal-container {\n display: none !important;\n}\n\n/* From https://pastebin.com/NC14ALZH */\n#videospace > div.filmstrip,\n.large-video-labels,\n.watermark {\n display: none;\n}",
"urlPrefixes": [
"https://meet.fossgis.de/"
]
}
],
"updateDate": 1620216793253,
"_id": "25ac98f5-ac4d-4432-be41-a80c9c2d8376",
"_rev": 1620216793253,
"id": 1
}
]
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
It will be read and overwritten.
DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Moderator'%7D)()">Moderator</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 1'%7D)()">Speaker 1</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 2'%7D)()">Speaker 2</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 3'%7D)()">Speaker 3</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 4'%7D)()">Speaker 4</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 5'%7D)()">Speaker 5</A>
<DT><A HREF="javascript:(function()%7Bdocument.title%3D'Speaker 6'%7D)()">Speaker 6</A>
</DL><p>
@MaZderMind
Copy link

<DT><A HREF="javascript:(function()%7B interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE = false %7D)()">Disable Auto-Pinning</A>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment