Video is 5x faster

[iamappmaker]

I am using GSAP to create animation
Video output is 5x faster
10 seconds animation is recorded in 2 sec.

[dlazares]

I'm also experiencing sped up recordings using a Mac running Chrome version 81.

Here's the simplified version of the code.

this.capturer = new CCapture({format: 'webm'});

start(){
    this.renderCanvas();
    this.capturer.start();
}
renderCanvas(){
    requestAnimationFrame(this.renderCanvas);
    this.update(); // Updates Canvas 
    this.capturer.capture(this.canvasRef.current);
  }

[Rolands-Laucis]

Same for me with any FPS configurations. Reading the other issues, it seems that is just how it is with a solution nowhere in sight.

[Soahr]

Same for me here ... Any solution ?

[spite]

That's because how GSAP instruments Date.now, I think i can recall. If someone can upload a codepen with the issue i can take a look. Just in case, make sure CCapture is the first dependency.

…

On Thu, 21 Oct 2021 at 16:35, Soar ***@***.***> wrote: Same for me here ... Any solution ? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#110 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFSV3JRYB2ANXTKG4O3VQDUIAXKNANCNFSM4MPNEUNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[Rolands-Laucis]

I would just record my browser screen with a free tool like Bandicam (watermark) or OBS (no watermark, but kinda overkill for the task)

[spite]

You're perfectly free to do that.

…

On Thu, 21 Oct 2021 at 16:49, Rolands Laucis ***@***.***> wrote: I would just record my browser screen with a free tool like Bandicam (watermark) or OBS (no watermark, but kinda overkill for the task) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#110 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFSV3L4PLRQCJKXJVPQCATUIAZBPANCNFSM4MPNEUNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[Soahr]

My bad, apparently, after using it correctly, the speed is correct !

[EgorKorshunov]

Right now I have the same problem and I don't understand what you guys did to solve it. Could you please help?

[Soahr]

@EgorKorshunov
I just pushed my working project here : https://github.com/Soahr/ccapture-recording-canvas-animation
Hope this can help you ;)

[EgorKorshunov]

Thank you very much!

[EgorKorshunov]

Unfortunately, if I add GSAP to this example, the final video goes much faster than it should.
@spite you mentioned here that this is about GSAP and Date.now(). Do you know if it is possible to do anything about it? Also what does "CCapture is the first dependency" mean here?

[Soahr]

@EgorKorshunov I don't know GSAP very well but i just updated my code to work with it frame based : https://github.com/Soahr/ccapture-recording-canvas-animation

[RickMohr]

@EgorKorshunov, here's one way to capture a GSAP timeline at the correct speed. Since the timeline stores the full animation we can control the capture rate directly, independent of any GSAP or ccapture timing:

async function capture(timeline, canvas) {
    const frameRate = 60;
    const capturer = new CCapture({ format: 'webm', framerate: frameRate });
    capturer.start();

    const nFrames = timeline.duration() * frameRate;
    const step = 1 / nFrames;
    for (let t = 0; t <= 1; t += step) {
        timeline.progress(t);
        capturer.capture(canvas);

        await new Promise(resolve => requestAnimationFrame(resolve));
    }
    capturer.stop();
}

(Note this uses promises and async to simplify the control flow, but would work fine without them as well.)

Thanks to @Soahr for the idea of using timeline.progress.

[JulienPoirierWebDev]

Hello ! I have the same issue with p5.js ! The video output is more faster than the recorded animation !

It's just me or there is someone ?