teamspeak-obs-overlay/README.md

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)
  • Common Issues
    • The overlay is empty, but i'm connected to a Teamspeak 5 server

Setup

1. Download the ts5-overlay-{version}.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 ts5-overlay-{version}.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 ts5-overlay-{version}.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/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2
Real example: file://C:/Users/.../ts5-overlay-{version}.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

Common Issues

The overlay is empty, but i'm connected to a Teamspeak 5 server

Sadly TeamSpeak5 does not give us any information about the current active server tab.
So we try currently use a workaround, where the active server tab is determined by looking on which server the your hardware input was unmuted the latest, since the non-active server tabs in TS5 usually mute the client’s microphone.

However this workaround is not 100% accurate and can fail in some cases.

Possible fixes:

• Unmute and mute yourself in the active server tab (Just a normal unmute and mute, not the hardware mute)
• Reconnect to the TS5 server while the overlay is open