websites that help convert html5 animations to video

[namisuki]

Hi,

I would like to convert HTML5 animations to video.

we have ccapture.js for converting canvas animations to video but it is a real headache to convert html5 animations to video. Yes, I did the research for the past two days on this single topic and I read all the threads in this forum but nothing helped much. 

(Here are some of the posts I read here: )
 

https://greensock.com/forums/topic/19081-is-it-possible-to-generate-mp4-from-gsap-animations/?ct=1595485518

https://greensock.com/forums/topic/18038-timelinelite-to-mp4/?ct=1595485518

https://greensock.com/forums/topic/22038-recordexport-html5-animation-as-mp4-video/?ct=1595485520

https://greensock.com/forums/topic/14732-is-there-anyway-to-export-animations-as-video/?ct=1595485522

https://greensock.com/forums/topic/14596-export-to-animated-gif-mp4-or-mov/?ct=1595485524

 

 

I have found few online services like

https://urlrec.com/

https://html5animationtogif.com/
and

https://omnirender.com/

all these are working great but when I contact for API solution. there is no reply from them. do you know any service like above and is active?

or it would be even better if someone could help me get this working (I'm even willing to pay to someone who can help me set this up)...I saw @swampthang has been working on similar issue...hope maybe he (or anyone) can help.

 

The end result should be a video not a gif. I saw solutions to extract frame by frame to PNG/JPEG and then converting to gif/video but it is not providing good results and takes too much time for videos more than 2 mins.

 

Regards,

Nami

[swampthang]

@namisuki, some questions for you:

Are you attempting to do this on a web server?

Are you using or can you use node.js?

If you are or can use node.js, can you install any node module on your server?

 

I am using node.js in Electron and am using ffmpeg (using the node module fluent-ffmpeg) to build out videos. ffmpeg is lightening fast but you have to create a png sequence to hand it as an input.

I have everything in a master SVG. You can add images using the <image/> element in an embedded SVG and text can be added in a foreignObject. I can point you in the right direction for this if you need help. As for creating an image sequence, here's an example of how to create the sequence from a GSAP timeline (older so not 3.0)

 

See the Pen yaYJpm by swampthang (@swampthang) on CodePen

 

With each iteration of the loop I use the node module base64-img to save each sequence as a transparent png in sequence like this:

 

const base64Img = require('base64-img');

function processTimeline(obj) {

  let current = 0,
      thisImgData,
      thisFilePath,
      FPS = 30,
      saveDir = 'your/save-to/path/',
      masterTL = yourMasterTimeline,
      masterSVG = document.getElementById("stage-master"), // this is the id of the master SVG
      duration = masterTL.duration(),
      frames   = Math.ceil(duration / 1 * FPS);

  TweenMax.ticker.fps(FPS);

  masterTL.progress(0); // set the progress of the masterTL to 0

  // advance by 1 frame
  masterTL.progress(current++ / frames);

  makePNG();

  function makePNG() {

    if( current == frames ) {
      masterTL.progress(1); // make sure the timeline is all the way to the end
    }

    let xml  = new XMLSerializer().serializeToString(masterSVG);
    // get the base64 string
    thisImgData = buildSvgImageUrl(xml);
    // set the new filename
    let padded = pad(current,5);
    let filename = `img${padded}`;
    let thisFilePath = saveDir+filename+'.png';
    loadImage();

    function loadImage() {

      // now create the png file and save it to the save-to folder
      let canvas = document.createElement("canvas");
      canvas.width = WD;
      canvas.height = HT;

      let ctx = canvas.getContext("2d");

      let img  = new Image();
      img.crossOrigin = "Anonymous";

      img.onload = function() {
        ctx.drawImage(img, 0, 0, WD, HT);
        let url = canvas.toDataURL("image/png");
        // I'm using a node module by the name of base64-img (see entry at top)
        let fullPath = base64Img.imgSync(url, saveDir, filename);
        URL.revokeObjectURL(url);

        checkCurrentFrame();
      };

      img.src = thisImgData;

      img.onerror = function(error) {
        console.log(error);
      };
    }

    function checkCurrentFrame() {
      if( current == frames ) {

        createAnimationVideo(obj); // whatever your video creation script is

      } else {
        // advance the current frame
        masterTL.progress(current++ / frames);
        makePNG();
      }
    }
}

function buildSvgImageUrl(svg) {
  let b64 = window.btoa(unescape(encodeURIComponent(svg)));
  return "data:image/svg+xml;base64," + b64;
}

function pad(str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}

Adding the png sequence as a single input is as easy as:

 

proc = new ffmpeg();

proc.addInput(`${group.dir}img%05d.png`)
    .addInputOption('-thread_queue_size 512')
    .addInputOption(`-r ${obj.FPS}`)
    .addInputOption(`-f image2`);

You can look at the fluent-ffmpeg docs to see how to set up the ffmpeg process listeners like proc.on('start', function()). There's an on 'start', 'progress', 'error', and 'end'. Hope that helps. FFMPEG is an executable so it's not subject to the single thread limitation of javascript. fluent-ffmpeg is a node module that allows you to make calls to the executable from within a javascript thread.

 

[curtiswiens]

I recently used Screenshot on my mac to record a few html5 videos and it worked a lot better than I expected. 

 

[james coller]

Try This 

 

https://html5animationtogif.com/html5tovideo