This page will guide you through setting up a BrowserSource in OBS Studio that displays the users in a commentary booth.
If you already have the StreamKit widget & CSS installed, and if your talking indicators animate in and out, then all you need to do is copy the URL at the bottom of the next section (the one that starts https://xtil.net/...) into your BrowserSource's URL field.
If you already have the widget installed, but your talking indicators appear and disappear instantly with no animation, you should also update the CSS.
Optional but recommended. Using the multi-channel selector will allow you to choose between multiple voice channels when the BrowserSource is initialized, preventing auto-joins when OBS starts and requiring only one BrowserSource for all channels.
Add any additional StreamKit OBS voice widget URLs here and give them titles. You only need to pick the server and voice channel; all other options are ignored.
After setting up the voice channels above, copy this URL into your OBS BrowserSource:
To choose a voice channel, right-click your BrowserSource and select 'Interact', then click on the voice channel to activate its StreamKit widget.
If you don't want to use the multi-channel selector, just use a StreamKit URL directly with the CSS below.
Assign your BrowserSource the following CSS:
These values are specific to the Cawmunity layout and may need to be tweaked:
Contact Fraxtil#2168 on Discord for assistance / bug reports.