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