p5.recorder

Install (CDN)

<!--jsdelivr-->
<script src="https://cdn.jsdelivr.net/npm/p5.recorder@0.0.7/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

zachyking/p5.recorder