mirror of
				https://github.com/DerTyp7/teamspeak-obs-overlay.git
				synced 2025-10-30 13:17:11 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			59 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			59 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # Teamspeak5-OBS-Overlay
 | |
| 
 | |
| This is a 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.
 | |
| 
 | |
| 
 | |
| 
 | |
| - [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
 | |
|   - [Setup](#setup)
 | |
|     - [Customization (Parameters)](#customization-parameters)
 | |
|   - [Setup (Developer)](#setup-developer)
 | |
| 
 | |
| ## Setup
 | |
| 
 | |
| 1. Download the `index.html` of the latest release from [here](https://github.com/DerTyp876/ts5-obs-overlay/releases/tag/v1.0.0)
 | |
|      
 | |
|   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html` 
 | |
| 2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
 | |
|    
 | |
| 
 | |
| 3. Add a new Browser Source to your OBS Scene  
 | |
|      
 | |
|    
 | |
| 
 | |
| 4. Tick the checkbox "Local File" and select the downloaded `index.html`  
 | |
|     4.1. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)  
 | |
|    
 | |
| 
 | |
| 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)  
 | |
|    
 | |
| 
 | |
| ### Customization (Parameters)
 | |
| 
 | |
| You can customize the overlay by adding parameters to the URL of the Browser Source.
 | |
| 
 | |
| 1. Open your Browser Source settings
 | |
| 2. **Untick** the checkbox "Local File"  
 | |
| 3. Add `file://` to the beginning of the URL  
 | |
|    
 | |
| 4. Start adding parameters like discribed below
 | |
| 
 | |
| 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: `file://C:/Users/.../index.html?parameter1=value1¶meter2=value2`  
 | |
| Real example: `file://C:/Users/.../index.html?remoteAppPort=5899`
 | |
| 
 | |
| This is a list of all available parameters (all parameters are optional):
 | |
| 
 | |
| | Parameter       | Description                            | Default |
 | |
| | --------------- | -------------------------------------- | ------- |
 | |
| | `remoteAppPort` | The port of the Teamspeak 5 remote app | `5899`  |
 | |
| 
 | |
| ## Setup (Developer)
 | |
| 
 | |
| 1. Clone this repository
 | |
| 2. Run `npm install`
 | |
| 3. To start the development server run `npm run dev`
 | 
