Webcam and screen recording: how to layer them so both work

Recording your webcam and screen together looks like an easy upgrade. Viewers trust a person more than a cursor, and a face gives the narration something to attach to. A face is also the strongest attention magnet in the frame, and it arrives in the same space where the interface lives. A bubble in the wrong corner covers the button the next sentence is about. Placed well, the face makes the video warmer and the screen stays readable. Placed badly, viewers watch the face and miss the click.

This is a guide to the placement, the lighting and the sync problems that decide which of those you get.

Webcam and screen: why a face changes where people look

Faces pull attention quickly. In a screen recording, the viewer keeps switching between two kinds of information: the face, which carries social cues like tone and expression, and the screen, which carries the content. Each switch has a small cost, and the cost adds up over a four-minute video.

So the camera has three jobs. It should be small enough that the screen still dominates. It should sit in an area the viewer’s eye doesn’t need during the action. And it should appear for the parts of the video where a person’s presence changes the message: a welcome, a judgment call, a recommendation, a transition between two sections. Outside those moments, a clean screen with clear zoom and captions usually does more work than a face does.

Placement: find the dead zone in your own interface

Don’t guess where the bubble should go. Find the place your interface doesn’t use during the tutorial. Take a screenshot of a typical flow, then sketch the bubble over it in an image editor, and ask whether the viewer’s eye ever needs that spot.

The defaults are not reliable. Bottom-right is the corner most people reach for, and it’s the worst corner in many web apps, because that’s where they put chat launchers, toast notifications and “unsaved changes” bars. A bubble there can cover the Save button at the exact moment you’re about to click it. Bottom-left, under a sidebar that never comes into the tutorial, is often better. In an editor or a dashboard with a fixed left navigation, the lower part of that sidebar may be empty for the whole walkthrough.

Here’s a concrete check. Take a 1920-by-1080 frame and a bubble about 240 pixels across. Place it over the bottom of a navigation column in a tutorial that only ever uses the main panel: fine. Place the same bubble over the Submit button of a form, which sits at the bottom of the main panel: not fine. The bubble didn’t change. The tutorial did, and the placement that works for one section can fail the next. If the form section is the one where the viewer needs to click, move the camera out, or hide it for that part of the video.

The infographic below shows the same screen with the bubble in two places.

Size, shape and when to hide the camera

Keep the bubble small. For most layouts, a diameter around a sixth of the frame width keeps the face recognizable without letting it dominate. A circular crop reads as a person, while a square crop often cuts the head in a way that feels accidental.

Hide the camera during click-heavy sections, and bring it back for the transitions. The rhythm works better than leaving it on throughout. A video where the face appears at the start, disappears during the build, and returns to introduce the result feels deliberate. A video with a small face in the corner for four minutes feels like someone forgot to turn it off.

Full-screen face segments work for intros and outros, where there’s nothing on the screen to compete with the person. Keep them short. Two or three sentences on camera, then the screen takes over.

Two monitors change the placement problem. If you record one screen while your notes or chat sit on the other, the bubble belongs on the recorded screen, because that’s the only one the viewer sees. Check which display your recorder is capturing before you place anything, because a bubble placed on the wrong screen is invisible to the audience and obvious to you. Keep the notes on the secondary display and the bubble on the primary one, and judge the placement from a test recording rather than from the layout you saw during the session.

Lighting and framing, the part most people skip

The face is small in the frame, so the details that make it readable are small too. The most common mistake is a window behind you. The camera exposes for the bright background, and your face becomes a dark silhouette. Put the light in front of you, or to the side, and let the window be a light source rather than a backdrop. A desk lamp or an LED panel behind the monitor, angled at your face, works well when there’s no good window.

Lens height matters more than most people expect. A laptop camera at the bottom of a screen looks up at the chin, which is unflattering and makes viewers feel they’re being looked down on. Raise the laptop until the lens sits roughly at eye level, using a stack of books if you need to. An external camera on a stand is better still.

Leave headroom above your head, and center the face in the bubble’s crop rather than the frame. Keep the background simple. A bubble is small, so background clutter becomes visual noise at the edges, and a plain wall or a shelf in soft focus reads as intentional.

Audio: one microphone, one timeline

Sound and picture are captured on different clocks. When the camera and the screen are separate recordings, and you combine them in an editor, a small offset can creep in. A quarter-second of drift looks like a badly dubbed film, and viewers stop trusting a narrator whose lips don’t match the words.

Two habits prevent most of this. The first is to use one microphone for all the speech, including any on-camera lines. A laptop microphone in a room sounds like a room, and a voice recorded on one device and a screen recorded on another will rarely line up cleanly. Pick one microphone and keep it in the same position for the whole session.

