p5.videorecorder is a small p5js add-on for recording video from sketches using the MediaRecorder api. The library adds a p5.VideoRecorder class.
Download the latest release from the releases page.
Put p5.videorecorder.js in the same directory as your sketch. If using the web editor, you will need to upload the file.
Add p5.videorecorder.js to your sketch's index.html file in a script tag:
<!doctype html>
<html>
<head>
<script src="p5.js"></script>
<script src="p5.sound.js"></script>
<script src="p5.videorecorder.js></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
Create a new instance of the the p5.VideoRecorder class in your sketch.js file.
let videoRecorder;
function setup() {
createCanvas(400, 400);
videoRecorder = new p5.VideoRecorder();
}
See Examples and Reference for usage.
Class for recording video from the sketch. If no arguments are passed into the constructor, the VideoRecorder instance will default to record the canvas as well as all p5.sound audio output (if p5.sound library has been loaded).
The recorded video file may not be available immediately after the stop() method is called. Set the onFileReady callback to call a function when the recorder has finished creating the video file.
Ability to record inputs may vary based on the browser. Recording the canvas is supported by most contemporary browsers (see browser compatibility), but recording media elements currently has limited support (see browser compatibility). You can check whether an object can be recorded by passing it into the canRecord() method (see Reference).
new p5.VideoRecorder([input], [format])
| name | type: description |
|---|---|
| input | p5.Element|AudioNode|Array: element, node, or array of elements/nodes to record (Optional) |
| format | String: mimeType or extension to be used for recording (Optional) |
| name | description |
|---|---|
| blob | video file available after recording is completed (Read-only) |
| format | mimeType or extension to be used for recording |
| input | element, node, or array of elments/nodes to record |
| onFileReady | callback called after recording is completed and blob is created |
| stream | MediaStream for selected input(s) (Read-only) |
| url | url pointing to video file available after recording is completed (Read-only) |
| name | description |
|---|---|
| addInput(input) | add another input to the existing MediaStream |
| canRecord(input) | returns true/false indicating if the given input can be recorded (call static canRecord method on p5.VideoRecorder) |
| erase() | delete the contents of the recording |
| isSupported(format) | returns true/false indicating if the given mimeType or video format is supported by the browser (calls static isSupported method on p5.VideoRecorder) |
| pause() | pause the recording |
| resume() | resume the recording |
| save(filename) | download the recording |
| start() | start recording |
| stop() | stop recording, create Blob (video file) and url, and then call the onFileReady callback. |
| name | description |
|---|---|
| isSupported(format) | returns true/false indicating if the given mimeType or video format is supported by the browser |
| canRecord(input) | returns true/false indicating if the given input can be recorded |