How to Record Your Screen and Webcam Together (In the Browser)
A face in the corner changes how a screen recording lands. The same walkthrough with a small webcam bubble feels like a person showing you something rather than software narrating at you — which is why every serious demo tool grew one. You don't need OBS scenes or a virtual camera for this: recording screen and webcam together, in sync, works straight from a browser tab.
How simultaneous capture works
The browser records your screen and camera as separate streams (mic as a third), each with its own clock, and the tool keeps them aligned. The good implementations record them separately rather than compositing live — that's what lets you move or resize the camera bubble after recording, when you discover it's covering the exact button you clicked.
Step by step in DemoReel
- Open DemoReel and toggle Camera and Microphone on under the record button. The browser asks permission for each — that's the sandbox working, not a bug.
- Record your demo. The camera captures alongside the screen the whole time; a countdown gives you a beat before it starts.
- In the editor, the webcam appears as a bubble over the footage. Drag it anywhere, resize it, choose circle or rounded-rectangle, and mirror it if your camera feed reads backwards.
- The bubble stays clear of your zooms — screen zooms crop the screen content, while the bubble rides above the frame.
- Export: one MP4 with the bubble composited in, screen audio, mic audio and camera all in sync.
Bubble craft — small choices that read professional
- Corner it. Bottom-left or bottom-right, clear of your app's own UI chrome. Move it mid-video only if it starts covering the action (in DemoReel just drag it — the change is instant in preview).
- Keep it small. 20–25% of frame height. The screen is the star; you're the presence, not the content.
- Light your face, not your ceiling. A window or lamp in front of you beats any camera setting.
- Circle for talking-head energy, rounded rectangle for formality. Both are one click.
- Camera-shy or bad hair day? Record with the camera on anyway — you can switch the bubble off in the editor and the video exports clean. The reverse isn't possible.
Sync worries, answered
The classic fear is lips drifting from audio. Separate-stream recorders handle this by tracking each stream's start offset and re-aligning continuously during playback and export — in DemoReel the screen is the master clock and camera/mic snap to it, so drift self-corrects rather than accumulating. If you narrate over a paused screen for a minute, everything still lines up at export.
When you'd want more than a bubble
Side-by-side layouts, green-screen keying, or camera-only cutaways are video-editor territory (or OBS for live work). For the demo, tutorial and bug-report format — the overwhelming majority of screen+face videos — the bubble is the right tool, and the browser does it without an install.