CruxDevCruxDev Tools Prompts
productivity Utility • Zero-Server Privacy • 100% Client-Side

Camera & Screen Recorder

Record your webcam, screen, or both with webcam picture-in-picture — configurable resolution and audio, saved as MP4 or WebM locally. No uploads.

Overview

An in-browser recorder for your webcam, your screen, or both at once with the webcam composited picture-in-picture: choose the source, pick a resolution, decide whether audio is captured, and record with the browser's own MediaRecorder. The result plays back in the page and downloads as MP4 where the browser supports it, WebM otherwise. The recording lives entirely in your browser's memory until you download it — there is no upload step and no server component.

How It Works

Pick Webcam, Screen Capture, or Both (PiP). Set a camera resolution preset — 480p, 720p or 1080p — and toggle Include audio on or off, then press Start Recording. Your browser asks for the corresponding permission — camera and microphone for webcam, or a screen, window, or tab choice for screen capture — and the live feed shows in the preview while an elapsed timer counts. Press Stop Recording to finish; the recorded video appears in a playback player with a Download button beneath it, labelled with the actual container (MP4 or WebM) your browser produced. The source, resolution and audio settings cannot be changed mid-recording; stop first, then adjust.

Step-by-Step Usage Guide

  1. Choose Webcam, Screen Capture, or Both (PiP), then set resolution and audio.
  2. Grant the browser permission prompt for camera and microphone, or pick a screen or tab.
  3. Record, watching the live preview and elapsed timer, then press Stop Recording.
  4. Preview the take and download the MP4 or WebM file.

Technical Specifications & Standards

The webcam path calls navigator.mediaDevices.getUserMedia with your resolution preset applied as ideal width/height constraints — the browser negotiates the closest supported size, so 1080p on a 720p camera yields 720p rather than an error. The screen path calls getDisplayMedia, which is why screen recording also captures system or tab audio when you grant it in the browser's share dialog. Both (PiP) is real compositing, not a gimmick: the screen capture and the webcam are drawn onto a canvas every animation frame — webcam in a bordered quarter-size box in the bottom-right corner — and the canvas's 30 fps capture stream, plus the screen's audio track, is what gets recorded. Container selection is explicit: the tool probes MediaRecorder.isTypeSupported in order for MP4 (H.264+AAC), then WebM VP9, VP8 and plain WebM, and records with the first your browser actually supports, naming the download file accordingly; the same preference order is unit-tested. Stopping the recorder stops every track, which turns off the camera indicator light immediately. Recordings exist only in the current tab's memory: a refresh discards an undownloaded take, and nothing is stored anywhere by the tool.

Targeted Use Cases

  • Recording a bug reproduction of your screen with your webcam reaction in the corner, ready to attach to an issue.
  • Practising a presentation while watching your own playback.
  • Capturing a demo clip for documentation without installing software.
  • Recording a lesson segment with the webcam on a machine you control.

Notes & Gotchas

  • Download the take before refreshing — recordings are not saved by the tool.
  • Close other tabs before screen recording so notifications and noise stay out of frame.
  • Check the browser's share dialog carefully: it decides which screen or window is captured, including audio.
  • Match the resolution preset to the destination — 480p for quick issue clips, 1080p for tutorials.

Frequently Asked Questions

Where do my recordings go?

Nowhere automatically. The video is a Blob held in the tab's memory with a preview player and a download link. If you refresh or close the tab without downloading, the take is gone.

What format is the recording?

MP4 when your browser's MediaRecorder supports it (Safari, and Chromium builds with H.264 enabled); otherwise WebM with VP9 or VP8. The download button always names the container you actually got, and there is no transcoding — convert afterwards with a local tool if you need the other one.

Can I record my webcam and my screen at the same time?

Yes. The Both (PiP) mode captures the screen and webcam together and composites the webcam into a bordered box in the bottom-right corner of the frame on a 30 fps canvas, recording that canvas with the screen's audio.

Can I change the resolution?

Webcam resolution is configurable — 480p, 720p or 1080p presets requested as ideal constraints before recording starts. The browser honours the closest size its camera supports, and screen capture resolution follows the shared surface rather than a preset.