axXez TeamSpeak Stream Overlay
Hello Guys, i (also) made a simple and clean TS6 Overlay for Streamers.
Overlay: ts6.axxez.eu
Key Features
- robust connection/reconnection
- configurable position/alignment
- simple css classes to customize the design in OBS
- easy to use
Story
I developed a Teamspeak 3 stream overlay 8 years ago that was written in C#.
It used the ClientQuery plugin to host a websocket server and send the “talking” data to a Vue-based website hosted on an internal web server.
When I learned that Teamspeak 5/6 already had the websocket server built in, I wanted to recreate my overlay. So I rewrote the website in Svelte (to try something new :D) and hosted it on my public website.
Then I came across DerTyp7 and ZockerAxel’s overlays and figured it would be pointless to post a third one, but since my overlay isn’t based on their work and is completely rewritten, I decided to do it anyway.
Teamspeak 3 Plugin
Since my original program was for Teamspeak 3, I wanted to support it as well and wrote a plugin that “emulates” the Teamspeak 5/6 websocket server. I have currently build the plugin for Windows only.
It’s written very quick and dirty and my C++ skills aren’t the very best, so feel free to fix any memory leaks and garbage code segments
Ts3 Plugin on Github
Note: Not all functions/events are supported/implemented.
CSS selectors to customize design
In OBS you can inject custom CSS to redesign the Overlay.
The base class that all clients have is “.client”. They then receive attributes depending on their status: [me] [muted] [talking] [fullmuted]
<div class="client" me talking>
<div id="bulb" />
<span>Name</span>
</div>
So, for example, if I want to change the color of “me” when speaking, I can do that:
.client[me][talking] span {
color: white;
}
.client[me][talking] #bulb {
border-color: white;
}
