hypercut

hypercut is an in-browser library that captures JavaScript animations independent of real time. In certain cases, it can capture animations faster than real time. In computationally intensive cases, it can capture animations slower than real time. Regardless of capture rate, the resulting animation runs smoothly.

hypercut uses timeweb to virtually iterate through time, independent of realtime, and framekit, a modular tool to convert frames into videos. It supports inputting canvases and screens and can output WebM videos (for some browsers). More outputs can be possible through plugins.

hypercut is in very early stages of development. There may be significant changes in newer versions that may break existing APIs.

Faster than Real Time

The WebCodecs API can efficiently encode frames into video data, making faster-than-realtime encoding practical in browser. The API currently only works in Chromium-based browsers (Chrome, Chromium, Edge, etc.). hypercut offers fallbacks for other browsers that support WebP encoding for canvas frames (currently only Firefox), though the fallback will likely not be faster than realtime and may result in bigger file sizes.

Non-canvas based capturing (e.g. screen capturing) or certain webgl animations may rely on the screen refreshing, in which case faster-than-realtime capturing might not be supported.

Read more about limitations at the framekit repository.

Installing

In Browser

hypercut is meant to be used in browser. Include it before any time-handling JavaScript in the HTML file. It can be included through a script tag in browser through a CDN:

<script src="https://unpkg.com/[email protected]/dist/hypercut.js"></script>

Or if locally downloaded:

<script src="path/to/dist/hypercut.js"></script>

In Node

If using a bundler, from the command-line:

npm install --save-dev hypercut

Then in your files:

import hypercut from 'hypercut';

Basic Usage

Capturing a canvas element with the id canvas-id, for 300 frames, at 60fps:

(async function () {
  var canvas = document.querySelector('#canvas-id');
  var blob = await hypercut({
    input: hypercut.input.canvas({
      canvas: canvas
    }),
    fps: 60,
    duration: 5, // 5 seconds
    output: 'webm'
  });
})()

Limitations

Animation Limitations: hypercut relies on timeweb for animating pages independent of real time, and only works with JavaScript animations and basic videos. Read more about the limitations at the timeweb repository.

Capturing and Encoding Limitations: hypercut relies on framekit for capturing and encoding frames. Read more about the limitations at the framekit repository.

Bundled Libraries

In addition to timeweb and framekit, dist/hypercut.js bundles webm-writer-esm, a version of webm-writer-js modified to support WebCodecs.