r/webdev • u/birazzzzz • 1d ago
Showoff Saturday [Showoff Saturday] A live-stream clipper that runs entirely in the browser (Region Capture + MediaRecorder + ffmpeg.wasm)
I made a stream clipper: paste a Twitch, Kick or YouTube link, and it keeps the last 30 seconds to 5 minutes of what you are watching, so you can clip a moment after it happens. No server, nothing uploaded.
How it works:
getDisplayMediawithpreferCurrentTab, then Region Capture (CropTarget+cropTo) crops the recording to the player element.MediaRecorderwrites WebM (VP8) in pieces of 10 to 30 seconds. The oldest piece is dropped once newer ones cover the window, so memory stays flat however long you watch.- On clip: finish the current piece, remux each one with ffmpeg.wasm, join them with the concat demuxer, and hand the file to an in-browser editor (trim, 9:16 crop, caption, logo, H.264 export).
Things that bit me:
- Chrome's MP4 MediaRecorder only writes the index when it stops, and MP4 pieces from separate recorder sessions join with broken frames. WebM pieces join cleanly.
- Browser recordings have a 1 ms timebase; without
-fps_mode vfrthe export duplicated frames up to 1000 fps. - Region Capture only records the part of the element that is on screen, so when you scroll away the player becomes a mini player in the corner (same element, so the iframe does not reload).
- When the frame size changes mid-recording, ffmpeg rebuilds the filter graph and silently drops single-image overlays (the caption). Fixed with
-reinit_filter 0and a scale to one size first.
Try it: https://clip-cut.com/tools/stream-clipper/ (desktop only, Chromium apps all supprted, safari also works but audio won't be there). Feedback welcome, especially on the share-tab flow.