CoNDOR StreamKit builder

This page will guide you through setting up a BrowserSource in OBS Studio that displays the users in a commentary booth.

Upgrading from older versions

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.

Multi-channel selector

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.

URL	Title
		+ ×

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.

CSS

Assign your BrowserSource the following CSS:

/* Change these as desired: */

.voice-states {
  font-size: 32px;
  font-family: "Necrosans";
}

.voice-states:first-child:before {
  content: "CAWMENTARY:";
}

/* Leave these alone unless you know what you're doing: */

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

.voice-states {
  margin: 0;
  padding: 0;
  font-weight: normal !important;
}

.voice-states:first-child:before {
  display: inline-block;
  height: .8em;
}

.voice-container {
  line-height: inherit;
}

.voice-state {
  height: .8em !important;
  margin: 0 !important;
}

.avatar {
  display: none;
}

.user {
    padding-top: 0 !important;
}

.user .name {
  display: inline-block;
  margin-right: 16px;
  padding: 0 !important;
  font-size: inherit !important;
  background-color: transparent !important;
}

.user .name:after {
  display: inline-block;
  content: "\200c";
  width: 0;
  height: 0;
  margin-left: .6em;
  border-radius: .4em;
  vertical-align: middle;
  background-color: green;
  transition: width .2s, height .2s, margin-left .2s;
}

.speaking + .user .name:after {
  width: .4em;
  height: .4em;
  margin-left: .4em;
}

Size & Transform

These values are specific to the Cawmunity layout and may need to be tweaked:

Assign your BrowserSource a width of 312 and height of 130.
In the BrowserSource's transform, set the position values to 5 and 890 (top-left). Make sure the transform's width and height match the BrowserSource.

Need help?

Contact ashastral#9999 on Discord for assistance / bug reports.