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:

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