First in a series of very terse posts explaining and documenting the technical setup behind our remote video conferencing FOSSGIS-Jeopardy game setup. Mostly meant as public backup and because sharing is caring. Maybe it can inspire someone else to build silly stupid stuff for fun.

Here we are with the buzzer for the candidates to hit if they want to solve a task (aka ask the question to the presented thing). I wrote this for a funny digital xmas party with the lovely colleagues at Civity in 2020 and re-used it for FOSSGIS-Jeopardy 2021 and 2022.

It’s using WAMP (basically PubSub via websockets) between webbrowser pages via the awesome Crossbar + AutobahnJS combo which I first used for the crazy https://findingplaces.hamburg/ project.

A admin page can be used to unlock a buzzer “button” (well, a parrot GIF in our case because we need more silly fun in life) on participants’ buzzer pages. Participants can then touch/click their screen to “buzz”. The incoming buzzes are displayed visible for everyone with the delay since the buzzer was unlocked.

This is obviously highly dependent on the participants’ latency, both on their device (touch/click to network message) as well as from their device to the message router. A tab on a desktop browser in LAN will win against a mobile device in 2G if they’d hit it in the same moment. ¯\_(ツ)_/¯

There are two/three components: The message router, the webpages and optionally a webserver (I used crossbar as router which can also host static webpages)

Ask me anything if you want to set this up following the amazing instructions and fail.

Install and setup crossbar

pip install crossbar

https://crossbar.io/docs/TLS-Certificates/#using-lets-encrypt-with-crossbar-io & https://certbot.eff.org/instructions?ws=other&os=ubuntufocal

Set up a realm and static web directory in a config.json, e. g. something like this:

{
	"version": 2,
	"controller": {},
	"workers": [{

		"type": "router",
		"realms": [{
			"name": "YOURREALMHERE",
			"roles": [{
				"name": "public",
				"permissions": [{
					"uri": "com.example.your(sub)domainhere.*",
					"allow": {
						"call": false,
						"register": false,
						"publish": true,
						"subscribe": true
					}
				}]
			}]
		}],
		"transports": [{
			"type": "web",
			"endpoint": {
				"type": "tcp",
				"port": 443,
				"tls": {
					YOURTLSSETUPHERE
				}
			},
			"paths": {
				"/": {
					"type": "static",
					"directory": "web"
				},
				"ws": {
					"type": "websocket",
					"auth": {
						"anonymous": {
							"type": "static",
							"role": "public"
						}
					},
					"options": {
					        "max_frame_size": 20480,
					        "max_message_size": 20480,
					        "fail_by_drop": true
					}
				}
			}
		}]
	}]
}

I don’t remember anything about the options part. It might not be necessary. I probably tried to stuff something more complex into the messages at some point.

Then just run crossbar as root because you used a single-purpose 2€ VPS for this and you will delete it after the event anyways. Yolo! You should definitely secure your system, crossbar config and certificate and everything else properly otherwise. Seriously!

crossbar start --config /root/config.json

Webpages for control and playing

Here you go:

This is really really horrible and messy code, with lots of left-over bits, bugs and random snippets. But it works so who cares! I could not care less about its bEAuTy. Sometimes a banana is the right hammer.

• Screen stays on (support depends on the OS)!
• Fullscreen mode can be triggered with a button!
• There is a sound when the buzzer is buzzed by anyone!
• Animations are CSS transforms on PNG sprites!
• Random emojis are displayed if a user did not set a username!
• Inconsistent indentation!
• Probably some german words here and there!
• w3schools was extensively used to create this!

Put them in a web/ directory according to the crossbar config (or host it with another webserver if you like).

Using the buzzer

Now you have three webpages available:

• https://www.example.com/supersecretfilename.html has a Start/Stop button to start a run and displays the buzzes coming in (name and time since start)
• https://www.example.com/view.html has a white background for displaying the names and timings in OBS (masking away the white color for transparency)
• https://www.example.com/?name=MyName is the buzzer page/”app” for the candidates, they can touch/click anywhere while the run is active to register their buzz. It is meant to be used on a mobile phone.