OBS Browser Sources are one of the most powerful and underused features in OBS Studio. They let you embed any web page directly into your stream layout — including real-time visual engines like Vortexia. This guide covers everything from basic setup to advanced performance tuning.
What Is a Browser Source?
A Browser Source in OBS uses Chromium Embedded Framework (CEF) to render a web page inside your scene. Unlike image or video sources, browser sources are live — they can animate, respond to events, and even capture audio. This makes them perfect for dynamic overlays, visual effects, and interactive widgets.
Resolution Settings
Always match your browser source resolution to your OBS canvas. If you're streaming at 1080p, set the browser source to 1920x1080. For 4K streams, use 3840x2160. Mismatched resolutions cause scaling artifacts and unnecessary GPU load.
Performance Optimization
- Enable "Shutdown source when not visible" to free GPU when switching scenes
- Use hardware acceleration in OBS settings for better browser source rendering
- Close unnecessary browser tabs on your system to reduce memory pressure
- If running a demanding game, lower the fractal iteration count in Vortexia's dashboard
- Consider using OBS's "Performance Mode" for the browser source if available
Audio Capture in Browser Sources
OBS Browser Sources can capture audio from the web page. Vortexia uses this to enable audio reactivity — the visuals respond to your stream's audio without needing external audio routing. The key requirement is that the page must have an audio element that's "renderable" (not hidden with display:none).
Troubleshooting Common Issues
- Black screen: Make sure the URL is correct and the page loads in a regular browser first
- No audio reactivity: Check that audio monitoring is enabled in OBS for the browser source
- High CPU usage: Lower the FPS in the browser source properties (30fps is fine for most visuals)
- Visuals not updating: Clear the browser source cache in OBS (right-click > Properties > Refresh cache)
- White flash on load: Add a CSS override with background-color: transparent in the browser source custom CSS
Advanced: Custom CSS Overrides
OBS lets you inject custom CSS into browser sources. This is useful for removing margins, adjusting transparency, or applying effects. For Vortexia, the default styling works out of the box, but you can add custom CSS to match your stream theme.
With the right setup, OBS Browser Sources become the foundation for stunning, interactive stream visuals that set you apart from everyone using static PNG overlays.