I built a screen recorder with no backend - and 3 browser bugs nearly beat me

Drábek Jan — Mon, 15 Jun 2026 06:09:52 +0000

A while back I needed to send a teammate a 30-second screen recording. Every tool wanted me to install an app or create an account first. For half a minute of video. So I built the thing I actually wanted: open a tab, hit record, get an MP4. No install, no signup, nothing uploaded unless you choose to share. It's YoRecord, and it runs entirely in the browser.

Capture is the easy part - getDisplayMedia() for the screen, getUserMedia() for webcam+mic, MediaRecorder to encode. The hard part is everything after "stop."

The hard part: a real, edited MP4, client-side - trimming, a draggable webcam overlay, AI subtitles, then a clean MP4 - normally a server job. I used ffmpeg.wasm + WebCodecs so nothing leaves the device.

Bug #1 - export dies when the tab is backgrounded (main-thread captureStream+MediaRecorder gets throttled). Fix: encode in a Web Worker with WebCodecs.

Bug #2 - the webcam froze for ~1s in exports. captureStream(30) is change-driven, not clock-driven: a static screen drops to ~1fps, freezing the moving webcam. Fix: a fixed 30fps loop holding the latest frames.

Bug #3 - audio drifted ~100ms late (WebAudio mixing latency). Fix: measure and compensate (and never use adelay).

...plus an honest "what I didn't do in the browser" section (subtitles use a cloud Whisper API; Chrome/Edge/Firefox desktop only; small free-tier watermark), and a closing yorecord.com try-it link.

DEV Community: Drábek Jan

I built a screen recorder with no backend - and 3 browser bugs nearly beat me