Allow users to export animated GIFs

[fdb]

When creating an animation, it would be nice if users could export the animation as an animated GIF.

This is challenging for a number of reasons:

• The output are HTML / SVG elements, not a canvas tag, so we can't use something like GIF.js
• The element we want to convert to GIF can be any element, of any size. The size can even change between frames.

One idea is to create a server-side renderer that could take seed sketches and render them in a headless browser, like Headless Chrome or PhantomJS. This would work as a webservice: we request a URL and it returns a GIF image.

[kunal-mohta]

Are you planning to render the animation, then screencast it and finally convert it into a GIF using some other webservice?

[fdb]

I would suggest creating a special URL route that only shows the output (like the embed view, but without the source editor and navigation bar), then use Chrome Headless to screencapture the page, then use something like GIF.js to generate a GIF file out of that.

This requires setting up a custom webservice (preferably using Heroku or Docker) that can convert sketches to GIF on-demand.

[kunal-mohta]

Okay, so basically making an API?

[fdb]

Yes, a basic webservice that takes in a Seed URL or Sketch address and outputs a GIF image. This could be the API address:

https://seedgif.herokuapp.com/create?sketch=-L4uLB99JzFHMPcVoiTm

[fdb]

Here's some documentation on running Headless Chrome on Heroku:
https://timleland.com/headless-chrome-on-heroku/

The official Heroku buildpack looks promising:
https://elements.heroku.com/buildpacks/minted/heroku-buildpack-chrome-headless

[kunal-mohta]

I have had a look over the links that you provided.
It seems like the first focus should be on being able to make and run the app locally.

[kunal-mohta]

I was trying headless chrome locally using Puppeteer
but I am facing this error

My code is this

Are you familiar with this kind of errors?
I am not being able to figure a way out of this.

[fdb]

No idea. Could you try a different site? Maybe google.com does not support headless browsing?

[kunal-mohta]

Let me try.

[kunal-mohta]

Nope, got the same error at https://seed.emrg.be/

[fdb]

Works for me:

Here's the code:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage();
    await page.goto('https://seed.emrg.be/');
    await page.screenshot({path: 'seed.png'});
    await browser.close();
})();

[fdb]

The main issue now is that the actual sketch page loads the script async, so it shows the "loading..." indicator when screenshotting the page:

I've also linked issue #32 since we don't want to screenshot the entire UI, just the viewer portion.

[kunal-mohta]

Wait, how are you able to work with async - await syntax in Node.js without try - catch phrase.
Doesn't it report UnhandledPromiseRejectionWarning?

[fdb]

I don't seem to have any issues with it. I'm using:

$ node -v
v9.4.0

[kunal-mohta]

Mine is v8.9.0. 😟