DEV Community

Robert
Robert

Posted on

Capturing a browser face swap window in OBS: a step-by-step setup

Most browser camera effects live inside a tab, and a tab is an awkward thing to put on stream. You get the address bar, the page chrome and whatever else the site draws around the video. This walkthrough shows a cleaner pattern: a separate output window that contains only the processed picture, captured in OBS like any other window.

I'm using LiveFaceSwap.io as the example source, because its studio was built around exactly this pattern.

A quick status note first: at the time of writing (October 2026) the live studio on the site is not connected yet, so you can open the camera preview but not run a live session. Everything below is the setup you can prepare today, so the scene is ready when sessions open.

What the source window gives you

The studio redraws your webcam picture in the cloud with a new face, an outfit or one of six art styles, using one model called Live X2.0. For OBS, the useful part is the pop-out output window:

  • It is 960×540.
  • It shows only the AI picture, with no buttons or page layout around it.
  • It stays a normal desktop window, so OBS can capture it with Window Capture.

Because the redrawing happens on cloud servers, the graphics card in your PC does not do the heavy work. There is no client app and no camera driver to install. Opening the camera is free and needs no login.

Step 1: Open the camera and pick a reference

Open the site in Chrome on a Windows or Mac computer and allow camera access. If you have more than one camera (a built-in one and a USB webcam, say), you can switch between them inside the studio.

Then choose what the picture should become. The library has 46 original images with no real people: 30 characters, 10 outfits and 6 styles. You can also upload your own PNG, JPEG or WebP, which is used once it passes a content check.

Step 2: Pop out the clean output window

Open the clean output window from the studio. Leave it at its 960×540 size for now; you will scale it inside OBS rather than by dragging the window, which keeps the capture predictable.

Step 3: Add a Window Capture source

In OBS Studio:

  1. Select (or create) the scene you want, for example Face cam.
  2. In the Sources dock, click + and choose Window Capture.
  3. Name the source something you will recognize later, such as Swap output.
  4. In the properties dialog, open the Window dropdown and pick the browser window that holds the output. The window title helps you tell it apart from your main browser window.
  5. Click OK.

On a Mac, recent OBS versions provide window capture through the macOS Screen Capture source with the method set to a single window. The idea is identical: one source, one window.

Step 4: Crop and scale to your canvas

The output is 960×540, a 16:9 shape, so it scales cleanly onto a 1920×1080 or 1280×720 canvas.

  • Full-screen character: right-click the source, choose Transform, then Fit to screen.
  • Face-cam corner: drag the red handles to size it, then position it in a corner of your gameplay or slides scene.
  • Trim edges: if the capture picks up a thin border, hold Alt (Option on Mac) while dragging an edge to crop instead of scale, or set exact numbers in Transform > Edit Transform.

Now mix it with the rest of your scene: overlays, alerts, a chat box, a webcam frame graphic. The output is just another layer.

Step 5: Record or stream

With the source in place, OBS treats it like any other camera layer. Stream to Twitch or YouTube with your usual settings, or record locally.

If you only need a clip and not a full OBS scene, the studio has its own recorder. Downloads are WebM or MP4 depending on your browser, and every download carries an AI generated mark in the lower-right corner. Recordings stay on your device; camera frames are not saved.

Step 6 (optional): Send the scene into a call

Turn on Start Virtual Camera in the OBS Controls dock and the whole scene becomes a camera that call apps can pick. In Zoom it is Settings > Video; in Google Meet, Settings > Video; in Discord, User Settings > Voice & Video. Choose OBS Virtual Camera in each. Keep the studio output window open while you are on the call, because it is the start of the chain: browser studio, clean window, OBS, call app.

When the picture does not show up

The studio names the problem instead of showing a blank frame. The messages cover a camera that is busy (close other apps using it), access denied or blocked (check the browser's site permissions), no camera found, and no picture for 60 seconds. A dropped connection reconnects once on its own.

On the OBS side, the usual suspects are:

  • The source points at the wrong window after a browser restart. Reopen the source properties and pick the window again.
  • The window is minimized. Restore it; minimized windows usually capture as black.
  • The canvas shows a stretched picture. Reset with Transform > Reset Transform, then fit again.

A few house rules

Every session starts with four checks: you are 18 or older, you have rights to every face you use, and two misuse rules from the Terms. If you bring the swap into a call, let the other people know. Client demos and paid presentations count as commercial use, which is covered by the Business plan.

More details on the webcam side are on the face swap webcam page.

For adults 18+; use only your own face or one you have consent to use.

Top comments (0)