Project
Roulette

Screen Recorder

Record a tab, trim the ends, download the file.

IntermediateWeb appMedia10–20hAI-buildable 5/5no setup

Capture the screen using the browser's own recording APIs, with a countdown, live duration, and a simple trim before download. Everything stays local. The permission flow and correctly stopping tracks when the user ends sharing are the fiddly parts.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Choose a screen, window or tab to record
  • A countdown precedes recording
  • Recording duration displays live
  • Optional microphone audio alongside screen capture
  • Stopping via the browser's own control ends the recording cleanly
  • The result previews before download
  • The file downloads with a sensible name and format

The interesting part

  • Handling the user ending capture from the browser UI rather than yours
  • Combining screen and microphone into one stream
  • Format and codec support varying across browsers

Once it works

  • Add webcam picture-in-picture overlay
  • Add click and keystroke visualisation
  • Add trim before export

Suggested stack

reacttypescripttailwind

Track it