transitive-bullshit / puppeteer-lottie Goto Github PK

View Code? Open in Web Editor NEW

343.0 6.0 72.0 3.52 MB

Renders Lottie animations via Puppeteer to image, GIF, or MP4.

JavaScript 100.00%

puppeteer lottie lottie-web ffmpeg gifski

puppeteer-lottie's Introduction

puppeteer-lottie

Renders Lottie animations via Puppeteer to image, GIF or MP4.

This module is also available as a CLI.

Install

npm install --save puppeteer-lottie

If you want to generate GIFs, you must also install gifski. On macOS, you can run:

brew install gifski

If you want to generate MP4s, you must also install ffmpeg. On macOS, you can run:

brew install ffmpeg

Usage

const renderLottie = require('puppeteer-lottie')

// Create an MP4 from a lottie animation
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'example.mp4'
})

// Create a GIF with width 640px from a lottie animation
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'example.gif',
  width: 640
})

// Render each frame of the animation as PNG images with height 128px
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'frame-%d.png', // sprintf format
  height: 128
})

// Render the first frame of the animation as a JPEG image
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'preview.jpg'
})

Output Size

If you don't pass width or height, the animation's intrinsic size will be used, and if that doesn't exist it will use 640x480.

If you pass width or height, the other dimension will be inferred by maintaining the original animation's aspect ratio.

If both width and height are passed, the output will have those dimensions, but there will be extra whitespace (or transparency if rendering PNGs) due to lottie-web's default rendererSettings.preserveAspectRatio of xMidyMid meet (docs and demo).

For mp4 outputs, the height may be different by a pixel due to the x264 encoder requiring even heights.

API

renderLottie

Renders the given Lottie animation via Puppeteer.

You must pass either path or animationData to specify the Lottie animation.

output must be one of the following:

An image to capture the first frame only (png or jpg)
An image pattern (eg. sprintf format 'frame-%d.png' or 'frame-%012d.jpg')
An mp4 video file (requires FFmpeg to be installed)
A GIF file (requires Gifski to be installed)

Type: function (opts): Promise

opts object Configuration options
- opts.output string Path or pattern to store result
- opts.animationData object? JSON exported animation data
- opts.path string? Relative path to the JSON file containing animation data
- opts.width number? Optional output width
- opts.height number? Optional output height
- opts.jpegQuality object JPEG quality for frames (does nothing if using png) (optional, default 90)
- opts.quiet object Set to true to disable console output (optional, default false)
- opts.deviceScaleFactor number Window device scale factor (optional, default 1)
- opts.renderer string Which lottie-web renderer to use (optional, default 'svg')
- opts.rendererSettings object? Optional lottie renderer settings
- opts.puppeteerOptions object? Optional puppeteer launch settings
- opts.ffmpegOptions object? Optional ffmpeg settings for crf, profileVideo and preset values
- opts.gifskiOptions object? Optional gifski settings (only for GIF outputs)
- opts.style object Optional JS CSS styles to apply to the animation container (optional, default {})
- opts.inject object Optionally injects arbitrary string content into the head, style, or body elements. (optional, default {})
  - opts.inject.head string? Optionally injected into the document
  - opts.inject.style string? Optionally injected into a <style> tag within the document
  - opts.inject.body string? Optionally injected into the document
- opts.browser object? Optional puppeteer instance to reuse

Compatibility

All lottie-web features should be fully supported by the svg, canvas, and html renderers.

This includes all of the animations on lottiefiles.com! 🔥

Also see Lottie's full list of supported features.

puppeteer-lottie-cli - CLI for this module.
puppeteer - Headless Chrome Node API.
awesome-puppeteer - Curated list of awesome puppeteer resources.
lottie - Render After Effects animations natively on Web, Android and iOS, and React Native.

License

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter

puppeteer-lottie's People

Contributors

Stargazers

Watchers

puppeteer-lottie's Issues

Use webcodec to accelerate lottie to video

Use puppeteer in nodejs using webcodec to convert lottie file to mp4 video

