https://github.com/doriclaudino/p5.recorder

record and export p5js canvas as webm, mp4, gif
https://github.com/doriclaudino/p5.recorder

art export-video ffmpeg javascript mp4 p5 p5js sketch

Last synced: 3 months ago
JSON representation

record and export p5js canvas as webm, mp4, gif

• Host: GitHub
• URL: https://github.com/doriclaudino/p5.recorder
• Owner: doriclaudino
• License: mit
• Created: 2020-04-20T00:37:58.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:49:39.000Z (over 3 years ago)
• Last Synced: 2026-01-25T20:07:29.788Z (5 months ago)
• Topics: art, export-video, ffmpeg, javascript, mp4, p5, p5js, sketch
• Language: JavaScript
• Homepage: https://editor.p5js.org/doriclaudino/sketches/LgLw5UaBr
• Size: 3.01 MB
• Stars: 32
• Watchers: 4
• Forks: 5
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# p5.recorder

[![NPM](https://nodei.co/npm/p5.recorder.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/p5.recorder/)

[![](https://data.jsdelivr.com/v1/package/npm/p5.recorder/badge?style=rounded)](https://www.jsdelivr.com/package/npm/p5.recorder)

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

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/doriclaudino/p5.recorder/issues)

### Install (CDN)

```html

```

### Install (NPM)

```bash

npm install p5.drawer

or

yarn install p5.drawer

```

Example `using default options`:

```javascript

let rec = new p5.Recorder();

rec.start();

//stop after some time

rec.stop();

```

Example `using custom options`:

```javascript

let autoDownloadFile = false

//set to no download at the end

let rec = new p5.Recorder(autoDownloadFile);

let options = {

  filename: "my_custom_name_output.webm",

  recordAudio: true,

  audioBitRate: 128000,

  videoBitRate: ‭100000000‬ , //10 megabits

  fps: 45,

}

//passing custom configs

rec.start(options);

//stop after some time

rec.stop();

/**

 * contains current status

 * status: {

 *   frames: 0,

 *   progress: 0,

 *   state: undefined,

 *   time: undefined,

 * }

 */

rec.status;

//download the file after stop

rec.download();

```

 

## default options start() method:

| **name** | **value**  |

| --- | --- |

| filename | "p5.recorder.canvas.webm" |

| recordAudio | true |

| audioBitRate | 128000 |

| videoBitRate | 120000000 |

| fps | 60 |

## enable audio

Don't forget to __CHECK__ enable audio (we are trying a better approach to capture audio-context on p5js-sound):

![Image description](https://i.imgur.com/LVgEuzA.png)

## commands

- yarn dev

- yarn build

## still in development

only support .webm for now

## for future reference

https://editor.p5js.org/doriclaudino/sketches/LgLw5UaBr