spite / ccapture.js

A library to capture canvas-based animations at a fixed framerate
MIT License
3.55k stars 406 forks source link

[BUG] CCapturer.start() breaks all of my Promises (dangerous code included) #105

Open ProgrammingLife opened 4 years ago

ProgrammingLife commented 4 years ago

I use CCapture in the following way: <script src="scripts/ccapture.js-1.0.9/build/CCapture.all.min.js"></script>

Tested in all latest browsers (FireFox, Chromium).

I have the code:

async function promisedFunc() {
    return new Promise(resolve => resolve());
}

async function asyncFuncTest(i) {
    if (i > 5) return ;

    console.log(`AsyncTest() 000, i = ${i}`);
    await promisedFunc().then( () => {} );
    console.log(`AsyncTest() 111`);

    setTimeout( () => { asyncFuncTest(i + 1); }, 500);
}

console.log("000");
// setTimeout( () => { asyncFuncTest(0); }, 1000);
asyncFuncTest(0);
console.log("111");

capturer = new CCapture({ format: 'png', framerate: 60, quality: 1.0, });
// capturer.start(); // <-- problem in this line

Console output is:

AsyncTest() 000, i = 0
AsyncTest() 111
AsyncTest() 000, i = 1
AsyncTest() 111
AsyncTest() 000, i = 2
AsyncTest() 111
AsyncTest() 000, i = 3
AsyncTest() 111
AsyncTest() 000, i = 4
AsyncTest() 111
AsyncTest() 000, i = 5
AsyncTest() 111

which is great, right? But when I uncomment that problem line with capturer.start() I get in the console only:

000
AsyncTest() 000, i = 0
111
AsyncTest() 111

but what's wrong with the CCapturer? Why it breaks my promises? What do I do wrong? How to avoid it?

ProgrammingLife commented 4 years ago

This not happens when I use webm-writer only without CCapture.

ProgrammingLife commented 4 years ago

Ok finally I got the warning about setTimeout() on the main page of the library:

requestAnimationFrame, setTimeout, etc. won't work as expected after capture is started. Make sure your animation loop is running

but why don't you make your own custom setTimeout() function? To not to break the standart setTimeout() functionality.