teamspeak-obs-overlay/README.md

Teamspeak5-OBS-Overlay

This is an 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.

This overlay uses the Teamspeak 5 Remote App API.

• Teamspeak5-OBS-Overlay
  • Usage
    • Quick instructions (online usage only)
    • Instructions
  • Settings (Parameters)
    • Are you using the online version (recommended version)?
    • Are you using the offline version?
    • Adding Parameters
  • Setup (Developer)
  • Common Issues
    • The overlay is empty, but i'm connected to a Teamspeak 5 server
    • OBS doesn't show the latest version of the overlay

Usage

Quick instructions (online usage only)

1. Go into the Teamspeak 5 Settings and enable "Remote Apps"
2. Add a new Browser Source to your OBS Scene and enter https://dertyp7.github.io/ts5-obs-overlay/ as URL
3. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
4. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it.

Instructions

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

2. Add a new Browser Source to your OBS Scene
   
   

3. Configure Browser Source (Use ONE of the following methods)

   1. Online Usage (recommended): Enter https://dertyp7.github.io/ts5-obs-overlay/ as URL
   2. Offline Usage (ignore this if you use the online usage above):
      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. Tick the checkbox "Local File" and select the downloaded ts5-overlay-{version}.html

4. 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)
   

Settings (Parameters)

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

Are you using the online version (recommended version)?

1. Open your Browser Source settings
2. Start adding parameters like discribed in Adding Parameters

Are you using the offline version?

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 in Adding Parameters

Adding Parameters

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:
Online: https://dertyp7.github.io/ts5-obs-overlay/?parameter1=value1&parameter2=value2
Offline: file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2

Real example:
Online: https://dertyp7.github.io/ts5-obs-overlay/?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true
Offline: file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true

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

Fix 1
Make sure you accepted the notifiaction in your Teamspeak Client.

Fix 2
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

OBS doesn't show the latest version of the overlay

This can happen if the OBS Browser Source is caching the overlay.
To fix this, open the Browser Source settings and click on "Refresh cache of current page".