How to Capture Discord Voice in OBS Without Avatars

This guide explains how to configure OBS Studio to display active speakers from a Discord voice channel on your stream while hiding their user avatars. By utilizing the Discord Streamkit Overlay and custom CSS in OBS Studio, you can create a clean, text-only voice channel overlay that shows only user names when they speak, protecting privacy and saving screen space.

Step 1: Generate the Discord Voice Overlay URL

To capture voice channel activity without capturing the entire Discord desktop application, you must use the official Discord Streamkit Overlay.

  1. Open your web browser and navigate to the Discord Streamkit Overlay website.
  2. Click on the Submit or Install for OBS button to authorize the app with your Discord account.
  3. Select the Voice Widget tab.
  4. Choose your Discord Server and the specific Voice Channel you want to capture from the dropdown menus.
  5. Customize the basic settings on the left (such as text size and color).
  6. Copy the generated URL from the preview box on the right side of the screen.

Step 2: Add the Browser Source to OBS Studio

Next, you need to bring this overlay into OBS Studio as a dynamic browser source.

  1. Launch OBS Studio.
  2. Go to the Sources dock, click the + (Add) icon, and select Browser.
  3. Name the source (e.g., “Discord Voice Text”) and click OK.
  4. In the properties window, paste the URL you copied from the Streamkit Overlay into the URL field.
  5. Set the Width and Height according to how much screen space you want the list to occupy (e.g., Width: 300, Height: 600).

Step 3: Apply Custom CSS to Hide Avatars

To remove the user profile pictures (avatars) and display only the usernames, you must input a small snippet of CSS code into the OBS browser source settings.

  1. Scroll down in the Browser Source properties window until you find the Custom CSS text box.
  2. Delete any default CSS code currently in the box.
  3. Paste the following CSS code into the box:
body { 
  background-color: rgba(0, 0, 0, 0); 
  margin: 0px auto; 
  overflow: hidden; 
}

/* Hide user avatars */
.avatar {
  display: none !important;
}

/* Align usernames to the left now that avatars are hidden */
.user {
  padding-left: 5px !important;
  margin-bottom: 8px !important;
}

/* Optional: Show only speaking users */
.voice-state {
  display: none !important;
}
.voice-state.speaking {
  display: flex !important;
}
  1. Click OK to save the changes.

The user avatars will now be hidden, leaving only the names of the users in the Discord voice channel visible on your stream overlay. The optional code block at the bottom of the CSS snippet will also ensure that users only appear on screen when they are actively speaking.