framekit

framekit is 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.

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

Installing

In Browser

framekit is meant to be used in browser. It can be included through a script tag in browser through a CDN:

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

Or if locally downloaded:

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

In Node

If using a bundler, from the command-line:

npm install --save-dev framekit

Then in your files:

import framekit from 'framekit';

Basic Usage

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

(async function () {
  var canvas = document.querySelector('#canvas-id');
  var kit = await framekit({
    fps: 30, // output frame rate
    output: 'webm'
  });
  for (let i = 0; i < 300; i++) {
    // do something to update/render the canvas
    // ...
    await kit.addFrame(canvas);
  }
  var blob = await kit.finish();
  // do something with the blob
})()

Limitations - Inputs

Screen Capturing Limitations

Screen capturing is done via getDisplayMedia, which has certain limitations:

• Requires the user to select and approve capturing of the current window
• Limited to Frame Rate, so faster-than-real-time capturing at the same frame rate is not possible.
• Cursors appear when moved, because no browser seems to support the cursor constraint property for getDisplayMedia.

Limitations - Output

WebCodecs Limitations

The WebCodecs API offers access to video encoding that is faster and/or produces smaller videos than other in-browser solutions. It is only supported by Chromium based browsers (Chrome, Edge, etc.).

Depending on the codec, and the client's hardware and platform, trying to use hardware acceleration may result in an error.

WebM Video Limitations

framekit can directly encode WebM video (by using the WebMWriter library). Directly encoding video requires using a browser that can convert canvases to WebP images, which currently is only Firefox and Chromium-based browsers (Chrome, Edge, etc.).

framekit can also use WebMWriter as a muxer with webcodecs, which has the same limitations as those found in the webcodecs limitations sections.

Directly encoding frames with WebMWriter will generally be slower and create larger files than using WebCodecs with WebMWriter as a muxer. Using output: 'webm' will use WebCodecs if possible.

Bundled Libraries

dist/framekit.js bundles webm-writer-esm, a version of webm-writer-js modified to support WebCodecs.