mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2026-07-31 16:49:04 +02:00
Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f0761c40b7 | ||
|
|
ef442f10e0 | ||
|
|
ce7bd90362 | ||
|
|
61f6651a57 | ||
|
|
1d9b6de814 | ||
|
|
751fad72f4 | ||
|
|
4eb61d3b96 | ||
|
|
7fd2e2aafa | ||
|
|
33786d7366 | ||
|
|
1a5b231d1e | ||
|
|
232bca2bbc | ||
|
|
0b74390d2e | ||
|
|
d16e80a48d |
10
README.md
10
README.md
@@ -20,16 +20,16 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
|
|||||||
|
|
||||||
### Quick instructions
|
### Quick instructions
|
||||||
|
|
||||||
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
|
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
|
2. Follow the instructions on the website
|
||||||
3. Accept overlay inside TeamSpeak5
|
3. Accept overlay inside TeamSpeak5
|
||||||
|
|
||||||
|
|
||||||
### Detailed instructions
|
### Detailed instructions
|
||||||
|
|
||||||
Try this instruction if you have problems with the quick instructions above.
|
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)
|
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
|
2. Follow the instructions on the website
|
||||||
|
|
||||||
@@ -41,9 +41,9 @@ Try this instruction if you have problems with the quick instructions above.
|
|||||||
|
|
||||||
|
|
||||||
5. Enter the in step 1 generated URL into the URL field of the Browser Source
|
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 ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
|
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)
|
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)
|
||||||
|
|
||||||
|
|||||||
@@ -3,11 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
|
||||||
name="description"
|
|
||||||
content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay"
|
|
||||||
/>
|
|
||||||
<meta name="author" content="DerTyp7" />
|
<meta name="author" content="DerTyp7" />
|
||||||
|
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
||||||
<title>TS5-OBS-Overlay</title>
|
<title>TS5-OBS-Overlay</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "ts5-obs-overlay",
|
"name": "ts5-obs-overlay",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "2.0.3",
|
"version": "2.0.8",
|
||||||
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
|
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
|
||||||
"author": "DerTyp7",
|
"author": "DerTyp7",
|
||||||
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
|
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
|
||||||
|
|||||||
23
public/logo.svg
Normal file
23
public/logo.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="307.000000pt" height="339.000000pt" viewBox="0 0 307.000000 339.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
|
||||||
|
<g transform="translate(0.000000,339.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#008080" stroke="none">
|
||||||
|
<path d="M1297 3382 c-3 -4 -7 -61 -11 -127 -20 -341 -120 -616 -370 -1010
|
||||||
|
-158 -251 -306 -436 -331 -415 -7 6 -18 52 -24 103 -22 170 -77 377 -101 377
|
||||||
|
-5 0 -21 -38 -35 -86 -27 -89 -79 -213 -212 -504 -201 -438 -244 -657 -180
|
||||||
|
-901 52 -198 102 -290 232 -427 137 -145 345 -310 474 -376 l34 -18 -5 24 c-3
|
||||||
|
12 -18 63 -32 113 -64 213 -19 418 154 701 106 173 164 314 194 474 16 82 30
|
||||||
|
120 45 120 13 0 55 -59 94 -131 45 -83 81 -198 102 -329 9 -57 18 -106 20
|
||||||
|
-108 7 -7 122 231 144 298 34 104 49 202 63 403 6 103 15 186 20 185 4 -2 79
|
||||||
|
-72 167 -155 257 -247 392 -414 501 -625 97 -187 102 -205 107 -413 6 -223 -1
|
||||||
|
-265 -73 -418 -31 -65 -53 -121 -50 -124 7 -7 188 122 295 212 210 176 368
|
||||||
|
383 455 598 149 370 117 760 -98 1193 -110 220 -245 417 -434 633 l-39 45 -7
|
||||||
|
-183 c-5 -106 -14 -203 -22 -230 -14 -46 -80 -144 -99 -145 -14 -1 -59 92
|
||||||
|
-101 209 -121 342 -331 651 -579 854 -130 107 -287 203 -298 183z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -27,11 +27,9 @@ export default function Generator() {
|
|||||||
url.searchParams.set("hideNonTalking", hideNonTalking.toString());
|
url.searchParams.set("hideNonTalking", hideNonTalking.toString());
|
||||||
url.searchParams.set("clientLimit", clientLimit.toString());
|
url.searchParams.set("clientLimit", clientLimit.toString());
|
||||||
|
|
||||||
if (url.hostname === "dertyp7.github.io") {
|
// url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
|
||||||
url.pathname = url.pathname + "ts5-obs-overlay/";
|
// gh-pages needs the hash to be between the base URL and the search params
|
||||||
}
|
setOutputUrl(url.toString().replace("?", "#/?"));
|
||||||
|
|
||||||
setOutputUrl(url.toString());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to copy URL to clipboard
|
// Function to copy URL to clipboard
|
||||||
@@ -64,7 +62,7 @@ export default function Generator() {
|
|||||||
<p>1. Customize your settings</p>
|
<p>1. Customize your settings</p>
|
||||||
<p>2. Copy the generated URL</p>
|
<p>2. Copy the generated URL</p>
|
||||||
<p>3. Paste the URL into the BrowserSource URL field in OBS</p>
|
<p>3. Paste the URL into the BrowserSource URL field in OBS</p>
|
||||||
<a href="#">Click here for detailed instructions</a>
|
<a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">Click here for detailed instructions</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Output Section */}
|
{/* Output Section */}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export default function Viewer({
|
|||||||
remoteAppPort: remoteAppPort,
|
remoteAppPort: remoteAppPort,
|
||||||
auth: {
|
auth: {
|
||||||
identifier: "de.tealfire.obs",
|
identifier: "de.tealfire.obs",
|
||||||
version: "2.0.3",
|
version: "2.0.8",
|
||||||
name: "TS5 OBS Overlay",
|
name: "TS5 OBS Overlay",
|
||||||
description: "A OBS overlay for TS5 by DerTyp7",
|
description: "A OBS overlay for TS5 by DerTyp7",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -7,6 +7,10 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
p {
|
p {
|
||||||
background-color: #2f313680;
|
background-color: #2f313680;
|
||||||
@@ -34,14 +38,15 @@
|
|||||||
|
|
||||||
// icon styles
|
// icon styles
|
||||||
svg {
|
svg {
|
||||||
width: 2.1rem;
|
width: 5vw;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
|
filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
|
||||||
}
|
}
|
||||||
|
|
||||||
// client name styles
|
// client name styles
|
||||||
p {
|
p {
|
||||||
font-size: 1.4rem;
|
font-size: 5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user