A Browser Source is a web page that OBS Studio renders as a layer in your scene, using the Chromium browser built into OBS. Alert boxes, chat boxes, overlays and visualizers such as Vortexia are all Browser Sources. This guide covers how to add one, what every setting in its properties does, whether to enable browser source hardware acceleration, and how to fix the usual problems.
How to Add a Browser Source in OBS
- In the Sources panel, click + and choose Browser
- Give it a name and click OK
- Paste the page address into URL, or tick Local file to load an HTML file from your computer
- Set Width and Height to your canvas size, usually 1920 by 1080
- Click OK. The page appears in your scene, and you can move, resize or crop it like any other source
To change anything later, double-click the source, or right-click it and choose Properties.
What Every Browser Source Setting Does
- Local file and URL: load a web address, or an HTML file stored on your computer
- Width and Height: the size OBS renders the page at. Match the size it is shown at, since a small page stretched to fill the screen looks soft
- Use custom frame rate and FPS: render the page at a set frame rate instead of matching OBS
- Control audio via OBS: sends the page’s own sound, such as an alert chime or a music player, into the OBS Audio Mixer so you can adjust or mute it there. It does not give the page a microphone
- Custom CSS: styles the page. The default, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, makes the page background see-through and hides scrollbars
- Shutdown source when not visible: unloads the page while its scene is not showing, which saves resources but makes the page start over each time it reappears
- Refresh browser when scene becomes active: reloads the page every time you switch to that scene
- Page permissions: how much of OBS the page may control, from No access to OBS up to Full access, which lets a page start and stop your stream. Give a page no more than it needs
- Refresh cache of current page: a button that reloads the page and clears its stored files
Should You Enable Browser Source Hardware Acceleration?
Usually yes, and for GPU visuals like Vortexia, definitely. The setting is in OBS under Settings, then Advanced, in the Sources section, as Enable Browser Source Hardware Acceleration, and a change takes effect after you restart OBS. With it on, OBS draws browser sources on your graphics card. With it off, your processor does that work instead.
It matters most for pages that animate every frame. Vortexia draws each frame live with WebGL, which is exactly the work a graphics card is built for; hand it to the processor and expect choppier motion and higher CPU load. A static chat box barely notices either way.
- Turn it off only to troubleshoot: browser sources that flicker, show black or crash, which some graphics-driver combinations cause
- Or when your graphics card is already at 100% during a game and OBS is dropping frames. Switching it off moves that load onto your processor, so check whether that simply moves the problem
- After changing it, restart OBS. If turning it off did not fix the problem, turn it back on
How to Interact With a Browser Source
Right-click the source and choose Interact. A window opens where you can click, type and scroll inside the page, for example to log in to a widget or press a button on it, without the page leaving your scene.
Showing a Web Page as an OBS Dock
OBS can also show a web page as a panel inside its own window rather than in your scene. Open Docks, then Custom Browser Docks, give the dock a name and a URL, and click Apply. Docks are handy for chat windows and control panels.
Performance Tips
- Keep browser source hardware acceleration switched on (see above)
- Set each source to the size it is actually shown at, rather than a large page scaled down
- Shutdown source when not visible saves resources on scenes you rarely use, but the page restarts when you switch back, so leave it off for anything that should keep running, such as a visual behind your camera
- A lower custom frame rate saves resources on pages that barely move, such as a chat box
- For Vortexia, Performance Mode in the dashboard renders at a lower resolution, and a lower detail setting lightens it further while you game
How Vortexia Hears Your Audio
The OBS Browser Source does not listen to anything: OBS browser sources cannot use a microphone, and Control audio via OBS only handles sound a page plays. The Vortexia dashboard tab on your computer does the listening, to your microphone or your system audio, and sends what it hears to the OBS source many times a second. That is why you keep the dashboard tab open while you stream. Minimised is fine; closed is not.
Troubleshooting Common Issues
- OBS shows “Couldn’t load that page!”: the address is wrong or the site is not responding. Check the URL in a normal browser first
- Blank or outdated page: open Properties and press Refresh cache of current page
- Flickering, black or crashing browser sources: switch hardware acceleration off to test, restart OBS, and switch it back on if nothing changed
- Choppy visuals with high CPU use: check that browser source hardware acceleration is on
- The page restarts on every scene change: untick Shutdown source when not visible and Refresh browser when scene becomes active
- Vortexia not reacting to sound: check the dashboard tab is still open with audio switched on, and that Listening to is set to where your sound comes from
Custom CSS and Transparency
Custom CSS only changes how a page is styled. The default already makes the page background transparent, which is why an alert box shows only its own graphics. It cannot cut out anything a page actively draws: Vortexia paints every pixel of a solid frame, so to lay it over a game, set the source’s Blending Mode to Screen (right-click the source) on a look with dark space, or keep it behind your camera and game.
Checking this is a real thing before you paste a URL into your broadcast software is fair. Vortexia is listed on the OBS Project’s own resource directory:
- Vortexia on the OBS Project resource directory — The listing on obsproject.com, published by the Vortexia account.