# p5.webm-capture

> A frame-by-frame video capture, encode, and export utility for p5.js

Latest version **1.3.2** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install p5.webm-capture
pnpm add p5.webm-capture
yarn add p5.webm-capture
bun add p5.webm-capture
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2026-09-09 |
| First published | 2022-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 510 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adam Bachman |
| Maintainers | abachman |
| Keywords | p5.js, p5js, p5, processing.org |

## Links

- npm: https://www.npmjs.com/package/p5.webm-capture
- Repository: https://github.com/abachman/p5.webm-capture
- Homepage: https://github.com/abachman/p5.webm-capture#readme
- Issues: https://github.com/abachman/p5.webm-capture/issues
- npm.io page: https://npm.io/package/p5.webm-capture

## Dependencies (1)

- [ccapture.js](https://npm.io/package/ccapture.js.md) ^2.0.0

## Recent versions

- 1.3.2 (latest) — 2026-09-09
- 1.3.0 — 2026-09-08
- 1.2.1 — 2022-04-03
- 1.2.0 — 2022-03-30
- 1.1.0 — 2022-02-21
- 1.0.1 — 2022-02-04
- 1.0.0 — 2022-02-04

## README

# p5js webm capture

[![npm version](https://badge.fury.io/js/p5.webm-capture.svg)](https://badge.fury.io/js/p5.webm-capture)

record frame-perfect p5.js sketches to .webm format video files in the Chrome browser. handy for turning slow-developing simulation sketches into smooth animations or creating perfect-loop videos.

combination of cc-capture and webm-writer, handy for capturing frames of sketches and producing webm video output. different from other p5.recording libraries because it doesn't capture a video stream of the canvas, it captures frames individually and rebuilds them into a webm video file, so you can produce a smooth final product even if your sketch is running on a slow computer.

designed to work with p5.js and Chrome. I wrote this so I could include it on https://editor.p5js.org sketches via CDN.

it is currently available at: https://unpkg.com/p5.webm-capture@1.3.1/dist/p5.webm-capture.js

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://unpkg.com/p5.webm-capture@1.3.1/dist/p5.webm-capture.js"></script>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      let c = 0;

      function setup() {
        createCanvas(400, 400);
        colorMode(HSB);
        enableCapture({
          frameCount: 360,
        });
      }

      function draw() {
        background(c, 100, 100);
        c = (c + 1) % 360;
      }
    </script>
  </body>
</html>
```

## Usage

Include p5.webm-capture.js in your index.html page right anytime after your p5.js script tag. **p5.js must be loaded before p5.webm-writer**.

p5.webm-writer only has one function you need to worry about: `enableCapture`. It should be called from your `setup()` function after `createCanvas`.

### `enableCapture`

Should be called in sketch `setup()`, after `createCanvas`. Prepares the webm-capture library to start grabbing frames.

Options (defaults shown in square brackets):

| Name         | Default                            | Description                                                                                                                                                                     |
| ------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `element`    | `document.querySelector('canvas')` | the `<canvas>` tag p5.js is drawing to. If you're using https://editor.p5js.org, it's usually `document.getElementById("defaultCanvas0")`, but you can leave it to the default. |
| `frameCount` | `600`                              | the total number of frames to capture. If you give a value less than 1, the library will run in "manual stop" mode and you'll have to call `stopCapture` to finish.             |
| `frameRate`  | `60`                               | sets the frames-per-second of the final video. _NOTE:_ this doesn't have to be the same as the frameRate of the p5.js sketch.                                                   |
| `display`    | `false`                            | shows a HUD style timecode view                                                                                                                                                 |
| `onComplete` | `function () {}`                   | a function that is called when capture is complete. You could use this to stop the sketch or send a message to an external process.                                             |

So a call with every option given would look like:

```js
enableCapture({
  element: document.querySelector("canvas"),
  frameCount: 120,
  frameRate: 30,
  display: true,
  onComplete: function () {
    alert("boop!");
  },
});
```

By default, given no arguments, a 10 second video at 60fps will be captured and your sketch will continue running.

### `stopCapture`

This is an **optional** method that can be called anytime during recording to stop capturing frames, download the recorded video, and call `onComplete`.

If you give a value less than 1 for `frameCount`, calling `stopCapture()` is required to stop recording and download. This is "manual stop" mode.

## dependencies

- [ccapture.js](https://github.com/spite/ccapture.js) (v2.0.0, MIT License) by [Jaume Sanchez Elias](https://github.com/spite), providing ESM, TypeScript types, and modern WebCodecs hardware-accelerated encoding with automatic fallback to WebM.

## hacking

Make changes, then:

```sh
$ npm run build
$ cd example
$ ./serve
$ open http://localhost:8000
```

Releasing a new version of the library:

```sh
# commit all changes, then
$ npm version [major|minor|patch]
$ npm publish
```

## Changelog

**1.3.1**: Fixed race condition between CCapture `start()` and `capture()` in which the first frame could be captured before the library was ready to encode it, resulting in duplicate first frames and dropped last frames. Added e2e test covering this behavior.

**1.3.0**: Upgrade to `ccapture.js` 2.0.0 for more encodings out of the box and better cross-browser support.

**1.2.1**: package version update.

**1.2.0**: expose the `stopCapture` method and allow passing a value less than 1 to `frameCount` to signal the intent to stop recording manually.

**1.1.0**: [uses p5.js library hooks](https://github.com/processing/p5.js/blob/fd5240a9/contributor_docs/creating_libraries.md#use-registermethod-to-register-functions-with-p5-that-should-be-called-at-various-times) so that `captureFrame()` is called after the draw() function automatically.

**1.0.1**: functioning release (like 30 minutes after 1.0.0)

**1.0.0**: initial release.

---
_Source: https://npm.io/package/p5.webm-capture · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._