Skip to content
Spellkit

How In-Browser Screen Recording Actually Works

Two browser APIs — getDisplayMedia for capture and MediaRecorder for encoding — turn a web page into a screen recorder with no install and no upload.

A web page can't see your screen. That's the starting point: JavaScript has no way to read pixels outside its own tab, and no permission prompt can change that in the background. What it can do is ask the browser to run a capture on its behalf — and the way that handoff works explains both why browser screen recording is safe and where its limits come from.

getDisplayMedia: permission by picker, not by checkbox

Screen capture starts with a call to getDisplayMedia(), and the design is deliberately restrictive. The call must happen in response to a user gesture (a click — a page can't trigger it on load), and it opens a picker drawn by the browser itself, outside the page's reach. The page cannot list your screens or windows, cannot preselect one, and cannot see anything until you explicitly choose a screen, window, or tab in that picker.

What the page gets back is a MediaStream — a live feed of the chosen surface, and only that surface. The browser shows a persistent "sharing" indicator while capture runs, and the stop button in that indicator kills the stream regardless of what the page wants. The permission model is the whole security story: capture is scoped, visible, and revocable at the OS/browser level, not the page level.

MediaRecorder: encoding without touching pixels

A live stream isn't a file. Turning it into one is MediaRecorder's job: it takes the stream, feeds it to the browser's built-in video encoder (hardware-accelerated where available), and emits compressed chunks as Blob objects. The page never handles raw frames — it just concatenates chunks and offers the result as a download. A one-hour recording doesn't sit in memory as pixels; it accumulates as already-compressed video.

WebM/VP9 vs MP4

Which file you end up with depends on the browser. Chrome and Firefox record to WebM, typically with VP8 or VP9 video and Opus audio — royalty-free codecs the browsers can ship without licensing fees, which is exactly why WebM is the default. Safari records to MP4 with H.264. The practical difference: MP4/H.264 opens in essentially every player and editor, while WebM support outside browsers is spottier — some editing software still wants a conversion first.

There's also a quirk worth knowing: MediaRecorder writes the file as a live stream, so it doesn't know the duration up front. Some recordings end up with missing duration metadata or no seek index, which is why a freshly recorded WebM sometimes shows no timeline scrubber in a player until it's been remuxed. The video data is fine — it's the container bookkeeping that's incomplete.

Why there's no install and no upload

Every step above happens locally: screen → browser's capture pipeline → encoder → Blob → download. No frame ever crosses the network, which has two consequences. First, privacy — a recording of your screen (which might include email, passwords being typed, private documents) never touches a server. Second, no server-imposed limits: recording length is bounded by your disk, not by an upload quota, and there's no queue or processing wait after you stop.

The sharp edges

The limits are real, and most of them trace back to the operating system rather than the browser:

  • System audio is inconsistent. Capturing what your speakers are playing depends on the OS exposing it. Chrome can offer tab audio when you share a tab, and system audio on some platforms — but macOS doesn't provide browsers a system-audio capture path at all. Microphone audio is a separate stream (getUserMedia) that has to be mixed in explicitly.
  • Cursor capture varies. The spec defines hints for whether the cursor should appear, but actual behavior differs across browsers and platforms — some always draw it, some only on movement.
  • Protected content stays black. DRM-protected video (streaming services) is composited outside the capturable surface on most systems, so it records as a black rectangle by design.
  • Frame rate isn't guaranteed. Capture competes with everything else the machine is doing; the browser drops frames under load rather than stalling the system.

For recording a bug repro, a demo, or a how-to clip, those trade-offs are usually irrelevant — and the zero-setup, zero-upload property is exactly what you want. Spellkit's screen recorder is a thin interface over these two APIs: pick a surface, record, download the file, and nothing leaves your machine.