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.

ts5-obs-overlay's Issues

Show server ranks

Give the user the option to show the server ranks in the overlay

Multi server support

Right now, if you connect to another server, the overlay will crash.

Change this to support multiple connections.

Try to always show the server which the user is currently active in.
Alternatively, use the first server the user connected to.

Show error message instead of nothing

Show an error message for the user with help provided instead of just crashing.

Profanity filter for usernames

Split up teamspeak5Handler.ts in multiple files for better readability

Show server icons

Give the user the option to show the server icons in the overlay

Add update script

Overlay list / resolution & scaling

Describe the bug

Overlay always shows just FOUR nicknames listed no matter what resolution or scaling is used. Even when I drag/resize the box on scene manually. My screen/desktop resolution is full HD and output stream from OBS is 720p.

To Reproduce

Proper setup either with 1920x1080 or 1280x720 resolution in "browser layer options".

Expected behavior

I expect the list to show all the members of the channel/room with at least greyed-out dots.

Your environment:

• OS: Windows 11
• OBS version: 29.1.3
• Overlay version v1.3.1

Show channel name

Add an option to the config file to show the current channel name in the overlay

Have to re-approve app every time OBS/Overlay is openned

Having to re-approve the app every time someone were to open OBS is a pretty bad experience. There's not really any documentation about the remote app API (and it's highly subject to change) so I'm not entirely sure why that is/how to fix it or I'd give it a shot.

Show if a client is hardware muted

Currently, the overlay only shows if a client is muted, but not when its mic or headphone are disabled.

Set a show clients limit

In a channel can be more clients than you want to show on stream.
Make an option to set a limit for the overlay.

Order the users by the last time they talked, but only show the limited amount of users.

You have to always be on top.

test

test

Client tries to connect 2 times

Domain redirect + no SSL

Screenshots are welcome

Describe the bug

URL https://dertyp7.github.io/ts5-obs-overlay/ is automatically redirecting to https://www.janis-meister.com/ts5-obs-overlay/
New ULR dont have valid SSL certificate - plugin not working in OBS.
Many thx for fix!
Erik

Do you use the local or online version?

• Online version with URL: https://dertyp7.github.io/ts5-obs-overlay
• The version named below locally downloaded on my device

Clients are not displayed | Clients werden nicht angezeigt

Hi!

The clients are not displayed for me.
I have included the HTML page in OBS according to the instructions, but the browser window remains empty.
If I open the HTML page in a normal browser, I can see the accesses and updates via the developer options.
However, there the page also remains completely empty.

---

Die Clients werden bei mir nicht angezeigt.
Habe die HTML-Seite nach der Anleitung in OBS eingebunden, aber das Browserfenster bleibt leer.
Wenn ich die HTML-Seite in einem normalen Browser öffne, sehe ich über die Entwickleroptionen die Zugriffe und aktualisierungen.
Dort bleibt jedoch die Seite auch komplett leer.

---

• Windows 10
• OBS 29.1.3
• Firefox 114.0.1

Hide non-talking clients

API-Key gets changed sometimes

After some time, the API-Key changes.
This is very annoying since the user always has to update the API-Key in the file.

It's even more annoying, because the overlay doesn't say what's wrong. It just does nothing.
May this will at least help with that: #3.

Crashing when subchannel does not exist

On this Teamspeak server no subchannel exists at all