rerender
Scrub a 12-minute mp4 at rerender.video →
What is rerender?
rerender pulls any frame of any mp4 in milliseconds. One HTTP Range request, one decode, however deep into the file you seek. H.264, HEVC, VP8, VP9 and AV1 — progressive or fragmented — with typed errors you can branch on.
Browser-only, on fetch and WebCodecs. Zero dependencies — the npm package ships extract and
parseMedia, nothing else; dist/extract.js has no imports at all. parseMedia needs mediabunny,
declared as an optional peer, so you only install it if you use it.
No server, no sidecar index, no ffmpeg.
Install
npm i @bevyl-ai/rerender
import { createFrameExtractor } from '@bevyl-ai/rerender/extract';
const extractor = await createFrameExtractor({ src: url });
await extractor.extract([0, 12.5, 97.25], (frame /* VideoFrame */, requestedSeconds) => {
ctx.drawImage(frame, x, 0, w, h);
frame.close(); // the receiver owns the frame
});
extractor.dispose();
Why it's fast
An mp4's moov box is already a complete index of the file. Most players re-walk it on every seek.
rerender reads it once into typed arrays, so time → bytes is a binary search and a seek stops
costing more the deeper it lands.
Five seeks across a two-hour file: 125 ms, against 15.9 s for @remotion/webcodecs.
Run it yourself.
In production in Bevyl's editor timeline, where it replaced @remotion/webcodecs and
@remotion/media-parser.
Docs
API and architecture · Frame store · Benchmarks · Rendering
License
MIT