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