p5.recorder
v0.0.7
Published
record and export p5js canvas as webm, mp4, gif
Downloads
9
Maintainers
Readme
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