Package Exports

p5.recorder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (p5.recorder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Image description

commands

yarn dev
yarn build

still in development

only support .webm for now

for future reference

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