DerTyp7 / ts5-obs-overlay

An OBS overlay for TeamSpeak5, so your audience can see who is talking

TeamSpeak5-OBS-Overlay

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

This overlay uses the TeamSpeak5 Remote App API.

• TeamSpeak5-OBS-Overlay
  • Usage
    • Quick instructions
    • Detailed instructions
  • Common Issues
    • The overlay is empty, but i'm connected to a TeamSpeak5 server
    • OBS doesn't show the latest version of the overlay
  • Setup (Developer)

Usage

Quick instructions

1. Open this link in your Browser: https://ts5-overlay.tealfire.de/#/generate
2. Follow the instructions on the website
3. Accept overlay inside TeamSpeak5
   

Detailed instructions

Try this instruction if you have problems with the quick instructions above.

1. Open this link in your Browser: https://ts5-overlay.tealfire.de/#/generate

2. Follow the instructions on the website

3. Go into the TeamSpeak5 Settings and enable "Remote Apps"
   

4. Add a new Browser Source to your OBS Scene
   
   

5. Enter the in step 1 generated URL into the URL field of the Browser Source

6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)

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

Common Issues

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

Fix 1
Make sure you accepted the notification 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".

Setup (Developer)

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

Note: Pull requests are welcome, but please be consistent with the code style.
This project uses Prettier to format the code.
Pull requests always in the dev branch.