JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q39558F
  • License MIT

record and export p5js canvas as webm, mp4, gif

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

NPM

npm version

styled with prettier contributions welcome

Install (CDN)

<!-- option one jsdelivr-->
<script src="https://cdn.jsdelivr.net/npm/p5.recorder@0.0.5/dist/p5.recorder.js"></script>

<!-- option two githack-->
<script src="https://raw.githack.com/doriclaudino/p5.recorder/master/dist/p5.recorder.js"></script>

<!--
  option three local source
  downloading from: https://github.com/doriclaudino/p5.recorder/blob/master/dist/p5.recorder.js -->
<script src="../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 = {
  outputName: "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();

//download the file after stop
rec.download();

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