What is ccapture.js?

CCapture.js is a JavaScript library for recording canvas-based animations in the browser at a fixed, consistent frame rate. The problem it solves is that ordinary screen recording software captures whatever the screen actually shows in real time. If your animation is computationally expensive and runs slower than intended, the recording will also look slow and choppy. CCapture.js works differently: it intercepts the browser's internal timing functions and replaces them with a controlled clock, so each frame is rendered at exactly the right interval regardless of how long it actually takes to compute. This means you can push rendering quality as high as your hardware allows, take as long as needed per frame, and the resulting video will play back at a perfectly smooth 30 or 60 frames per second. You can also capture at higher frame rates like 240fps and then apply motion blur in video editing software afterward. The library supports several output formats. It can produce a WebM video file, an animated GIF, or a collection of PNG or JPEG images packaged in a TAR archive. There is also an option to send frames to a server-side ffmpeg process for video encoding. You add the library to a page via a script tag or install it with npm, then wrap your existing animation loop with three calls: start capturing, pass the canvas element to capture after each frame, and stop and save when done. The configuration options let you set the target frame rate, output quality, a time limit for automatic stopping, and whether to auto-save periodically during long captures. The README notes several limitations. The WebM format depends on browser support for the webp image format, which at the time of writing made it effectively Chrome-only. The GIF encoder has performance constraints and may struggle with long or large captures. Very large output files can also cause issues in some browsers due to memory limits. The library requires that your animation already uses elapsed-time-based movement rather than fixed per-frame increments. If your animation steps by a constant amount each frame rather than by the time that has passed, CCapture.js will not produce correct output.