How to Record Yourself and Your Screen at Once

Record your webcam and your screen together: layouts (bubble, side by side, presenter), camera and lighting setup, audio, and vertical 9:16 for phones.

Showing your face while you show your screen is the difference between a tutorial and a conversation. Viewers trust a person, they keep watching longer, and the explanation lands. The good news: in 2026 you do not need two recordings and an editor. Browser tools compose camera and screen live, with layouts, and export one video. Here is the setup, the layouts, and the fixes for the usual problems.

What you need

A camera. The laptop webcam is fine for updates; a phone or a USB camera is noticeably better for anything public.
Light in front of you. A window you face, or a lamp behind the laptop. Light from behind turns you into a silhouette.
A microphone. Headset or USB mic. The webcam's built-in mic is the weakest link in most recordings.
A recorder that composes both. macOS and Windows built-ins record the screen only. Use a browser tool such as the online video recorder or a desktop app with overlay support.

Step by step

Frame yourself. Camera at eye level, head and shoulders in frame, a little space above the head. Tidy the background or blur it.
Open the recorder and allow camera and microphone when the browser asks.
Share the screen. Choose a browser tab for the sharpest picture and tab audio, a window for an app, or the whole screen for a multi-app flow.
Choose a layout (next section) and the format: 16:9 for desktop viewing, 9:16 for phones.
Do a 10-second test. Check the audio level meter and that the bubble is not covering the part of the screen you will point at.
Record. Look at the camera when you make a point, at the screen when you click. Pause rather than restart if you need a moment.
Stop, trim, caption, share. Cut the first and last seconds, add captions for muted viewers, and share a link rather than a file.

Layouts and when to use them

Camera bubble. A round camera overlay in a corner, 15–20% of the height. The default for async updates and tutorials because the screen stays the hero. Put it in the corner with the least action.
Side by side. Screen on 70% of the frame, you on 30%. Better when you talk more than you click: teaching, reviews, walkthroughs of a document.
Camera only. For the intro and the outro. Thirty seconds of face, then the screen.
Presenter avatar. An animated presenter stands in for the camera when you do not want to be on screen but want a face. On takeascreen.com the avatar's mouth follows your microphone level, so it reads as talking without a camera.
Mobile 9:16. Screen at the top, you at the bottom, on a background. The layout for Shorts, Reels and TikTok. See vertical screen recording.

Audio: the part people get wrong

Use one microphone for your voice. Do not record the laptop mic and the headset mic at once.
Decide whether you want the screen's audio. If a video plays on the page, share the tab with audio; otherwise turn it off so keyboard clatter and notifications stay out.
Keep your voice around -12 dB peaks; let the tool mix system audio quietly underneath.
Record in a room with soft surfaces. Echo is more distracting than a mediocre mic.

Camera and lighting in two minutes

Eye level. Stack books under the laptop. A camera looking up at you is unflattering and distracting.
Face the light. Daylight from a window is the best free light. Close blinds behind you.
Clean lens. Laptop lenses collect fingerprints.
Steady background. A wall, a bookshelf, or a soft blur. Avoid doors people walk through.
Look at the lens for key sentences. It feels odd and looks right.

Common problems and quick fixes

The bubble covers the thing I am clicking. Move it to the opposite corner before recording, or switch to side by side for that section.
My voice is out of sync with the screen. Use one tool that composes both live; separate recordings drift unless you clap at the start and align the spike.
The camera looks washed out. Lower the screen brightness (it is lighting your face in blue) and put a warm lamp behind the laptop.
The recording stutters. Close other tabs, share a tab instead of the whole screen, and keep the browser window in the foreground.
The file is huge. Trim, then let the library transcode to MP4; a 3-minute 1080p clip should be well under 100 MB.

Keep it short and structured

Long talking-head videos lose people. A structure that works for almost everything:

Ten seconds of face: what this is and why it matters.
The screen part: the steps, narrated as you go.
Ten seconds of face: the result and what to do next.

Two to four minutes total for a tutorial; under 90 seconds for an update.

Do you need to be on camera at all?

Sometimes no. If you are documenting a process others will replay, a clean screen recording with a voice-over can be clearer than a bubble that covers UI. And if you dislike recording yourself, takeascreen.com can make the walkthrough for you: describe it, the agent records the site in its own browser, writes the script and narrates it, optionally with a presenter avatar. Try it for $1 or read screen recording with voice-over.

Frequently asked questions

How do I record my screen and webcam at the same time for free?

Use a browser recorder that composes both, such as the free online video recorder: allow camera and mic, share the screen, pick a layout, record and download the .webm. No install and nothing is uploaded unless you save it.

Can I move the camera bubble during a recording?

In most browser recorders you choose the corner before recording; in editors you can reposition afterwards. Plan the corner based on where the action happens on screen.

What size should the camera bubble be?

About 15–20% of the video height for 16:9. Bigger hides the UI; smaller makes your expressions invisible on phones.

How do I record myself and my screen on iPhone?

iOS records the screen from Control Center but cannot overlay the front camera. Record the screen on the phone and your face separately, or use a desktop browser recorder with the 9:16 layout to produce a phone-sized video.

Next up: how to record your screen for the screen-only basics on every platform.