doriclaudino/p5.recorder

record and export p5js canvas as webm, mp4, gif

p5.recorder

Install (CDN)

<!--jsdelivr-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.recorder.js"></script>

Install (NPM)

npm install p5.drawer
or
yarn install p5.drawer

Example using default options:

let rec = new p5.Recorder();
rec.start();

//stop after some time
rec.stop();

Example using custom options:

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):

commands

• yarn dev
• yarn build

still in development

only support .webm for now

for future reference

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

p5.recorder's Issues

Implementing mp4

Really excited for this and your example here does an amazing job of exporting an mp4 too (the main element missing from most canvas recording techniques, as not too many platforms/apps support webm).

Is the ffmpeg.min.js from the example your own reduction for this conversion or from somewhere else? Was trying to find a simple way to convert webm's to mp4 in browser or blobs straight to mp4 and couldn't find anything nearly so small... only 10+ mb libs.

Can't wait for mp4 to be part of this library and hope you'll include some sort of options in the method for which/multiple formats to save on export (like in example above).

NPM Install instructions wrong

Currently npm instructions are:

npm install p5.drawer

npm install p5.recorder will install the right package (however it doesn't seem to be functional anymore)

edit: typo

Capture in headless mode

Great library. Helps me record my animations as videos and a great help.

would be nice to also have the feature to record videos using nodejs in headless browser

Thanks