Setting Up the Gamepad Viewer

Video reference

If you would rather watch the setup happen step by step than follow written instructions, these two tutorials cover the same two methods this guide walks through below, chroma keying a window capture and running the viewer as a proper browser source. The first goes through both methods at a normal pace, the second is a much faster, condensed version if you already roughly know your way around OBS and just want the quickest possible path.

Both videos move quickly in places, particularly around the Color Key filter settings, so the written steps below go slower and explain what each setting is actually doing rather than just where to click.

Which method to choose

There are two genuinely different ways to get this onto a stream, and which one suits you depends mostly on how much manual tweaking you want to do versus how much control you want over the result. Chroma key works by capturing your entire browser window and then telling OBS to treat one specific colour as invisible, which works in any version of OBS but means you are keying out a colour by eye and occasionally fighting a faint edge around the controller graphic. Running the page as a proper browser source skips that entirely, since the page's own transparent background comes through directly with no keying step needed at all, generally giving a cleaner result with less fiddling once it is set up correctly.

If you have never set up a browser source in OBS before and want the fastest path to something working, start with chroma key, since Window Capture is a source type every OBS install already has. If you want the cleanest possible result and do not mind one extra step the first time, go straight to the browser source method instead.

Chroma key setup

1. 1
   Open the Gamepad Viewer in its own browser window. A separate window, not just a tab, makes the next step far easier, since Window Capture targets a specific window rather than a tab inside a shared browser.
2. 2
   Add a Window Capture source in OBS. In your chosen scene, click the plus icon under Sources and select Window Capture.
3. 3
   Select the Gamepad Viewer window specifically. If you have several browser windows open, double check you have picked the right one before moving on.
4. 4
   Add a Color Key filter to that same source. Right click the source, choose Filters, then add a Color Key filter from the effects list.
5. 5
   Pick the background colour with the eyedropper. Click the colour swatch next to Key Color Type's Color option, then use the eyedropper to click directly on the page's plain background, away from any controller graphic or text.
6. 6
   Raise Similarity slowly until the background vanishes. Similarity controls how close a pixel needs to be to your chosen colour to also be keyed out. Too low and patches of background remain visible, too high and you start eating into the controller graphic's own edges.
7. 7
   Use Smoothness to soften the remaining edge. A small amount here blends the boundary between the keyed background and the visible graphic so it does not look harshly cut out.
8. 8
   Crop to just the controller using a Crop or Region filter. The page itself contains more than just the controller graphic, so add a Crop/Pad filter, or use Sub-Region if your OBS version offers it under the capture source's own properties, and shrink the visible area down to just the graphic you want on screen.
9. 9
   Position and scale the result. Drag the source on your canvas, holding shift while resizing a corner handle to keep the proportions locked.

Browser source setup

1. 1
   Confirm your controller works on the page first. Open the Gamepad Viewer in a normal browser tab, connect your controller, and press a button to confirm it responds before adding anything to OBS.
2. 2
   Add a Browser source in OBS. In your chosen scene, click the plus icon under Sources and select Browser.
3. 3
   Paste the page URL into the URL field. Use the same address you just tested in your normal browser tab.
4. 4
   Set Width to 480 and Height to 300 as a starting point. This matches the viewer's natural proportions before you scale it on canvas.
5. 5
   Click OK and check the OBS preview. The transparent background should come through automatically here, with no keying step needed.
6. 6
   Click into the source and press a controller button. The Gamepad API needs to register at least one input after the source gains focus, so a source that has never been clicked into can sometimes miss that very first detection.
7. 7
   Position and scale on your canvas. Drag to position, hold shift while dragging a corner handle to resize without distortion.

For a deeper walkthrough covering exact sizing for different canvas resolutions, multiple controller layouts, and the most common transparency failures in more depth than the steps above, the dedicated OBS Gamepad Overlay Guide goes considerably further.

Verifying before you go live

Whichever method you used, do a full check before trusting it on a real broadcast rather than assuming it works because it looked right in the properties window. Press every button on your controller and move both sticks through their full range while watching the OBS preview specifically, not just the original browser tab, since those are two separate renders and a working tab does not guarantee a working OBS source. Switch away to a different scene and back, since some setups, particularly Browser sources with Shutdown source when not visible left checked, can fail to resume cleanly after being hidden.

If you are running co-op content with more than one controller, this single viewer setup only shows one at a time. The dedicated Multi-Controller Viewer is built specifically for showing two to four controllers simultaneously and is worth switching to entirely rather than trying to run several single viewer instances side by side.

Troubleshooting

Chroma key leaves a visible fringe around the controller

Raise Smoothness slightly and lower Similarity a little at the same time, since a fringe usually means Similarity is set just high enough to leave a faint, half keyed border rather than a clean cut. Picking the background colour again with the eyedropper, clicking a spot further from any text or graphic edge, also helps.

Browser source shows a solid box instead of a transparent background

Check that Shutdown source when not visible is unchecked in the Browser source's properties, then click the small refresh icon at the bottom of that same properties window. If that does not resolve it, try toggling Use hardware acceleration when available off under OBS Settings, Advanced, then fully restart OBS rather than just closing the properties window.

The overlay shows in the preview but never updates

Click directly into the source's preview area in OBS, then press a controller button, since the Gamepad API needs that direct interaction to register its first input inside that specific embedded browser context.

Everything worked yesterday but the source is blank today

This is most often caused by your controller simply not being connected yet when OBS loaded the scene, or by an OBS update changing its internal browser engine. Re-pressing a button on the controller, or re-entering the same URL into a fresh Browser source, resolves the large majority of cases.