Optimo Recorder

Optimo recorder is a renderer for the browser. Based on puppeteer and optimo-animator, it allows you to render frames from Javascript animations.

How to use

Export optimo-animator instance

In order for the recorder to be able to render the images for a certain time, you need to export the instance of the animator you use in the page containing the animation.

const timeline = new Timeline([
  {
    duration: 3000,
    handler: (progress) => {
      // Do something here
    },
  },
]);

// E.g of an animator instance being exported through the window object.
const animator = new Animator([timeline]);
animator.start();
(window as any).animator = animator;

Render frames

Parameters:

name	shortcut	type	default
name	n	string	null
url	u	string	null
frameRate	f	number	60
duration	d	number	1000
width	w	number	1920
height	h	number	1080
scaleFactor	s	number	1
path	p	string	__dirname
headless	w	boolean	true
product	b	string	chrome

yarn record -n test -u http://localhost:1234 -d 30000 -h 1280 -w 720

Render video from images

Use FFMPEG to convert frames to a video file:

ffmpeg -framerate 60 -i test-%04d.png output.mp4