We need an easier way to record p5 sketches

[pilattebe]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [x] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

New feature details:

We need a tool to record a sketch easily and export either a gif or a video. Current techniques require the user to fiddle with ffmpeg, to save individual frames,... which isn't easy for newcomers.

---

update to the proposal

A startRecord() and stopRecord() function recording both image and sound and exporting to a video file.

---

old post

My proposal is for the p5 CLI to include a tool to export the sketch as a video. You would just give the number of frames to record (maybe [start, end, skip, speed] to allow fine control of gifs) and it spits out the video.

example:

p5 export --frames 2000 [--format mp4] sketch.mp4
p5 export --frames 100 [--format gif] sketch.gif

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[doriclaudino]

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

You think it could be a good starter? I did this sketch today after read your feature request

You can generate a gif, mp4, webm

[FreddieRa]

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

You think it could be a good starter? I did this sketch today after read your feature request

You can generate a gif, mp4, webm

This is excellent, can it be packaged into p5?

[pilattebe]

I don't know what I'm doing wrong but I get Script error. (: line 0) every time I click the button. I didn't edit your script or anything

[pilattebe]

I've also tried ccapture.js but it takes half an hour to record a minute of animation so it's definitely not suitable for most users.

[pilattebe]

I'm getting ReferenceError: Can't find variable: MediaRecorder in the devtools. And the code looks really complicated with all the files so I don't know where the error comes from. This is exactly what I want to avoid. I believe P5.js has to be welcoming to newcomers and they should be able to share their progress easily. Not some cryptic Script error. (: line 0) error.

(This is not a criticism for you or your code, thank you for being involved in this, this aims to be a constructive criticism.)

[FreddieRa]

It doesn't matter if the code is complicated if it gets added to the p5 repo and all we need to do is call "startRecord()" and "stopRecord()". This is just showing how the underlying code might work.

[pilattebe]

Exactly, what I'm saying is that a newcomer should not be exposed to this.

[FreddieRa]

And they won't be. But the "record" function you want to add needs some way of working, and this has been proposed. You are welcome to implement it yourself with a PR.

[pilattebe]

I'll try my best

[rakkoemoji]

@doriclaudino your code works just fine!!! you are a genius... however, how do you hass argument to ffmpeg to change the bitrate. the current bitrate is bit small, like 260k.

[doriclaudino]

Hi, that's good you guys like my example. There's differents ways to record, I'm also thinking which one is the best approach and then create a extension for p5.

Fell free to explore more options and post the results here, it will helps a lot. Thanks

[doriclaudino]

I forgot to mention, this is a WebAssembly "wasm" of ffmpeg.

Not sure if the best approach is to work on CLI level or directly on WEB.

To make easier for newcomers I think WEB package it's the right way.

Like someone commment: Simple start/stop Recording

[pilattebe]

Hi, Directly on the web is probably better. On my side, I followed a totally different route when I needed to record my sketch: I followed these instructions with some simplifications. 1) source this file, this file and this file. 2) add this to setup:

capturer = new CCapture({
    format: "webm",
    framerate: 60
});
capturer.start();

3) add this to the draw()

capturer.capture(document.getElementById("defaultCanvas0"));
if (stopCondition){
    capturer.stop();
    capturer.save();
    noLoop()
}

When I used it, it was painfully slow, but it looks like it might be suitable for 720p 60fps <5min sketches.

[pilattebe]

I still have not been able to run your sketch on the web editor btw. I use Safari Version 13.1.1 (15609.2.3) on macOS version 10.15.5 (19F62f).

[dhowe]

just a quick mention that it would be ideal to include the option to record audio from sketches as well (which the ccapture frame-by-frame approach does not support - correct me if i'm wrong)

[pilattebe]

You're right, and just to be clear, I don't recommend using CCapture for anything. I was just sharing my (bad) experience with it.

[doriclaudino]

You're right, and just to be clear, I don't recommend using CCapture for anything. I was just sharing my (bad) experience with it.

I got the same experience trying to record my canvas, I starting recording using the canvas API, downloading as webm and then using external videos/gif tools. Everybody is recording theirs canvas I don't know why there's nothing easy, I saw the p5.createLoop to gifs, works pretty good.

[dhowe]

You're right, and just to be clear, I don't recommend using CCapture for anything. I was just sharing my (bad) experience with it.

Understood -- I often advise students on OS X to try the Quicktime Player's screen-recorder, which, though annoying, can record a sketch with audio and doesn't require code changes (simply select the area you want to record, select the audio source, and whether to include the mouse, and go).

So both audio and optional mouse-recording would be nice features for an ideal version. Perhaps also being able to set the record duration in advance (which you can't do in qt)

[pilattebe]

Use cmd+maj+5 on mac to record the screen or part of it (on new macOS versions). I once tried to save every image to a big folder but Chrome blocked downloads after the 1000th file or so...

[doriclaudino]

I'm getting ReferenceError: Can't find variable: MediaRecorder in the devtools. And the code looks really complicated with all the files so I don't know where the error comes from. This is exactly what I want to avoid. I believe P5.js has to be welcoming to newcomers and they should be able to share their progress easily. Not some cryptic Script error. (: line 0) error.

(This is not a criticism for you or your code, thank you for being involved in this, this aims to be a constructive criticism.)

I'm using on chrome (macos/windows). https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder

Seems safari doesn't support yet, try to check on experimental features: https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/

I just test on safari Version 13.0.4 (14608.4.9.1.4), it work (after active MediaRecorder on experimental features).

[doriclaudino]

just a quick mention that it would be ideal to include the option to record audio from sketches as well (which the ccapture frame-by-frame approach does not support - correct me if i'm wrong)

I'm not sure if canvas broadcast the audio (I actually never test it with audio), cause it's coming from audioAPI on p5.js-sound. Probably we need to capture both canvas stream and audio stream, then combine in a single output.

[pilattebe]

IT WORKS ! WOW ! (with experimental features) Coming from CCapture, I see the change, your thing is FAST ! I don't think the audio is linked to the canvas, but it could be possible to hack something into p5-sound to intercept the sound.

[doriclaudino]

Hello everyone!

I started a repository (still working on it): p5.recorder

Feel free to help us implementing, documenting and improve the idea of recording directly on the browser.

I also publish a small version for download as .webm, I'll try to make mp4 and gif as fast I can. Thanks

[1234igor]

I had problems with p5js export until I found this tutorial: https://peterbeshai.com/blog/2018-10-28-p5js-ccapture/ which was very helpful

[limzykenneth]

I think an addon library like the one from @doriclaudino is an excellent way to add this functionality to the p5.js ecosystem. Thank you to everyone for the discussion. I'm going to close this issue for now but you can continue discussions on the addon's repository or if you have new ideas, comment here or open a new issue.