janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-28 20:32:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

update readme

Browse Source
This commit is contained in:
Janis
2023-11-12 18:14:08 +01:00
parent 5f0ca2c209
commit e847dde41d
1 changed files with 27 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
README.md
View File

@@ -1,95 +1,52 @@
# Teamspeak5-OBS-Overlay
# 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 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 [Teamspeak 5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
- [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
- [TeamSpeak5-OBS-Overlay](#teamspeak5-obs-overlay)
- [Usage](#usage)
- [Quick instructions (online usage only)](#quick-instructions-online-usage-only)
- [Instructions](#instructions)
- [Settings (Parameters)](#settings-parameters)
- [Are you using the **online** version (recommended version)?](#are-you-using-the-online-version-recommended-version)
- [Are you using the **offline** version?](#are-you-using-the-offline-version)
- [Adding Parameters](#adding-parameters)
- [Quick instructions](#quick-instructions)
- [Detailed instructions](#detailed-instructions)
- [Setup (Developer)](#setup-developer)
- [Common Issues](#common-issues)
- [The overlay is empty, but i'm connected to a Teamspeak 5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak-5-server)
- [The overlay is empty, but i'm connected to a TeamSpeak5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak5-server)
- [OBS doesn't show the latest version of the overlay](#obs-doesnt-show-the-latest-version-of-the-overlay)
## Usage
### Quick instructions (online usage only)
### Quick instructions
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**.
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
2. Follow the instructions on the website
3. Accept overlay inside TeamSpeak5
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
### Instructions
### Detailed instructions
1. Go into the Teamspeak 5 Settings and enable "Remote Apps"
Try this instruction if you have problems with the quick instructions above.
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
2. Follow the instructions on the website
3. Go into the TeamSpeak5 Settings and enable "Remote Apps"
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
2. Add a new Browser Source to your OBS Scene
4. Add a new Browser Source to your OBS Scene
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
3. Configure **Browser Source** (Use **ONE** of the following methods)
5. Enter the in step 1 generated URL into the URL field of the Browser Source
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](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)
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`
6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
4. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
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)
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)
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
## 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](#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
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
4. Start adding parameters like discribed in [Adding Parameters](#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
@@ -98,10 +55,10 @@ This is a **list** of **all available parameters** (all parameters are optional)
## Common Issues
### The overlay is empty, but i'm connected to a Teamspeak 5 server
### The overlay is empty, but i'm connected to a TeamSpeak5 server
**Fix 1**
Make sure you accepted the notifiaction in your Teamspeak Client.
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.