A OBS-Overlay for TeamSpeak5

Made with the "Remote App" feature of TeamSpeak5

• A OBS-Overlay for TeamSpeak5
  • Setup
  • Config
  • Troubleshooting
    • Option 1:
    • Option 2:
    • Option 3:

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

1. Download the latest release of the project -> https://github.com/DerTyp876/ts5-obs-overlay/releases/latest

2. Extract the archive and move the folder to where you want it to be

3. Open your TeamSpeak5 client and go to settings -> Remote Apps

4. Enable the "Remote Apps" feature

5. Open your OBS Studio

6. Add a new browser source to your scene

7. In the properties of your new browser source, select the Local File check box

8. Click "Browse" next to the newly apperared "Local file" field

9. Now select the in step 1 downloaded overlay.html

10. Set the "Width" to 2000 and the "Height" to 1000 (This is just my own preference. If you have better values, use them)
    

11. Now connect to a TeamSpeak server and check if it works. You need to accept the remote app in your TeamSpeak notifications

12. optional If you want to get rid of this manually accepting the remote app (step 11) do as follows:

    1. Open the file "overlay.html" in your browser
    2. Open the Inspector by pressing F12 or right-click -> inspection
    3. Go to the console tab
       
    4. Copy the displayed API-Key (after you have performed all of the above steps, including accepting the remote app in your TeamSpeak client)
       
    5. Open the file config.js from the same directory as the file overlay.html with any editor
    6. Paste the copied key into the quotation mark of "apiKey"
    7. Now do Option 3 of the troubleshooting guide or maybe restart your OBS

    Warning

    The API-Key changes from time to time. You may need to update the API-Key sometimes (delete the old API-Key & repeat step 12).
    If someone knows how I can prevent this, please tell me

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:

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

Option 4:

If you use an API-Key in config.js (setup step 12), try to remove the key from the file.
If it works now, you probably need to delete the old API-Key and repeat step 12 of the setup instructions because the API-Key has changed.