How to Capture a Browser in OBS

To place a webpage, alert, chat box, or overlay directly in an OBS scene, add a Browser Source. Enter the page URL, set the source width and height to the viewport you need, and position it in the preview. Use Window Capture when you need one visible browser application window, or Display Capture when you need the entire monitor. On macOS 13 and later, use macOS Screen Capture for display, window, or application capture.

Choose the right OBS source

What you need	Use this source	What it captures
Webpage, alert, chat box, or overlay as a scene element	Browser Source	Renders a URL or local web page inside OBS. It does not show the normal desktop browser chrome.
One browser application window	Window Capture (supported platforms)	The selected window. Other windows overlapping it are excluded.
The whole monitor	Display Capture	Everything visible on the selected display, including other overlapping windows.
Display, window, or application on macOS 13+	macOS Screen Capture	ScreenCaptureKit-based capture; OBS says it can also capture audio on macOS 13 and later.

See the OBS documentation for Browser Source, the Sources Guide, Window Capture, Display Capture, and macOS Screen Capture.

Capture a webpage with Browser Source

Open OBS and select the scene where the page should appear.
In the Sources dock, click + and choose Browser.
Give the source a useful name, then click OK.
Leave Local file disabled to load a URL. Enable it when the page is an HTML file on your computer.
Enter the URL, then set Width and Height to the viewport you want. OBS documents 800 × 600 as the Browser Source default.
Click OK, then drag the source in the preview or use Edit Transform for exact position and size.

Browser Source settings to review

Setting	Use it for
Local file	Loading a local HTML page instead of a web URL.
URL	The page or overlay that CEF should render.
Width / Height	Controlling the embedded webpage viewport. Match the intended scene area to avoid unexpected responsive layouts.
Use custom frame rate / FPS	Choosing a source frame rate when the default is unsuitable. OBS documents 30 FPS as the default when custom frame rate is enabled.
Custom CSS	Changing page appearance. OBS’s documented default CSS makes the background transparent, removes body margins, and hides overflow.
Shutdown source when not visible	Stopping the embedded page while its scene or source is hidden.
Refresh browser source when scene becomes active	Reloading the page when you return to the scene.
Page permissions	Controlling permissions exposed to the embedded page.
Refresh cache of current page	Forcing a fresh load when the source is stale.

Frame, crop, and layer the page

Sources higher in the Sources list appear above sources lower in the list. Put a camera or graphic below the browser page when the page should cover it; move the browser source down when it should sit behind another layer. Drag the bounding box to resize, or open Edit Transform for exact position, scale, and crop values. OBS also documents modifier-key dragging for cropping.

Capture an actual browser window

Open the browser page and resize the browser window to the composition you need.
Add Window Capture from the Sources dock.
Select the browser window from the window list and confirm.
Transform or crop the source in the preview.

Window Capture targets one application window, so windows placed over it do not appear in the capture. This is the better fit when viewers must see the browser’s tabs, address bar, or visible browser controls. OBS lists Windows support and Linux variants; its current macOS implementation is less performant than on other platforms. On macOS 13 or newer, choose macOS Screen Capture instead.

Capture the entire display

Add Display Capture from the Sources dock.
Select the monitor to capture.
Resize or crop the source if the scene uses only part of the display.

Display Capture includes everything visible on that monitor. Close or move private windows before recording, or use Window Capture/Browser Source for a narrower capture. OBS lists Display Capture on Windows and marks the old macOS Display Capture as deprecated on macOS 13 and later; OBS’s documentation says Display Capture is not available on Linux.

macOS 13 and later

Use macOS Screen Capture when you need to capture a display, one window, or visible application windows on macOS 13+. It is based on ScreenCaptureKit, and OBS says it can capture audio on macOS 13 and later. Grant OBS the screen-recording and audio permissions requested by macOS, then select the display or window in the source properties.

Make the browser content fit your scene

Match the viewport: Set Browser Source width and height to the pixel area reserved in the scene. A narrow viewport can trigger a mobile layout.
Use transforms: Right-click the source and open Transform → Edit Transform for precise bounds.
Crop intentionally: Crop away browser chrome or empty page space when using Window Capture.
Check source order: A camera, mask, or graphic above the browser source can hide it.
Keep transparency in mind: Browser Source’s documented default CSS removes body margins and makes the background transparent, which is useful for overlays.

