🎬 super easy recording for p5.js animations

Here is an example animation that fails to record:

https://p5.javascript.org.pl/frantic-average?template=none

I was testing simpler code with the recorder and using script tag this way works fine. Except it fails to record any video, even though it's a simple rotating square.

This is a simplified version where I have a more complex function instead of a square. I've tried to reproduce the issue.

v1.2.0 specification

| file format | filename pattern | example | | --------------------------- | ----------------------------- | ---------------------- | | video (webm, gif, mp4), zip | timestamp (YYYYMMDD-HHmmdd) | 20220729-003612.webm | | image (png, jpg, webp) | 7-digit numbers | 0000123.png |

The timestamp is to avoid duplicate file names.

Issues

The following issues are considered.

• video, zip
  • Arbitrary strings cannot be included in the file name
  • Some locales are not comfortable with the datetime format YYYYYMMDD-HHmmdd
• image
  • Arbitrary strings cannot be included in the file name
  • Overflow of digits in long animations
  • May not want the counter to reset on each run

Requirements

It is cool if the following requirements are met.

• Avoid duplicate file names
• Can include any string in the file name
• Can specify the number of digits in the counter
• Can specify a starting value for the counter

Can't even install via npm install

npm ERR! path E:\DEVELOPMENT UTILS\PERSONAL\GENERATIVE\node_modules\p5.capture
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c playwright install
npm ERR! 'playwright' is not recognized as an internal or external command,
npm ERR! operable program or batch file.

great library!

forgive me if this is obvious but in the case that I wanted to let people review the video before downloading, would there be an elegant way to interrupt the process so that the file isn't downloaded directly? at the moment, the file just downloads but in some cases, it may be helpful to preview the recorded video as the user may want to discard it (this is for an interactive work). My understanding / memory is a little hazy, but I guess it's a blob before it gets downloaded.

thanks much in advance!

Thank you very much for this tool! I've been looking for an alternative to CCapture.js for some time now and this tool is perfect in every way: easy to use, flexible and easily adaptable to different sketches.

Unfortunately, I'm not getting a good result regarding the quality of the videos (mp4 and webm). I did some tests varying the quality between 0.1, 0.5 and 1.0 and the results are pretty much the same. The tests can be accessed by this link.

Here's some screenshots of the tests:

Quality: 0.1

Quality: 0.5

Quality: 1.0

I'm setting the options right on the code, before setup:

P5Capture.setDefaultOptions({  
  format: "mp4",  
  framerate: 60,  
  quality: 1.0,  
  width: 1080,  
});

Am I doing something wrong or is this behavior exactly what is expected?

When capturing many large frames with p5.capture, the browser can crash or the encoding step can take forever

I made this for my own purpose. It halts the sketch and saves the frames in batches:

https://editor.p5js.org/SableRaf/sketches/KuLI1oVPT

However it is a quick and dirty workaround and it would be amazing to have a solution built-in 😌

概要

素晴らしいライブラリありがとうございます!!

固定でも良いのですが、このcontainerがドラッグ移動出来たらより便利かなと思いました。

(forkし少し実装したのですが、自分の方法ではfiefoxに対応できなかったためissueに書かせていただきました:pray:)

例

以下の追加変更をここでは行っています。

• 背景色をグレーへ(背景白だと少し見づらく感じました)
• カーソルをmoveへ
• ~widthを170pxへ固定~

This commit adds support for p5 instance mode, allowing the user to record one canvas at a time (any p5 canvas within the page).

Usage is straightforward. As expected, after the canvas is set up, P5Capture is told to use that p5 instance and canvas instead of window.

const s = ( sketch ) => {

    sketch.setup = () => {
        // your setup
        P5Capture.setDefaultOptions({p5 : sketch});
    };

    sketch.draw = () => {
        // your draw
    };
};

new p5(s);```

That is all. I have also included:
- the proper end to end tests
- A safety check to warn if one tries to load p5.capture before the document body has been created. You can't load it before document.body as there would be nowhere for the recording window to be appended to

If this implementation makes sense I can add this example to the Readme to finish it.

I did not choose to support multiple recording sessions running at the same time inside a single page since:
- it seems to be an even more rare situation
- it would require to remove the singleton pattern of the P5.Capture, which is not a minor feature

I guess that is all, thanks for the great work.

It would be nice if you can use the library like a library without GUI. I would like to have my own interface in my Code editor I don't want any extra interface. Is something like this possible?

In order to use p5 with several types of libraries, we need to restrict its usage to instance mode. For example, a react next project can not run p5 in global mode out of the box.

The most common situation for instance mode is to have one single instance per page. I have submitted a pull request #17 that adds support for instance mode, allowing the recording of a single canvas at a time.

In order to support multiple canvas recording at the same time, one needs to probably refactor the Singleton instance of p5.Capture, which I guess would be a different issue.

Enables the UI to be moved by dragging.

In Firefox, pageX / pageY does not work on drag event. (See 505521 - Set screen coordinates during HTML5 drag event) Therefore, I implemented it with the monsedown, mouseup, and mousemove events. There is a workaround using the dragover event, but I gave up on it because dragging in Firefox is not smooth.

This PR is related to #1

Hi!

I found problems with captured MP4 videos, the image starts to glitch when working with the video file in programs like Adobe After Effect / Photoshop / DaVinci Resolve. Just in case I've tried several computers and various versions of editing apps to avoid the possibility of a problem with a particular hardware or software.

As an example, I recorded a one-minute video of the screen, about how the glitches occur using one of the programs. You can see that when you just play the captured video no glitches are detected, but when you work with it problems begin to emerge:

https://user-images.githubusercontent.com/52974033/192270093-15b136a3-1f2f-4326-8143-86c523911f43.mp4

It seems to be connected with the h264-mp4-encoder library itself because when I checked the captured video from the demo I found the same problem.

I should probably report the problem to the developer of this MP4 encoder, but I am primarily interested in the functionality of your library, maybe you can find some other solution for making capture works properly for MP4 format.

Thanks!

I'm not sure if this is possible but in my coding playground prototype:

https://p5.javascript.org.pl/amused-loan?template=none

To record a proper Gif I still need to put P5.capture code in my sketch. Capture frame rate should match frame rate from p5.js

If I want to capture the animation I need to copy paste p5.capture default config:

function setup() {
    createCanvas(400, 400);
    //noLoop();
    frameRate(5);
}

P5Capture.setDefaultOptions({
    disableUi: true,
    format: "gif",
    framerate: 5,
    quality: 0.5,
});

To not break the API, how about -1 value will mean that it should take frameRate from P5.js?

I just came accross this https://github.com/jimmywarting/StreamSaver.js

Wondering if stream saving directly to the file system would be an option as a more scalable alternative to segmented capture.