OBS browser source

Every browser source setting that matters for a PX Studio overlay, plus audio, refresh, docks, Studio Mode and scaling in OBS.

View as Markdown

On this page

OBS shows web pages through the Browser source, a built-in web browser (based on Chromium) that renders a page straight into your scene. Your PX Studio overlay is such a page. This page explains the OBS side; the short setup is in Add to OBS.

Add the source

In PX Studio, copy your overlay link with Add to OBS → Copy link (or Copy OBS URL on the Overlays page).
In OBS, pick the scene, then Sources → + → Browser. Give the source a name and click OK.
In the properties, paste the link into URL. Leave Local file off.
Set Width and Height to your overlay resolution (editor: Canvas resolution, by default 1920 × 1080). Click OK.

You can also drag a link from your web browser into the OBS window; OBS then creates a browser source for it.

The settings and what PX Studio needs

OBS setting	What it does	For a PX Studio overlay
URL	The page the source loads	Your OBS link from PX Studio
Width / Height	Size of the page viewport in pixels (OBS default 800 × 600)	Same as your overlay resolution
Use custom frame rate / FPS	Renders the page at a frame rate you choose (default 30 when on)	Leave off
Control audio via OBS	Sends the page audio into the OBS audio mixer	On, so alert sounds get their own fader
Custom CSS	Extra styles; the default makes the background transparent and hides scroll bars	Keep the default
Shutdown source when not visible	Unloads the page when the source is hidden or its scene is not active	Off, so the overlay stays connected
Refresh browser when scene becomes active	Reloads the page every time you switch to the scene	Off, a reload makes the overlay start over
Page permissions	How much the page may read or control in OBS	The default is fine
Refresh cache of current page	Reloads the page right away and fetches its files fresh	Use it when the source looks out of date

Set up automatically in PX Studio creates the source with exactly these choices: your overlay size, Control audio via OBS on, Shutdown source when not visible off and Refresh browser when scene becomes active off.

Refresh and clear the cache

Quick refresh: right-click the source in the Sources list and choose Refresh.
Full reload: open the source properties and click Refresh cache of current page. This also fetches images, fonts and scripts again.
After Reset the OBS link in PX Studio, a refresh is not enough. Paste the new link into URL.

Audio from the overlay

With Control audio via OBS turned on, the browser source shows up in the Audio Mixer like a microphone or game source. There you can:

move the fader to set how loud alerts, text to speech and media are on stream,
click the speaker icon to mute the source,
open Edit → Advanced Audio Properties and set Audio Monitoring to Monitor Only (mute output) (you hear it, viewers do not), Monitoring Enabled (you and viewers hear it) or Monitor Off.

Monitoring plays through the Monitoring Device under Settings → Audio → Advanced. OBS recommends keeping music and alert sounds in the green part of the meter, below your voice.

Interact with the page

Right-click the source and choose Interact to open the page in a small window where you can click and type. You rarely need this for PX Studio, because you control the overlay from the editor, the Deck or a Stream Deck.

Hardware acceleration

Under Settings → Advanced → Sources, OBS has the option Enable Browser Source Hardware Acceleration. It lets browser sources render on the graphics card. If browser sources stay black, flicker or freeze on your machine, toggle this option, restart OBS and test again.

Custom browser docks

A dock is a web page inside the OBS window instead of in your scene. Open Docks → Custom Browser Docks, enter a Dock Name and a URL and click Apply. Docks never appear on stream. OBS does not support browser docks on Linux with Wayland. PX Studio does not need a dock to work.

Scenes and Studio Mode

Scenes and sources share one name list in OBS, so a source cannot have the same name as a scene.
One overlay source can be added to several OBS scenes. PX Studio scenes switch inside that one source; see Scenes.
Studio Mode shows two views: Preview on the left for editing, Program on the right for what viewers see. Transition swaps them. Viewers cannot see whether Studio Mode is on.
Sources higher in the Sources list are drawn on top. Keep the overlay above your game or camera.

Scaling and position

The Width and Height in the properties set the page size. Dragging the red frame in the preview only scales the finished image. For a sharp overlay, keep the properties at your overlay resolution and scale in the preview.

Action	Windows	macOS
Edit Transform (exact position and size)	`Ctrl`+`E`	`Cmd`+`E`
Fit to screen	`Ctrl`+`F`	`Cmd`+`F`
Stretch to screen	`Ctrl`+`S`	`Cmd`+`S`
Center to screen	`Ctrl`+`D`	`Cmd`+`D`
Reset Transform	`Ctrl`+`R`	`Cmd`+`R`
Crop	Hold `Alt` and drag	Hold `Option` and drag

If your OBS Base (Canvas) Resolution matches your overlay resolution, Fit to screen places the overlay exactly. If you change the base resolution later, OBS needs you to re-align your sources.

Keep OBS light

Browser sources are among the heavier sources in OBS. OBS recommends using as few as needed and keeping their width and height no larger than necessary. One PX Studio overlay source covers all your widgets, which helps here. Problems and fixes are in OBS troubleshooting.

Sources

Was this page helpful?