OBS

The overlay is a web page that OBS shows as a browser source. It updates live, and it can also drive OBS itself: switch scenes, start the stream, create native OBS sources for text and feeds.

Speedthon needs OBS 31 or newer.

Adding the overlay

1. On the marathon's Settings, open Outputs and copy the output's URL.
2. In OBS, add a Browser source and paste the URL.
3. Set the width and height to the output's size (1920×1080 by default).

The URL holds a secret key. Anyone with it can show your overlay, so don't paste it in chat. If it leaks, Rotate key on the output: the old URL stops working at once.

The overlay reconnects by itself after a network drop, reloads when the layout gets a new version, and reloads when Speedthon is updated.

OBS control

OBS control lets the dashboard reach OBS through the overlay, even when the operator is in another city. The overlay runs inside OBS, so it talks to OBS's local WebSocket server and passes the dashboard's commands along.

1. In OBS, open Tools → WebSocket Server Settings, enable the server and note the port and password.
2. In the output's settings, turn on OBS control with the URL (usually ws://127.0.0.1:4455) and the password.
3. Reload the browser source in OBS.

The dashboard's OBS tile then shows Connected. Turn OBS control on for one output only, usually the main follow output, or commands would run twice. The password reaches only that output's overlay page.

With OBS control the dashboard can:

• start and stop the stream and recording;
• switch OBS's scenes;
• show a still of OBS's program output;
• change OBS's audio inputs from the audio tile;
• send any obs-websocket request.

OBS sources

By default everything in the layout is HTML inside the browser source. Some sources can be native OBS sources instead:

Why bother: OBS media sources play RTMP and SRT, which a browser can't, and they let you use OBS filters on a feed. Text sources render with fonts installed on the streaming machine.

Turn it on per source in the editor (Render as OBS source). Feeds also become OBS sources when the operator picks the OBS delivery on the dashboard, without touching the layout.

Where they go. The overlay with OBS control finds every OBS scene that has its browser source and puts the OBS sources around it: media below (showing through the overlay's transparent holes), text and color above. The source's layer setting can change that. Their position and size follow the layout, mapped onto OBS's canvas.

Each source is created once, named <source name> · st-xxxxxx, and shared by every scene that shows it, so a stream loads once. Sources the layout no longer has are removed. Your own OBS sources are never touched.

If no OBS scene has the browser source, Speedthon creates two scenes, Speedthon (below) and Speedthon (above), for you to add around the browser source yourself.

Troubleshooting