Saving ZIM animation to a video file or to a set of images

How can i record ZIMJS animation and save it to a video file? Or how can i save ZIMJS animation frame by frame and saving each frame in an image file?

We did that with ffmpeg - let's see... where was that...

Ah... see the EXPORT section of the Generator Docs.

I think ffmpeg is used after you get a bunch of screenshots. So, you do not need to use Generator() but rather need to run an interval that writes canvas screenshots. Loader() and save() may be able to do that for you. Check things out and if you have any questions, we can see if we can help out.

The easiest way is probably with a screen capture software like OBS - which is amazing, free, easy, and can do 1080p no problem.


I think GENERATOR will do the job. Let me try to work with it. Thank you.

Have not done too many projects with Generator() it is a little different... sort of how Processing works.

I have looked at Generator; It seems to export only what has been drawing with Generator. Can Generator export the whole ?

I think that's right... it is just doing a each time it draws - or perhaps there is a framerate option or something. But you can do the same with anything.

The only issue is that you can't do it too quickly... about 6 frames per second. So you have to consider how to save an animation like that. Maybe use pauseAnimate() and percentComplete() or something in an interval. Along with the

const loader = new Loader();

Then in the interval and increase the file number sort of like we did in generator.

If you are just doing this for yourself, OBS is easier. If you want to set something up so it can all be done in ZIM for a user... then use the

Thank you! I will do some testing, follow your guidiline and give you updated. Have a good day Dr Abstract.

1 Like

I can use the Ticker to create a snapshot of the canvas. Is there an example to make a Ticker run just for 5 seconds?

I will try to use setInterval().

I used setTimeout() instead and it works. Meaning i let the ticker runs, after 3 seconds i removed it with; setTimeout(() => Ticker.remove(tryMe), 3000);. Sorry i still do not know how to use the proper reply.