CCapture.js is a JavaScript library designed to capture high-quality recordings of HTML5 canvas animations at a fixed and consistent frame rate. Unlike traditional screen recording tools, it decouples rendering speed from capture speed, allowing developers to generate smooth video outputs even when frames take longer to compute. It works by overriding time-related browser functions such as requestAnimationFrame and Date.now to simulate a stable time progression, ensuring every frame is captured accurately. This approach enables the creation of high-resolution videos, slow-motion sequences, or complex visualizations without dropped frames. The library supports multiple export formats including WebM, GIF, PNG sequences, and JPEG archives, making it flexible for different workflows. It integrates easily into browser-based creative coding environments like Three.js and p5.js, making it especially valuable for artists and developers producing generative visuals.
Features
- Fixed framerate capture independent of rendering performance
- Support for WebM, GIF, PNG, and JPEG export formats
- Hooks into timing APIs like requestAnimationFrame
- Motion blur and frame supersampling options
- Works with WebGL and canvas-based animations
- Configurable capture settings including quality and duration