The second is the clap test. Before each session, clap once in view of the camera, close enough that the sound is sharp. In the editor, line up the sound spike with the frame where your hands meet, and the whole session will stay aligned from there. It takes ten seconds, and it’s the only reliable way to sync two files you recorded separately.

Audio levels and the notification you forgot

Sync isn’t the only audio problem in a combined recording. Level matters, and so does what else gets recorded. Two habits make the difference.

Set the narration to a consistent loudness before you export. Spoken audio varies a lot between a quiet room and a louder one, and a viewer who turns the volume up for a soft voice will be startled when the next system sound arrives at full strength. A loudness target around -16 LUFS is a common starting point for spoken video, and most editors can measure and apply one. Measure the whole session rather than one clip, so the sections stay consistent with each other.

Then turn off the things that talk over you. A chat chime that lands in the middle of a sentence is one of the most common ways a good take becomes unusable, and it’s invisible until you watch the file back with headphones. Turn on Do Not Disturb or the equivalent focus mode for the recording, close the chat app, and check the capture settings for system sounds. Be wary, too, of a speakerphone or a second device playing the product’s own sounds back into the microphone. That feedback loop causes most of the “echo” complaints, and a headset solves it more reliably than any filter.

A session checklist

Run through this before each recording. It takes about two minutes.

1. Clap once in front of the camera, close enough that the sound is sharp, and check the sync at the first click on playback.
2. Record a ten-second bubble test at the size and position you’ll use, and watch it at phone size.
3. Turn on Do Not Disturb and close chat and email.
4. Speak at your normal volume and watch the input meter, aiming for peaks that stay comfortably below the top rather than clipping.
5. Check the light on your face in the camera preview rather than by eye, because the sensor exposes differently from how you see yourself.

Five steps, and each one prevents a problem that would otherwise surface only in the edit.

Three layouts, and when each one fits

There are three layouts that cover most of the work, and each one has a typical failure.

The corner bubble is the most common and the most fragile, because it depends entirely on the placement work above. The split screen is safer for dense interfaces, but it costs you screen real estate, so use it only where the screen content is simple. The full-screen face is for openings and closings. Used in the middle of a tutorial, it turns the video into a talk with occasional screenshots.

When the camera is a separate track

Some tools composite the camera into the screen recording for you. That’s the easiest path, and you should take it if your tool offers it. If it gives you two separate files, do the composite in an editor. Put the screen on the base layer. Put the camera on top, on the same timeline, scaled to the bubble size you tested. Mask it to a circle, and keep the sync from the clap.

Don’t leave the camera at its native size. A full camera frame dropped over a screen is the most common amateur mistake, and it covers far more of the interface than anyone intends.

The case for leaving the face out

The face isn’t required. For a large share of screen recordings, a clean screen with clear zoom on each click and good captions does more than a face could. A person on camera adds warmth and credibility when the message is a judgment, a welcome, or a personal recommendation. For a step-by-step explanation of a dashboard, the screen is the message, and the face is a distraction from it.

So decide the presenter’s role before you set up the camera. If the face will carry a sentence the screen can’t, put it in. If it will only sit in the corner while the screen does the talking, leave it out.

Where the screen earns most of the attention

Whether you add a camera layer in another tool or not, the screen side is the part to get right first. A tight frame on each click, a readable cursor and clear captions do most of the work of a good tutorial. RecordlyPro records in your browser with auto-zoom on every click, so the control you’re pointing at stays large, and you can add the face in a second pass only where it earns its place. The earlier steps of a walkthrough are covered in how to record a software tutorial people actually finish, and the scripting side of a camera-led demo is in a demo video script you can fill in.

Keep reading

Playbook

Async video: stop scheduling the meeting you could record

A hundred random links can do less than five relevant ones. Here's what makes a backlink pass real ranking value in 2026 — and what makes it worthless or worse.

Sofia Meyer October 6, 20262 min read

Playbook

Auto-zoom in screen recordings: what it is and why your demos need it

A hundred random links can do less than five relevant ones. Here's what makes a backlink pass real ranking value in 2026 — and what makes it worthless or worse.

Sofia Meyer October 13, 20262 min read

Playbook

How to choose a screen recorder for product demos in 2026

A hundred random links can do less than five relevant ones. Here's what makes a backlink pass real ranking value in 2026 — and what makes it worthless or worse.

Sofia Meyer October 16, 20262 min read

Explainer

Dofollow vs nofollow in 2026: what still passes value

The link attributes changed, Google's treatment changed, and a lot of advice is out of date. Here's what dofollow, nofollow, sponsored and ugc actually do now.

The Recordly Team October 10, 20262 min read