Introduction to the Screen Recorder Tool

The Screen Recorder tool provides a robust, seamless, and entirely browser-based solution for capturing video of your screen, webcam, or a combination of both. Designed with a privacy-first approach, the tool processes all recording and video conversion directly within your web browser using modern Web APIs. No video data is ever uploaded to a remote server, ensuring that your sensitive information, private meetings, and personal projects remain completely secure on your local device.

Under the hood, this tool relies on a modern front-end stack powered by Alpine.js for reactive UI management. To capture video and audio streams, it interfaces with the HTML5 navigator.mediaDevices API, specifically utilizing getDisplayMedia() for screen capture and getUserMedia() for webcam and microphone feeds. Once the media streams are captured, the MediaRecorder API encodes the data in real-time into a WebM format (utilizing VP9 and Opus codecs). Finally, the tool employs a WebAssembly (Wasm) port of FFmpeg (FFmpeg.wasm) to rapidly multiplex and transcode the final file into a widely compatible MP4 format directly in the browser.

Flexible Capture Modes

The tool provides users with granular control over what is being recorded:

• Screen Only: Captures your entire desktop, a specific application window, or a single browser tab.
• Webcam Only: Records directly from your connected camera, perfect for vlogs or face-to-camera messages.
• Screen + Webcam: A picture-in-picture mode that overlays your webcam feed in the bottom right corner of your screen recording. This is done dynamically using an HTML5 Canvas that composits both video streams in real-time before passing them to the MediaRecorder.

Advanced Audio and Quality Settings

Audio is just as important as video. You can choose to include your Microphone to narrate your recordings or capture System Audio to record the internal sounds of the applications you are showcasing (subject to browser and OS permissions). To accommodate different storage or bandwidth requirements, the tool offers three quality tiers that apply dynamic resolution constraints:

• High (1080p): 1920x1080 resolution.
• Medium (720p): 1280x720 resolution.
• Low (480p): 854x480 resolution.

Practical Worked Example

To understand how the Screen Recorder works in practice, let's look at a typical workflow for a user who wants to record a software tutorial with voiceover and facecam.

Step 1: Configuration

The user accesses the tool and configures the sidebar settings. They select Screen + Webcam under Capture Source. For Audio Options, they enable Include Microphone and disable Include System Audio. They set the Quality to High (1080p).

Step 2: Granting Permissions

Upon clicking "Start Recording," the browser prompts the user for access. First, they allow access to their camera and microphone. Next, a system dialogue appears asking which screen to share. The user selects "Entire Screen" and confirms.

Step 3: Recording and Canvas Compositing

The tool's underlying JavaScript immediately creates an internal HTML Canvas element sized at 1920x1080. It draws the incoming screen stream to fill the canvas, while drawing the webcam stream at a calculated proportional size (25% of canvas width) situated in the bottom-right corner. The canvas.captureStream(30) method retrieves this composited video at 30 frames per second. The user's microphone audio track is seamlessly injected into this composited stream.

Step 4: Transcoding and Download

The user performs their tutorial and clicks "Stop Recording." The MediaRecorder finalizes the WebM blob. Instantly, FFmpeg.wasm takes over, running the equivalent of the command ffmpeg -i input.webm -c copy output.mp4 within the browser's memory sandbox. Within moments, the user is presented with a success screen and a button to download the finalized recording-[timestamp].mp4 file directly to their hard drive.

Frequently Asked Questions

Is my screen recording secure and private?

Yes. The entire recording process, including the final video file creation and MP4 conversion, happens locally in your web browser. We do not transmit, upload, or store your video data on our servers at any point.

Why can't I capture System Audio on Mac?

Due to operating system level security restrictions on macOS, browsers cannot natively capture system-wide audio directly. However, if you choose to record a specific "Browser Tab" rather than the "Entire Screen", Chrome and Edge will allow you to capture the audio emanating from that specific tab by checking the "Share tab audio" box in the permission prompt.

What formats does this tool output?

The internal recording is done using the WebM container. However, to ensure maximum compatibility with video editors and operating systems, the tool utilizes a built-in WebAssembly converter to instantly repackage your video as an MP4 file before you download it.

Why is the video processing taking a long time?

Converting video files is a CPU-intensive task. Because the conversion to MP4 happens inside your browser using WebAssembly, the speed depends heavily on your computer's processing power and the length/quality of the recording. Shorter clips at medium quality will process almost instantly, while a 1-hour 1080p recording may take some time to finalize.

Can I hide the browser's "Sharing your screen" banner?

Yes. Most modern browsers will display a floating bar at the bottom of your screen indicating that a capture is in progress. You can simply click the "Hide" button on this banner, and it will be removed from your final video recording.