Webcam + Screen Recorder
Record your screen with a small webcam feed overlaid in a corner. Great for video tutorials, walkthroughs, and creating content where you want to show your reactions while demonstrating something on screen.
Webcam + Screen Recorder
Record screen with webcam picture-in-picture
Recorded video = screen capture with small webcam feed overlaid in a corner (picture-in-picture). Audio optional (system + microphone). Output MP4, downloadable after recording.
How Webcam Overlay Recording Works
This tool combines two MediaRecorder streams into a single picture-in-picture video:
**Stream 1 (primary)**: Screen or tab capture via `getDisplayMedia()` - the main recording area.
**Stream 2 (pip)**: Webcam capture via `getUserMedia({ video: true, audio: false })` - the small overlay feed.
**Picture-in-pipeline**: 1. Both streams are captured simultaneously 2. The webcam video frame is drawn onto a canvas positioned in a corner of the screen canvas 3. The combined canvas is encoded by MediaRecorder as a single MP4 video 4. The webcam overlay position and size are preserved in the output
**Overlay positioning**: The webcam feed can be moved to any corner (top-left, top-right, bottom-left, bottom-right) and resized using handle controls. The position is saved per-session and remembered if the user returns.
**Audio handling**: The screen/audio capture and webcam microphone can be independently selected (system audio, microphone, or neither for each). The final output has one mixed audio track.
**Performance**: Picture-in-picture adds ~10-20% to the processing load. On most modern devices (2020+), this is negligible. On older devices, the recording may impact frame rate slightly.
- 100% private - all recording client-side
- Webcam overlay position saved per-session
- No watermark on output
- MP4 output compatible with all players
- Audio mix of screen capture + webcam microphone
Worked Example
Example: Creating a 3-minute tutorial video with webcam reactions:
Settings: Browser tab recording, system audio + microphone, webcam overlay enabled (bottom-right, 15% width of tab height)
- 3-second countdown begins - Tutorial runs for 3 minutes with webcam face visible in bottom-right corner - Paused once for 30 seconds to skip a step, then resumed - Final video: 2 minutes 30 seconds of content (30s pause excluded) - Estimated file size: ~250-400 MB (720p with video+audio+webcam overlay) - After stopping, preview with webcam overlay visible - Download MP4 saves the video with your face reactions embedded
**Best practices for webcam recordings**: - Ensure good lighting on your face for clear video quality - Test microphone levels before starting - Position the overlay so it doesn't cover important on-screen content - For regular tutorials, consider a dedicated webcam (higher quality than built-in laptop camera) - The overlay can be disabled in future recordings if not needed
Use Cases
- Video tutorials: Show reactions/demonstrations side-by-side - Course creation: Instructor presence with screen content - Gaming highlights: Facecam reactions during gameplay recording - Remote presentations: Personal engagement with screen sharing - Social media content: TikTok/Reels/Shorts with facecam overlay - Remote interviews: Built-in video conferencing alternative
Related Calculators
Percentage Calculator
Find percentages, calculate % of a value, and percentage increase/decrease.
Open calculator →Screen Recorder
Record browser tab, entire screen, or window with audio; pause/resume; MP4 download, no time limit, no watermark.
Open calculator →GIF Maker
Convert screen area recording to animated GIF, with frame rate and size limits.
Open calculator →Voice Recorder
Record audio from your microphone and download it as an audio file.
Open calculator →Frequently Asked Questions
Do I need to install any software for webcam overlay recording?
No. This is a browser-native tool using the MediaRecorder API. No download or installation required.
Can I resize or move the webcam overlay during recording?
The overlay position is set at the start of recording and is preserved throughout. If you need to change the position, stop the recording, adjust the overlay, and record again.
Will the webcam overlay reduce video quality significantly?
Minimal. The overlay adds ~10-20% to the file size and a slight processing overhead, but the main video quality (resolution, bitrate) is determined by your recording area and settings, not the overlay.
Looking for a different calculator?
CalculatorPlus has free tools across finance, construction, math, health and more — each one showing the formula and a worked example.