Skip to content

calebfoss/p5.videorecorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

p5.videorecorder logo

p5.videorecorder

p5.videorecorder is a small p5js add-on for recording video from sketches using the MediaRecorder api. The library adds a p5.VideoRecorder class.

Getting Started

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.

Examples

Reference

p5.VideoRecorder

Description

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

Syntax

new p5.VideoRecorder([input], [format])

Parameters

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)

Properties

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)

Methods

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.

Static Methods

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

About

a p5js library for recording video from sketches

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published