search

spite / ccapture.js

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

using CCapture to render a javascript starfield animation as a webm file #128

Open xenophoria opened 3 years ago

xenophoria commented 3 years ago

I am trying to learn how to use CCapture to render a javascript starfield animation as a webm file. I can download png snapshots of a single canvas but am having no success downloading them as frames of a webm file.

The animation lasts 5 minutes in total and has 10 states each lasting 30 seconds. As a test I tried to capture after 35 seconds but nothing downloads after 35 seconds. When I click on the screen a png file is downloaded.

var capturer = new CCapture( { format: 'webm', framerate: 30, name: 'starfield.webm', verbose: true, timeLimit: 35, autoSaveTime: 0.5 } );

I’m not sure if I have specified the capturer properties correctly. Can anyone point out what I am doing wrong. Thanks

https://jsfiddle.net/1syh7m59/

spite commented 3 years ago

i took a look at your code. where are you calling capturer.capture(canvas) ? you need to pass the canvas every time you step your animation

GregSchiemer commented 3 years ago

Great. I thought that might be the right question. I'll continue looking for the answer. When I find it, I'll share a working example for your documentation. This will be such a great tool for capturing animations!