A JavaScript library to capture canvas animations at a fixed framerate for smooth video export.
CCapture.js is a JavaScript library that captures HTML5 canvas-based animations at a fixed framerate for smooth video export. It solves the problem of creating high-quality videos from animations that may not run in real-time due to high resolutions, complex scenes, or performance limitations. By hooking into timing methods, it allows animations to be recorded consistently regardless of rendering speed.
Developers and creators working with canvas or WebGL animations who need to produce high-quality video recordings, such as for demos, art projects, or presentations, especially when real-time capture is insufficient.
Developers choose CCapture.js because it enables reliable, framerate-accurate video capture from canvas animations without requiring real-time performance, supporting multiple export formats and offering fine-grained control over capture parameters.
A library to capture canvas-based animations at a fixed framerate
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Records animations at a consistent framerate even if frames render slowly, enabling smooth videos from high-resolution or complex scenes, as core to the library's purpose explained in the README.
Supports WebM, GIF, PNG, and JPEG outputs via modular encoders, offering flexibility for different sharing needs, detailed in the 'Using the code' section with examples for each format.
Hooks into timing methods like requestAnimationFrame to simulate constant time steps, ensuring compatibility with animations that use elapsed time deltas, a key requirement emphasized in the README.
Features like autoSaveTime and timeLimit help manage long captures and prevent browser crashes from large files, making it practical for extended recordings, as outlined in the limitations section.
WebM export is Chrome-only due to dependencies on image/webp format, and the README explicitly admits this, making cross-browser use difficult without server-side encoding.
Can cause non-sawtooth memory profiles and may require running Chrome with special flags for garbage collection, adding complexity and risk for large captures, as noted in the limitations.
Requires including additional scripts like WebM Writer or gif.js and managing paths for workers, which is more cumbersome than all-in-one libraries, increasing initial integration effort.