WARNING: This overlay works only if you are connected to one server only.
If you were connected to multiple servers and the overlay crashed, try disconnecting from all servers and reconnecting to only one.

Setup

Download the latest release of this project & extract the archive to a folder of your choice
Open your TeamSpeak5 client and go to settings -> Remote Apps
Enable the "Remote Apps" feature
Open your OBS Studio & add a new browser source to your scene
In the properties of your new browser source, select the Local File check box
Click "Browse" next to the newly apperared "Local file" field
Now select the in step 1 downloaded overlay.html
Set the "Width" to 2000 and the "Height" to 1000 (This is just my own preference. If you have better values, use them)
Now connect to a TeamSpeak server and check if it works. You need to accept the remote app in your TeamSpeak notifications

Done

Update

Automatic (Scripts)

If you want to update the project automatically, just double-click the "update.bat" file OR open a new console in the project directory and run the "update.ps1" command.

Manually

To manually update just delete the hole project directory and repeat the setup above :).

Configuration

In the config.js file, which is located in the same folder as the overlay.html file, you can make various settings for the appearance of the overlay.
Since everything is written in simple css and html, you can change the css/style.css file to your liking.

Note

If your change something in the files you have to do Option 3 of the troubleshooting below.

Troubleshooting

Possible solutions to fix the overlay.

Option 1:

Disconnect from all TeamSpeak servers and reconnect to just one

Option 2:

Restart TeamSpeak5

Option 3:

Open OBS Studio
Go open the properties of your browser source
On the bottom of the properties press the "Refresh cache of current page" button.