search

spite / ccapture.js

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

Capture stalls after capturing only one frame -- then repeated timeouts #117

Open darethehair opened 4 years ago

darethehair commented 4 years ago

From the examples I have read, I am doing everything correctly to add canvas capture to my HTML5 app using 'ccapture.js, but after successfully capturing a single frame (webm, jpg, etc) my animation stalls out, and my console gets repeated messages about setting and clearing a 'Timeout':

turning video capture ON
CCapture.all.min.js:1 Capturer start
CCapture.all.min.js:1 Timeout set to 1000
comet.html:11519 saving video frame
CCapture.all.min.js:1 Full Frame! 1

CCapture.all.min.js:1 Frame: 1 0
CCapture.all.min.js:1 Timeout set to 5000
CCapture.all.min.js:1 Timeout cleared
CCapture.all.min.js:1 Timeout set to 5000
CCapture.all.min.js:1 Timeout cleared
CCapture.all.min.js:1 Timeout set to 5000
CCapture.all.min.js:1 Timeout cleared
...

My animation loop never continues, and more frames are not grabbed. Stopping/saving the capture seems to work fine, but the result only contains one image/frame.

What am I doing wrong? I feel like I am so close to my goal! :)

spite commented 4 years ago

I can't help you with only that. I would need to see how your code handles frames. There can't be a handful of reasons why CCapture stalls. Usually it's because you're using timers in an unconventional/unsupported way.

darethehair commented 4 years ago

My code is very long, created years ago, but I have a loop that draws on the HTML5 canvas:

                    function update_clock() {
                            user_interval = document.getElementById('user_interval').value * 1000;
                            var timeout_interval = setTimeout("update_clock()", user_interval);
                            ...bunch of code that draws on canvas...
                            save_video_frame();
                            }

And a very simple function that captures a single frame:

                    function save_video_frame() {
                            console.log("saving video frame");
                            capturer.capture(canvas);
                    }

...

darethehair commented 3 years ago

Any updated suggestions regarding my capture problem? I posted the basic context in my post above. Thanks

spite commented 3 years ago

I don't have enough to work with. But relying on setTimeout/setInterval is guarantedd to become an issue if you start capturing halfway. I'd recommend using requestAnimationFrame.