Record canvas frames to ffmpeg.wasm and export a video file, all in the browser.
Uses ffmpeg.wasm for the heavy lifting, huge props to the devs there.
# If you already have serve, this is all you need:
serve
# Otherwise:
# Install dependencies
yarn
# Run server
yarn startOpen http://localhost:5000/ for a demo page that records a 10-second video of a 2048x2048 canvas animation.
See index.html for the source.
As a result of the ffmpeg.wasm dependency, the requirements are the same as well: WebAssembly Threads and SharedArrayBuffers.
Because the SharedArrayBuffer requirement, the page needs to be served with cross-origin isolation headers. The serve.json config file adds those here.