How to Record a Web Browser with OBS

Direct answer: In OBS Studio, use Browser Source when you want OBS to render a URL inside your scene, Window Capture when you need to record an already-open browser window, or Display Capture when the entire monitor should be recorded. On macOS 13 and later, use macOS Screen Capture for window or application capture. Add the source to a scene, confirm framing and audio in the preview and mixer, select a resilient recording format such as MKV, then make a short test recording before the real session.

This guide covers website recording, browser audio, platform differences, privacy, quality, troubleshooting, and an API alternative when you need a still screenshot instead of a video.

Choose the right OBS capture method

Method	Use it when	What is recorded	Main caveat
Browser Source	You want a URL rendered as part of an OBS scene	The embedded page at the viewport size you configure	It does not show the controls, tabs, extensions, or other chrome of an already-open browser window. Site behavior can differ from a normal browser.
Window Capture	You need to show one existing browser window	One selected window	Availability and behavior depend on the operating system. On macOS 13 or newer, use macOS Screen Capture.
Display Capture	You need the complete desktop or window capture is unsuitable	Everything visible on one monitor	Notifications, other windows, and private information on that display can enter the recording.

OBS documents Browser Source as an embedded Chromium-based browser and describes it as one of its most versatile sources. Its Sources Guide and Display Capture documentation explain the distinctions between source types.

Record a website with Browser Source

1. Create a scene. Open OBS, select an existing scene or click + in the Scenes panel.
2. Add Browser Source. In Sources, click + → Browser. Name the source so you can identify it later.
3. Enter the URL. Paste the page address. Browser Source can also load a local file.
4. Set the viewport. The documented default is 800 × 600. Set width and height to match your composition or the page layout you need to demonstrate.
5. Choose frame rate if needed. Custom FPS is optional; when enabled, the default is 30 FPS. Higher frame rates increase rendering and encoding work.
6. Check page options. Browser Source includes custom CSS, refresh controls, and page permissions. Keep permissions limited to what the page requires. The default CSS makes the background transparent, removes body margins, and hides overflow.
7. Position and scale it. Select the source in the preview and use the red handles, or open the transform controls for exact placement.
8. Reload before recording. Use the source’s refresh option when you need a clean page state. Confirm that the page has finished loading and that required fonts, images, and animations appear.

Browser Source is useful for a controlled layout: for example, a web demo beside a camera feed or presentation overlay. It is not a guarantee that every site will behave exactly as it does in Chrome, Firefox, or Safari; OBS recommends treating ordinary browser-compatible content as supported within reason.

Capture an existing browser window

1. Open the page in your browser and resize the window to the dimensions you want viewers to see.
2. In OBS, choose a scene and click + in Sources.
3. Choose Window Capture on supported Windows and Linux setups.
4. Select the browser window from the window list. If several windows have similar names, close unrelated tabs or rename the window so it is easy to identify.
5. Inspect the preview. Crop or transform the source if you need to remove borders.
6. Decide whether to capture the cursor. Enable it when pointer movement teaches the task; disable it when the pointer would distract from the page.

Window Capture records one window, so desktop notifications and unrelated applications stay out of the frame when the source works correctly. If the browser minimizes, changes rendering mode, or shows a black frame, use the troubleshooting section below or switch to macOS Screen Capture, Browser Source, or Display Capture as appropriate.

Record the whole desktop with Display Capture

1. Add Display Capture to the scene.
2. Select the monitor to record.
3. Arrange the browser and any other windows that must appear.
4. Hide notifications and close private documents before pressing Record.
5. Check the preview for the correct monitor, scale, cursor setting, and visible edges.

Display Capture is the broadest option. It is appropriate for a workflow that moves between browser windows, terminals, and other desktop applications. It also records anything else visible on that display, so Window Capture is usually a better privacy choice when one browser window contains everything required. On macOS 13 and later, OBS directs users to macOS Screen Capture instead of the older Display Capture source; its macOS Screen Capture guide covers Window and Application methods.

Configure browser audio

Video capture and audio capture are separate checks. OBS’s Quick Start Guide says desktop audio and microphone capture are enabled by default in the standard setup, but the active devices and tracks still need verification.

1. Play a browser video or sound while watching the Audio Mixer meters.
2. If the desktop meter does not move, open Settings → Audio and select the intended desktop device manually.
3. For narration, select the correct microphone and watch for clipping or a constantly active meter.
4. Use the mixer controls to mute sources you do not want in the recording.
5. Confirm the output track in Settings → Output → Recording if your editor expects separate tracks.
6. Make a short recording and play it back. A moving meter alone does not prove that the correct device or track was written to the file.

