Teamspeak5-OBS-Overlay

This is a overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.
This App uses the new "Remote Apps" feature of Teamspeak 5.

• Teamspeak5-OBS-Overlay
  • Setup
    • Customization (Parameters)
  • Setup (Developer)

Setup

1. Download the index.html of the latest release from here
   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of index.html

2. Go into the Teamspeak 5 Settings and enable "Remote Apps"
   

3. Add a new Browser Source to your OBS Scene
   
   

4. Tick the checkbox "Local File" and select the downloaded index.html
   4.1. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
   

5. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it. (If you don't get a notification, restart Teamspeak 5 and OBS -> try again)
   

Customization (Parameters)

You can customize the overlay by adding parameters to the URL of the Browser Source.

1. Open your Browser Source settings
2. Untick the checkbox "Local File"
3. Add file:// to the beginning of the URL
   
4. Start adding parameters like discribed below

Start by adding a ? to the end of the URL and then add the parameters. To add multiple parameters, you have to seperate them with a &.

Like this: file://C:/Users/.../index.html?parameter1=value1&parameter2=value2
Real example: file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5

This is a list of all available parameters (all parameters are optional):

Parameter	Description	Type	Default
remoteAppPort	The port of the Teamspeak 5 remote app	number	5899
hideNonTalking	Hide all non-talking clients	boolean	false
clientLimit	Count of how many client should be shown	number	0 (unlimited)
showChannelName	Display the channel name	boolean	false

Setup (Developer)

1. Clone this repository
2. Run npm install
3. To start the development server run npm run dev