How Does OBS Browser Source Work? [Complete Guide]

An OBS browser source works by embedding a Chromium browser instance inside OBS Studio that renders a web page as a layer in your scene. You provide a URL, OBS loads it internally, and the rendered page (with all its HTML, CSS, JavaScript) appears as an overlay on your stream.

The Technical Flow

OBS bundles the Chromium Embedded Framework (CEF). When you add a browser source, OBS spawns a headless Chromium instance that loads the URL. The rendered output is captured as a video frame and composited into your scene.

What Browser Sources Support

  • Full HTML5, CSS3, JavaScript (ES2020+)
  • WebGL, Canvas, animations
  • WebSockets for live updates
  • Transparent backgrounds
  • Custom width, height, zoom

Setup in OBS

  1. Click + under Sources in OBS
  2. Choose Browser
  3. Paste URL, set width/height (e.g., 1920x1080)
  4. Click OK — the source appears in your scene

Why It's Reliable

Browser sources are a core OBS feature since v23 (2019). Unlike plugins, they never break on OBS updates.

Start Translating Free →

Also stream IRL

Also supports IRL with Moblin and the OBS audio plugin, including home and cloud OBS setups such as IRL Toolkit.

Use an OBS receiver for IRL Pro, Larix Broadcaster, PRISM Live Mobile or TVU Go. Cloud providers may need to install the plugin on your server.

Moblin · Moblin Browser Source · Cloud OBS · IRL Toolkit · OBS Studio · IRL Pro · Larix Broadcaster · PRISM Live Mobile · TVU Go · MediaMTX

IRL setup guide · Desktop setup guide