Browser Source audio may need separate routing depending on your OBS version and operating system. If the page is visible but silent, test the browser’s output device, OBS’s desktop audio device, and the selected recording tracks one at a time.

Recording format, quality, and frame rate

1. Open Settings → Output → Recording.
2. Choose a recording path with enough free disk space.
3. Use MKV for the recording container. OBS recommends it because an interrupted stop does not corrupt the whole file.
4. When an MP4 file is required, use File → Remux Recordings after recording.
5. Choose a quality and encoder that your computer can sustain. Higher quality, resolution, frame rate, or a separate encoder can consume additional resources.
6. Match the canvas and output resolution to the destination. A readable web demonstration usually benefits more from a correctly sized browser viewport and legible text than from an unnecessarily high frame rate.

OBS notes that 60 FPS can be more demanding than 30 FPS. There is no universal best resolution, frame rate, or encoder: select values that fit the delivery target and hardware, then verify them with a short test.

A reliable pre-recording checklist

• The intended scene and source are selected.
• The correct page, window, or monitor appears in the preview.
• The browser zoom and viewport make text readable.
• Cursor visibility matches the teaching goal.
• Browser audio and microphone meters show the intended devices.
• Notifications, passwords, private tabs, and unrelated windows are hidden.
• The recording path has free space.
• MKV is selected if you need resilience to an unclean stop.
• A short test has been recorded and replayed.

Troubleshooting common OBS browser recording problems

Symptom	Likely cause	Fix
Browser Source is blank	The URL failed to load, the page requires unsupported browser behavior, or the source is still loading	Reload the source, confirm the URL in a normal browser, wait for the page to finish loading, and try Window Capture if you need the regular browser environment.
Window Capture shows a black frame	Platform or browser rendering restrictions	Try macOS Screen Capture on macOS 13+, change the browser’s graphics setting if appropriate, or use Display Capture. Recheck the selected window.
Only part of the page appears	Source transform or viewport dimensions do not match the scene	Reset the transform, set explicit Browser Source width and height, and resize the scene or source together.
Browser audio is missing	Wrong desktop device, muted mixer source, or unselected recording track	Play audio while watching meters, choose the device in Settings → Audio, unmute the source, and verify the recording track.
Audio is delayed	Different devices or processing paths have different latency	Use the Advanced Audio Properties sync offset controls and confirm the result with a short recording.
Cursor is missing or distracting	Capture-source cursor setting does not match the goal	Toggle cursor capture on the source and test the result.
Recording stops or frames drop	Encoder, resolution, FPS, or other sources exceed available resources	Lower output resolution or FPS, reduce source complexity, close unnecessary applications, or select a less demanding encoder.
MP4 is unusable after a crash	The container was not finalized	Record to MKV and remux to MP4 after a successful stop.
Desktop notifications appear	Display Capture includes everything on the monitor	Use Window Capture or Browser Source, enable Do Not Disturb, and inspect the preview before recording.

Performance, reliability, and privacy notes

• Browser complexity matters. Animated pages, video, WebGL, large images, and multiple Browser Sources increase rendering work.
• Test the complete scene. A source that works alone may drop frames when combined with cameras, overlays, filters, and high-resolution output.
• Keep a recovery path. MKV protects the recording file if OBS or the computer cannot stop cleanly; remux only after the recording is safe.
• Inspect the frame. Display Capture can include passwords, messages, notifications, or other private windows.
• Use least privilege. Browser Source page permissions should be no broader than the page requires.
• Verify playback. Check the saved file, not only the live preview and mixer meters.

Or skip the browser setup

If you need a still image of a web page rather than a narrated screen recording, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It handles the capture browser for you and supports full-page shots, CSS-selector element capture, custom CSS and JavaScript, waits, device presets, dark mode, blocking controls, cookies, headers, geolocation, caching, asynchronous jobs, bulk capture, signed links, and PDF options.

Read the ScreenshotNeo API documentation, then run one of these calls:

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}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing result. An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Can OBS record only a web page without browser tabs?

Yes. Use Browser Source for a clean embedded page, or Window Capture and crop the browser window if you need the page from an existing session.

Should I use Window Capture or Display Capture?

Use Window Capture for one browser window and Display Capture for the entire monitor. Choose based on what must appear and what must stay private.

Why does macOS show different capture sources?

On macOS 13 and later, OBS uses macOS Screen Capture for window and application capture. Menu names and availability depend on your macOS and OBS versions.

Is MKV required?

No, but OBS recommends MKV because an unclean stop will not corrupt the entire recording. Remux the finished file to MP4 when needed.

How do I record browser audio and my microphone separately?

Configure the desktop audio and microphone devices, assign the desired recording tracks in Output settings, and verify each track in a short playback test.