spite/ccapture.js
Ccapture.js
ccapture.js is a JavaScript library for recording HTML5 canvas animations at a fixed framerate. It exports captured animation sequences as WebM movie files, animated GIFs, or archives of individual PNG and JPEG images.
The library ensures smooth video output by hooking into the browser's animation loop to decouple rendering from real time. This deterministic frame pacing allows for high-resolution recording without frame drops, regardless of rendering complexity or hardware performance.
The tool manages the process by extracting raw pixel data from the canvas into memory buffers before assembling the final sequence. This enables the production of frame-perfect image sequences and compressed video streams directly within the browser.
Features
- Canvas Video Recording - Records HTML5 canvas animations at a fixed framerate and exports them as video files.
- Frame Rate Regulators - Decouples the rendering clock from real time to ensure a consistent frame rate regardless of hardware performance.
- Animation Frame Exporters - A recorder that saves each frame of a canvas animation as an individual PNG or JPEG image.
- Animation Loop Overrides - Hooks into the browser's animation loop to ensure every frame is captured regardless of rendering lag.
- Canvas Frame Captures - Captures complex web animations from canvas elements without frame drops by regulating the render loop.
- Animated GIF Creators - Provides a utility to capture canvas animation sequences and save them as animated GIF files.
- Animation Frame Sequence Export - Saves sequential canvas frames as individual PNG or JPEG images for professional video editing.
- Animated Recording Exporters - Exports captured animation sequences as WebM movies, animated GIFs, or image archives.
- Browser-Based Media Production - Generates WebM movies and animated GIFs from browser-based visuals for professional use.
- Video Assembly - Provides a mechanism to assemble captured image sequences into final video files directly in the browser.
- Browser-Native Encoders - Utilizes browser-native media recording APIs to encode canvas frames into compressed WebM video streams.
- Animation Frame Buffers - Uses internal memory buffers to queue animation frames and reduce garbage collection overhead during capture.
- Image Processing Utilities - Capture animations created with HTML5 canvas.
