If you want to quickly show your friends who are on call with you on stream for collabs, you can use Discord Streamkit overlay. It will show up you and your friends’ Discord avatar and names, and they will have green border when they are speaking.
You can set up which channel and server to pick up the information from, and there are additional settings such as if you want to show only speaking users or only show their icons without names. There are also options for customizing text size and colors, as well as the background style to match your screen.
You will be given a link on the right side of the screen, which you can input to OBS with clicking the ‘+’ plus sign, then select to add as a new Browser Source by putting the link in the URL section.
By default, it will list down the users vertically, and at the time of this post being written, I couldn’t find out how to make them line up horizontally instead like this.
Thankfully, adding a browser source to OBS allows custom CSS code to change the looks of the page to some extent.
Here’s a code I made for a friend to do so, which you can input in the Custom CSS part of your Browser source properties in OBS:
[class^="Voice_voiceState"] {
display: inline-block;
width:120px;
margin:10px;
}
[class^="Voice_voiceStates"] {
width:100%;
}
[class^="Voice_user"]{
text-align: center;
}
[class^="Voice_avatar"]{
margin-bottom:10px;
width:100%;
height:auto;
}
You can adjust the numbers as you wish to change the size of the icons (the width part) and gap between the icon and the names (the margin parts).
I’m pretty sure there are cleaner and better ways to do this since I am not a CSS expert, but since I couldn’t find it when I was searching online, and this works for me for now, I just want to share it here in case it can help others too. Feel free to drop in your suggestions!