No need to take screenshot of each frame (it takes much time）

Its workflow basiclly looks like this:

load in puppeteer lottie-web
encode each frame by webcodec API : VideoEncoder and VideoFrame
frames -> buffer -> blob -> file
send back to nodejs
use ffmpeg to generate video

I write a demo here https://github.com/Dramalf/puppeteer-webcodec-lottie/tree/master

I think it can be merged into this project

Fix output rate when rendering to mp4

On my system ffmpeg set incorrect framerate by default: 25 instead of 60. It's better to specify it obviously. Could you please add one more -r parameter at the end of the ffmpegArgs.push definition to fix it.

working with typescript

I am trying to use this in a typescript project. But I just can't make it work. Is it possible to use this in typescript?

Can't make it work

Hi, i can't make it work:
I tried the library and the CLI version (last debian, fresh nodejs v15 and npm install. Lottie json from official lottie hub)
For the library I used sample code:

await renderLottie({

SyntaxError: await is only valid in async function

And for the library AND the CLI,i always have chromium errors (libXss -> i installed dependencies-> libcairo error etc.....)

Example: " Loading browser(node:475) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/node_modules/puppeteer-lottie/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory"

How do you make it work?

image sequence not showing in exported mp4 or gif unless including in json (encoded)

I have some animation/text happening on top of a video which I have rendered to an image sequence in the comp. When using puppeteer-lottie the images are ignored even though they are referenced in the data.json. I have tried a nested comp with the image sequence in it, and also dumping the image sequence to the main comp (note: i've tried importing the images as a sequence, and also individually and then using keyframe assistant to make them all 1 frame each in length). I have even tried converting the PNG's to JPG and changing the reference in the data.json thinking it might have been something with FFMPEG.

Each time the MP4 and/or gif only shows the animation/text, but the image sequence in the background is black. The only way i've achieved this working is by checking "include in json" which base64 encodes the images which makes the data.json unmanageable.

Is this not possible/supported any other way but including the images encoded in the json?

Experiment with rendering multiple frames concurrently

Each frame is mostly independent of every other frame, so we could potentially render N frames concurrently by loading the same webpage in N tabs / pages.

This should be viewed as a perf experiment and optional toggle since it's performance will likely depend on the number of underlying CPUs, memory, and other platform considerations.

The only real change we'll have to be careful with in the implementation is our use of image2pipe for piping individual frames into ffmpeg when rendering mp4 outputs. Since the frames won't necessarily be rendered in order anymore, we'll need to either:

A) write these temp frames out to disk like we do for the gif renderer
or
B) buffer the frame images in memory and pipe them out only once all preceding frames have been piped

I'm leaning towards option B since it'll likely be more efficient but am open to other thoughts / feedback as well.

Question on the injection of html content

Hi,
This package is very promising and useful, thanks!

I experimented a bit with injected html inside the animation, by using for example:

renderLottie({
      path: `${__dirname}/../../data/animation.json`,
      output: `${__dirname}/../../rendered/frame-%d.png`,
      height: 720,
      width: 1280,
      inject: {
        body: '<div id="title">A custom title</div>',
         style: `#title {
          color: rgb(230, 107, 0);
      }`,
      },
    });

But the injected title was not rendered on my animation.
It seems that only what is inside the div with id root is rendered, and not what is injected via inject.body.

What do you think about it?

Thanks!

How to improve rendering speed

My lottie has 300 frames which plays at 30fps. The render resolution is 1920x1080. It took around 150 sec to render into png sequence. But if i added a background image to the json file, the render time shot up to 500 sec.
I was wondering what is botelnecking the system and is there any way to optimize puppeteer-lottie rendering speed even if i have to sacrifice on render quality or is multi-processing an option

MP4 Exports not running smoothly

I'm rendering lottie file with frame rate of 60FPS but puppeteer-lottie render gives very bad results.
Can you guide me how to improve the frame rate .

Array of tasks

It would be cool if it could accept an array of objects to render so that you do not have to open and close the browser in a loop. I am experiencing high CPU and I am wondering if opening and closing the browser is causing this.

Update to latest lottie

I am having some weird kerning issues with my text, but its working fine locally on web version. I am wondering if something has been fixed as lottie has had many upgrades in the past 5 months.

Use CSS classes /ID's from After FX when rendering PNG sequence

Hi,

first very nice Framework!!! Appreciate using it!

I have a question regarding the "opts.style" possibility. I set up the After FX animation with CSS ID's to control those using CSS. So I am able to use CSS to control After FX Layer of my animation (color, size) and its displayed fine in lottie player.

When rendering it to PNG sequence using Pupeteer I can set single CSS parameters for the whole animation (e.g.: Width: 100px). But I wonder if I can use the CSS ID / Class from the After FX layer that is supported by Lottie.

https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript

Is this supported in Lottie-Pupeteer? Is there an example how to set it up maybe?

Thanks for any help.

Single frame of transparency in valid animations

If you export an animation from After Effects with the layers the exact same length as the animation (i.e. 3 second animation time, each layer takes up 3 seconds of time) the final frame of the resulting video is completely transparent. Extending the layers a single frame past the "real animation time" (making it take up 3 seconds plus one frame) fixes the problem. If an "animation" only takes up one frame, nothing is rendered at all.

This issue does not occur in any other Lottie previewer I checked.

While there is a workaround, this makes me think you're accidentally skipping the first frame of the animation when rendering the animation. Is this something you could look in to?

Add Audio to Mp4 output

I have a Lottie JSON with Audio Layer, if I use that JSON for mp4 output, audio is not added to output video.

I want to use it with php laravel, Can you guide how to do it.

[Reuqest] Add support for external URLs

Native support for external URLs instead of local file / animation data would be great.

How to support a mp3 file?

I want to add a mp3 file to this video. But now, I have to use the generated video and mp3 to synthesize the video again

Protocol error (Page.captureScreenshot): Target closed.

I'm getting the error Protocol error (Page.captureScreenshot): Target closed. when running puppeteer-lottie. It seems like its related to puppeteer/puppeteer#1385. puppeteer/puppeteer#1385 (comment) suggests a fix to this person's specific code but it looks like a similar code line somewhere in the index file may be the issue.

UnhandledPromiseRejectionWarning: Error: Node has 0 height.

Hi,
This package is great, thanks!

There are some error when I set renderer = "html",

await renderLottie({
    path: "data.json",
    output: "data.mp4",
    ffmpegOptions: {
      crf: 30,
      profileVideo: "main",
      preset: "superfast",
    },
    width: 368,
    height: 640,
    renderer: "html",
  });

And it will report some error:

(node:5700) UnhandledPromiseRejectionWarning: Error: Node has 0 height.
    at assert (C:\ml\zishuo\node_modules\puppeteer\lib\helper.js:283:11)
    at ElementHandle.screenshot (C:\ml\zishuo\node_modules\puppeteer\lib\JSHandle.js:441:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (C:\ml\zishuo\node_modules\puppeteer\lib\helper.js:111:15)
    at module.exports (C:\ml\zishuo\node_modules\puppeteer-lottie\index.js:366:41)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Is this something error in Pupeteer? Thanks for any help!

Support animated WebP

Hello, do you have any plans to support rendering Lottie files to animated WebP?

issues implementing background color

I'm having issues customizing the background colors for exporting to .png or .mp4.

It seems this issue was solved here: #transitive-bullshit/puppeteer-lottie-cli#12

here is my code:

await renderLottie({ animationData: JSON.parse(data), output: downloadPath, background: '#000000', height: canvasHeight, width: canvasWidth, puppeteerOptions:{ args: ['--no-sandbox', '--disable-setuid-sandbox'] }

the png is still coming back with a transparent background. Thanks.

Rendering with external src

Hello there,

I was wondering if it is possible to render animations that source .pngs in the other folder.

By default After Effects converts animations into json with all the raster images and etc. in separate folder. When uploading to Lottie files you can use .zip archive to provide the source, but how do you include the source using this library? With HTML injection of some kind?

Will be happy to get any help or suggestions

How to render a specific frame?

Hi, thanks for the amazing tool that you developed.
I am trying to render a specific frame within a 750 frame animation. The tool only allows me to either render the first frame or all the frames. Am I missing something? Or this feature is not currently supported?

Colours mismatched

Hi,
The colours in lottie file we use in animation are different then in exported mp4 file. Here is a picture for reference:

On left is original animation, uploaded to lottie files, and to the right exported file.

Any idea how that can be matched?

I've tried setting the background, also changing the default background in html, but the animation itself has a background, which is incorrectly rendered.