Screen Recorder Studio | Free offline Video Capture & Trimmer

Screen Recorder Studio | Free offline Video Capture & Trimmer

Professional offline screen recorder by Prime Tool Hub. Capture your screen, microphone, system audio, and webcam locally. Includes a built-in video trimmer.

Last updated: June 2026

🔴 How Browser-Based Screen Recording Actually Works

Most people assume screen recording requires a desktop app. OBS, Camtasia, Bandicam — all installed software that hooks into the OS at the driver level. Browser-based recording works completely differently. It uses the MediaDevices.getDisplayMedia() API, a W3C standard that lets a web page request access to your screen stream directly through the browser sandbox. No installation. No driver. No admin rights. MDN’s getDisplayMedia documentation covers the full spec — it’s supported in Chrome 72+, Edge 79+, and Firefox 66+.

When you click Start Recording here, the browser opens a native OS picker dialog — the same system-level UI you see for file uploads, but for display surfaces. You choose an Entire Screen, a specific application Window, or a Browser Tab. The browser packages that visual stream into a MediaStream object, which then feeds into a MediaRecorder. Every second (1000ms interval), a data chunk is pushed into an array. When you click Stop, those chunks merge into a single Blob and a temporary blob:// URL is created for download. The video never touches a server. It lives in your browser’s RAM from start to finish.

Audio capture works in parallel. System audio comes from the displayMedia request itself — when you tick Capture System Audio, the browser asks the OS to include the audio track from whichever display surface you picked. Microphone audio comes from a separate getUserMedia() call with echoCancellation: true and noiseSuppression: true applied. Both audio tracks get merged into the same MediaStream alongside the video track before MediaRecorder starts. This is why you need headphones when recording both — without them, the mic picks up system audio output and you get an echo loop.

🟡 The FFmpeg WASM Trimmer — What’s Happening Inside Your Browser

The built-in trimmer is not a simple JavaScript slice operation. It runs FFmpeg — the same command-line video processing engine used in professional broadcast workflows — compiled to WebAssembly (WASM). On first use, the browser downloads a ~30MB FFmpeg core binary from a CDN. After that, the entire encode-decode-remux pipeline runs locally inside a WASM sandbox. No video data leaves your machine at any point during trimming.

Two export modes behave very differently. WebM stream copy (-c copy) is extremely fast — FFmpeg just cuts the container at keyframe boundaries without decoding a single frame. The downside is accuracy; cuts can only land on I-frames, so the trim point might be off by half a second. MP4 H.264 export uses full re-encoding with libx264 -preset ultrafast -pix_fmt yuv420p. This is slower, but the output plays in every media player without codec issues — VLC, Windows Media Player, QuickTime, phones. If your raw WebM won’t open in a standard player, use the MP4 export path. The yuv420p pixel format flag specifically solves the green-tint or black-screen playback bug that appears when chroma subsampling doesn’t match what the player expects.

🟢 Webcam PiP — Positioning and Stream Handling

The Picture-in-Picture webcam works through a second simultaneous getUserMedia() stream. When you tick Webcam PiP Overlay, the tool requests {video: true, audio: false} — audio is explicitly excluded from the webcam stream to avoid duplicating the mic input. The webcam video feeds into a circular <video> element positioned absolutely over the screen preview using CSS. You pick the corner from the sidebar: top-left, top-right, bottom-left, or bottom-right. The position changes class on the element (pth-pip-tl, pth-pip-tr, etc.) instantly via JavaScript — no re-initialisation needed.

One important note: the webcam overlay you see in the browser preview is a visual representation. The actual video file captured by MediaRecorder records only the screen stream — the webcam circle is not composited into the recording file itself. To burn the webcam into the final video, you’d need canvas-based compositing, which is a heavier operation. For most tutorial use cases — where the webcam is shown on-screen as part of the presenter’s actual screen layout — simply having the webcam open in a browser window while recording the full screen achieves the same result naturally. Our Video Merger & Trimmer tool can combine separate screen and webcam recordings if you need true compositing. You can also read more about audio and video sync techniques in our complete screen capture guide.

🟢 Resolution, Format, and What Actually Affects File Size

The Resolution setting sends a width: {ideal: W}, height: {ideal: H} constraint to getDisplayMedia(). It’s a hint, not a guarantee. If your monitor’s native resolution is 1920×1080, requesting 4K UHD still caps at the display’s actual output. The browser honours the constraint only up to the physical display limit. Frame rate defaults to 30fps via frameRate: {ideal: 30}.

Format choice directly controls the MediaRecorder MIME type. WebM VP9 produces the smallest files for a given quality — typically 3–8 MB per minute for a 1080p screen recording of mostly static content like code or documents. Fast motion (games, animations) will be larger. MP4 H.264 from the trimmer is re-encoded, so file size depends on the encoding parameters. With -preset ultrafast, files are slightly larger than a careful VP9 encode but process in seconds rather than minutes. Key points:

• 🔵 WebM VP9 — best for sharing on the web, Google Drive, or re-uploading to YouTube. Smallest file, Chrome/Firefox native support.
• 🟠 MP4 H.264 (from trimmer) — best for sending to clients, playing on Windows/Mac without extra codecs, or importing into video editors like DaVinci Resolve or Premiere.
• 🟣 Session History — every recording stays accessible as a Blob URL until you close or refresh the tab. The sidebar shows take number, duration, and size so you can compare multiple takes and download the best one.

🟡 Privacy and Security — What the Tool Can and Cannot Access

Browser screen capture is sandboxed at multiple levels. The getDisplayMedia() API requires explicit user gesture — a button click — before the OS picker opens. The browser cannot call it silently or on page load. The OS picker is drawn by the operating system itself, not by any web page code, which means a malicious page cannot spoof or intercept it. You choose exactly what to share.

This tool has zero network requests for your video data. The JavaScript source is hosted on this page. FFmpeg WASM loads from a CDN once and cached. After that, trim operations run offline. You can test this yourself: open DevTools → Network tab → start a recording → stop and trim. You’ll see zero POST requests, zero file uploads, zero WebSocket connections carrying your video. The Blob URL created after recording is a local browser memory reference — it’s revoked and freed when you navigate away or click New Recording.

One real security consideration: system audio capture in Chrome on Windows captures the audio of every application, not just the one you’re recording. If you have a notification sound, a private call, or sensitive audio in another app during recording, it will be included. Plan your recording environment accordingly. Muting all non-essential applications or using a dedicated browser profile for recording sessions is good practice.