How to Record Your Screen and Webcam at the Same Time

Turn on your camera, click Screen and pick what to share, and your face appears in a bubble over it. Drag the bubble where you want it, press Record, and download the take as one video.

Jump to the step-by-step guide

Online Screen Recorder

ReadyTurn on your camera, mic or screen below

Choose a recording source

Start a new scene from one source or combine screen and camera.

New scene

Turn on your camera or mic above

Your screen and your face in one recording

Seeing the person behind a tutorial, demo or feedback video makes it feel more personal and easier to follow. recorder.video captures both in the same take: the screen, window or tab you share, plus your webcam and microphone. It combines them into a single video while you record, so there’s no editing step to line the two up afterwards.

This guide explains each layout, how to place and size the camera bubble, how to soften the room behind you, and how to rearrange a take once it’s finished.

How to record your screen with your webcam

Turn on the camera and mic

Allow camera and microphone access when the browser asks. Until you add a screen, the camera preview takes up the whole stage.
Share your screen

Click Screen and share the whole display, a single app window or one browser tab. Your camera shrinks into a bubble on top of the shared picture.
Pick a layout

Open Layout and choose Screen + bubble, Split, Stacked or Presenter. The preview changes at once, so you see the result before recording.
Place the bubble

Drag the bubble to a spot that hides nothing important, or open the Bubble menu to set its position, shape and size.
Record and download

Press R and start talking when the countdown ends, then press R again to finish. Trim the ends and download MP4 or WebM from the scene’s menu.

Layouts for screen and camera

The Layout menu decides how the two pictures share the frame. Each option suits a different kind of video:

recorder.video layouts for screen and webcam recordings
Layout	What viewers see	Good for
Screen + bubble	The screen fills the frame, with your camera in a small overlay	Tutorials, code walkthroughs and bug reports
Split	Screen and camera side by side at equal size	Reaction videos and conversational explainers
Stacked	Screen on top, camera underneath	Tall 9:16 clips for phone feeds
Presenter	Camera in a narrower column on the left, screen on the right	Lessons where you guide people through the content
Camera	Your camera on its own, full frame	An intro or outro between screen takes

To leave your face out, turn the camera off with the Camera button or press C. The shared screen then fills the frame by itself.

Move and resize the camera bubble

Grab the bubble in the preview and drag it anywhere on the stage. Let go near a corner, the middle of an edge or the center, and it snaps neatly into that spot. Keyboard users can Tab to the bubble and nudge it with the arrow keys, holding Shift for bigger steps.

The Bubble button in the toolbar opens finer controls:

Position: nine preset places, from top left to bottom right.
Shape: Rounded, Soft or Circle.
Aspect: Wide, Square or Tall. Circles always stay square.
Size: a slider from 12% to 42% of the frame’s width.

Reset bubble returns it to the default, a medium Soft square toward the bottom right.

Blur the room behind you

A cluttered room pulls attention away from what you’re showing. Open the camera menu and switch Background to Blur to soften everything behind you. Only the camera picture is affected, so the shared screen stays sharp.

Blur is processed on your own computer, so turning it on doesn’t send your camera feed anywhere. It holds up best with good light on your face and a bit of distance between you and the wall. In a small bubble most of the room is cropped away anyway, so blur makes the biggest difference in Split and Presenter, where your camera gets more space.

The toolbar’s Background button is a different setting. It changes the color, gradient or image around the whole frame, not the room behind you.

Framing tips for screen and face videos

Raise the camera to eye level. Prop the laptop on a few books or clip the webcam to the top of your monitor so you aren’t looking down at the lens.
Face the light. A window or lamp in front of you lights your face evenly, while a bright window behind you turns you into a silhouette.
Leave a little headroom. Sit so your eyes are about a third of the way down the bubble, with some space above your head.
Keep the bubble off the action. Choose an empty corner of the screen, away from menus, code and the path your pointer usually takes.
Zoom the content, not the camera. Increase the zoom in your browser or editor before recording so text stays readable on a small screen.
Look into the lens for key points. Glance at the screen while you work, then back at the camera when you speak directly to viewers.

For a vertical video, switch Size to Tall Portrait 9:16 and pick Stacked, which puts the screen above your face in a tall frame.

Rearrange a take after recording

Each take stores the screen, camera and microphone as separate tracks next to the combined video. Select a scene in the Scenes list, choose another layout, and play it back to watch the take rearranged.

The scene panel has its own Camera bubble controls too, so you can move or resize the bubble on a take that’s already done. When it looks right, select Save layout to store the layout, background and audio mix with that scene.

Would you rather rebuild the take in a video editor? Download the Source tracks ZIP from the scene’s menu and you get the screen and camera as two separate files.

Fixing common screen and webcam problems

Only my face shows, not the screen

The layout is probably set to Camera, which shows one picture. Open Layout and choose Screen + bubble or one of the side-by-side options.

My camera doesn’t appear next to the screen

Check that the Camera button is on and that your browser allows this site to use the camera. If another app, such as a video call, is holding the webcam, close it and try again.

The bubble covers part of what I’m showing

Drag it to a quieter spot or shrink it with the Size slider. Split and Presenter avoid overlap entirely by giving each picture its own space.

My face looks dark or grainy

Webcams lose detail quickly in dim rooms. Put a lamp or window in front of you before you change any settings.

Recording questions

How do I record my screen and my face at the same time?

Open recorder.video with your camera on, click Screen and share what you want to show. Your face appears in a bubble over the shared screen, and pressing Record captures both in one take.

Can I make the webcam bubble bigger?

Yes. Open the Bubble menu and drag the Size slider, which goes from 12% to 42% of the frame width. The same menu changes the shape to Rounded, Soft or Circle.

Can I put my webcam beside the screen instead of on top?

Yes. Split gives the screen and camera two equal halves. Presenter puts your camera in a narrower column on the left with the screen next to it.

Can I blur my background in a screen recording?

Yes. Set Background to Blur in the camera menu before you start. The blur applies to the camera only, and your shared screen is left as it is.

Can I switch layouts once a take is finished?

Only partly. You can try a different layout or bubble position on a finished take and select Save layout to keep it with the scene for playback, but the downloaded video keeps the layout you recorded with. For a different arrangement in the final file, record the take again or download the Source tracks ZIP and rearrange the screen and camera in an editor.

Is my screen and webcam recording uploaded?

No. Both sources are captured and combined inside your browser, and each take stays in browser storage until you delete it.

Can I record my screen and webcam on a phone?

Only the camera part. Phone browsers won’t share the screen with a website, so a screen recording with a webcam bubble needs a computer.

What file do I get when I download?

One video with the screen and camera already put together, as MP4 where your browser supports it and WebM otherwise. The Source tracks ZIP holds each part on its own.