Audio and verification checklist

Confirm the expected source is visible in the preview.
Watch the Audio Mixer meters while the page or browser plays sound.
Open Settings → Audio and select the intended devices when needed.
Check your output resolution, frame rate, encoder, and recording or streaming destination.
Record a short sample and play it back before the real session.

Website audio can behave differently by operating system, source type, browser, and permission state. Treat a short recording on your own setup as the verification step; OBS does not guarantee identical audio behavior for every site and platform. The OBS Quick Start Guide recommends checking meters, output settings, and testing before a first stream or recording.

Troubleshooting

The whole desktop appears instead of the browser

You selected Display Capture. Replace it with Window Capture for one browser window, or Browser Source when only the rendered webpage is needed.

Other windows appear over the browser

That is expected with Display Capture. Use Window Capture to target one window, or Browser Source to render the page independently of the desktop.

OBS appears inside itself in an infinite tunnel

The captured display contains the OBS window. Minimize OBS, move it to another display, use a narrower capture source, or enable the documented hide-OBS option where supported. On macOS, check the hide option in macOS Screen Capture. OBS discusses this feedback-loop problem in its feedback troubleshooting guidance.

Browser Source is blank or stale

Open the Browser Source properties and use Refresh cache of current page. You can also enable Refresh browser source when scene becomes active. These controls address cached or inactive-source states but do not fix every site-specific loading failure.

The page is cropped or does not fill the intended area

Check the Browser Source width and height first, then inspect the source transform and crop values. A viewport mismatch can also trigger a different responsive layout.

The browser source is hidden behind another source

Move it higher in the Sources list. OBS renders higher entries above lower entries.

Audio is missing

Check the Audio Mixer meters, then select the intended devices in Settings → Audio. Make a short test recording. Some site and platform combinations require a different capture source or permission setup.

Window Capture cannot find the browser

Confirm the browser is open and that you chose the correct application window. If you are on macOS 13 or later, switch to macOS Screen Capture. If you only need the page itself, Browser Source avoids desktop-window selection.

Performance and reliability notes

Browser Source uses Chromium Embedded Framework (CEF). Keep the embedded page lightweight when you need several animated overlays.
Use Shutdown source when not visible to avoid keeping hidden pages active, then enable refresh-on-activation if the page must reload when shown.
Use the smallest viewport that meets your design. Larger dimensions and higher frame rates require more rendering work.
For a static webpage, consider a lower custom FPS; OBS documents 30 FPS as the custom-FPS default, not as a universal performance recommendation.
Test the exact scene, page, audio route, and output settings together. A page that loads in a normal browser can still be affected by permissions, cache, responsive breakpoints, or embedded-browser behavior.
CEF flags can be passed through the OBS Studio shortcut for advanced troubleshooting, but OBS presents this as an optional technique rather than routine setup.

Or skip the browser setup

If you need a clean image of a webpage rather than a live browser inside OBS, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and each response reports the result in X-Page-Verdict and X-Billed headers. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Read the ScreenshotNeo API documentation for the complete option set, including full-page and element capture, device presets, retina scale, dark mode, custom CSS and JavaScript, waits, request blocking, headers, cookies, geolocation, caching, signed links, asynchronous jobs, bulk capture, usage data, and PDF controls.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

There is a free plan with 1,000 screenshots a month and no card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Short FAQ

Can Browser Source show a local HTML overlay?

Yes. Enable Local file in the Browser Source properties and select the HTML file.

Which source should I use for a Twitch alert?

Use Browser Source. It renders the alert page directly in the scene and avoids capturing unrelated desktop windows.

Can I capture a browser tab without its address bar?

Use Browser Source for the webpage alone. Window Capture includes the selected browser window, including its visible browser chrome.

Does Display Capture work on Linux?

The OBS Display Capture documentation says Display Capture is not available on Linux. Use the capture sources supplied for your Linux setup, or Browser Source for web content.

Do I need a capture card?

No for the ordinary same-computer browser workflow. OBS’s software sources handle Browser, Window, and Display Capture; a capture card is for external video sources.

Why does my page look different in OBS?

The embedded viewport, permissions, cache, responsive breakpoint, or CEF behavior may differ from your normal browser. Match the viewport, refresh the cache, and test the exact scene before recording.