Behind the Tech Curtain: Display Who is Talking on your Twitch Stream: (Part 2).


I’m back for another entry in Tech Behind the Curtain.


Let’s jump right in and look at this little utility that allows you to integrate your Discord environment into your live stream.


Discord’s Streamkit Overlay for OBS and XSplit -https://streamkit.discordapp.com/overlay

Whether you are wanting to display an “invite” link to your Discord server, showcase a certain text chat room or provide the ability to show whom is speaking during your game session, this is the overlay add-on for you!

Here’s the download link for the Public Test Build of Discord which will allow you to run a second instance of the software on the same machine:


Discord PTB (Public Test Build) - https://ptb.discordapp.com/


As I teased in the video, you can use some simple CSS code within your streaming software browser source entry to change the orientation of the players speaking in your channel from vertical to horizontal. Here an example screen snapshot:

Now here's the actual CSS code:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

.voice-container .voice-states .voice-state .avatar { height: 45px; width: 45px; border-radius: 50%; float: none; }

.voice-container .voice-states .voice-state .avatar { border:3px solid transparent; }

.voice-container .voice-states .voice-state { float:right; width:13%; text-align:center; }

.voice-container .voice-states .voice-state .user .name { font-size:12px!important; }

.voice-container .voice-states .voice-state .user { padding-top:0px; }

Join the Wizco Games Community!


So, now you've got an another item in your stream toolbelt that will add that extra flair to your live streams.


In our next video tutorial, I will take the browser source code we generated with the overlay kit and use it within OBS to add the visual cue of whom is currently speaking to the custom artwork and graphics I created specifically for my RPG games.


Until next time, keep gaming and have fun!

0 views

© 2019 by WizCo Games.