Screen Recording in the Browser with MediaRecorder — A Full Guide

To record your screen in a browser, open Zro7 Screen Recorder, click Start, pick the screen / window / tab, and Zro7 captures the stream via getDisplayMedia(), encodes it with the built-in MediaRecorder, and saves a WebM (VP9 / Opus) or MP4 (H.264 / AAC on Safari) file locally.

The APIs behind it

1. navigator.mediaDevices.getDisplayMedia({ video, audio }) — prompts the OS picker; returns a MediaStream.
2. new MediaRecorder(stream, { mimeType }) — starts encoding chunks in the browser.
3. recorder.ondataavailable — pushes each chunk into an array.
4. On stop → new Blob(chunks, { type }) → URL.createObjectURL → download.

System audio (the tricky bit)

• Chrome on Windows/ChromeOS: pick Chrome tab + tick Share audio to capture tab audio.
• Chrome on macOS: system audio isn't exposed by the OS; a workaround is BlackHole or Loopback as a virtual input.
• Firefox: window/screen audio not supported; tab audio via Share audio works.
• Safari: getDisplayMedia works from 13+, no audio capture.

Codec choice

Prefer video/webm;codecs=vp9,opus for size/quality on Chrome/Firefox. Safari records video/mp4;codecs=h264,aac natively. To share with editors that reject WebM, run the file through Zro7 Video Converter for a local MP4 remux — no re-upload.

Long recordings

MediaRecorder produces one Blob at stop. For 30 min+ sessions, pass timeslice (e.g. 10 000 ms) so chunks are collected regularly, and stream them straight into an OPFS file — Zro7 does this on captures over 5 minutes to avoid a big final memory copy.

Steps

1. Open Screen Recorder.
2. Click Start Recording, choose the surface (Screen / Window / Tab).
3. Stop when done; download the .webm / .mp4.
4. Optional: trim with Zro7 Video Trimmer.