best way to create video from html5 animation [closed]

Answer 1

Well Techsmith Snagit captures in AVI, or their premium application camtasia ( generates a Flash video and a web page launcher) would work. Why not simply create a Powerpoint slide of the features you want to touch on and use a HTML set of pages of actual demos you want to illustrate in depth. This is the approach I am taking.

Answer 2

I had worked on a tool that does something similar to your requirements. It basically uses cutycapt (or any other tool to convert HTML with CSS into image) and takes series of screenshot depending on the frame rate required.

For that to work, the animations should be purely CSS animations and the tool interpolates the intermediate frame's CSS properties by parsing the CSS.

https://github.com/bpsagar/css2video

I'm not sure if the tool is complete, let me know if you are interested.

Answer 3

So far the best thing I've found so far that won't require me to write c code is using Titanium for desktop. It features a takeScreenshot function available from javascript code. The takeScreenshot function gets a screenshot of the entire desktop, but it should be easy to automate cropping that down. With a plethora of javascript animation libraries out there, I should be able to hack in ways of getting a screenshot at every frame, even if it can't happen in real-time.

While I won't be able to use CSS animations, this is probably the most flexible solution anyway, given that anything I can do with CSS animations I can do with javascript, and I'll have more control over frame rate, etc.

Additionally, this should allow me to use all things the browser is capable of, combining html/css/js/svg/canvas.

Answer 4

There is a tutorial with the code using both javascript and PHP to create a video from your canvas animation. The program save frame by frame of your canvas animation like in a movie, and then you can convert this stack of frames to a specific video format with the codec of your choice.

Code from the linked page.

(function () {
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width, h = canvas.height,
        p = [], clr, n = 200;

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ];

    for (var i = 0; i < n; i++) {
        // generate particle with random initial velocity, radius, and color
        p.push({
            x: w/2,
            y: h/2,
            vx: Math.random()*12-6,
            vy: Math.random()*12-6,
            r: Math.random()*4+3,
            clr: Math.floor(Math.random()*clr.length)
        });
    }

    function frame() {
        // cover the canvas with 50% opacity (creates fading trails)
        c.fillStyle = 'rgba(0,0,0,0.5)';
        c.fillRect(0, 0, w, h);

        for (var i = 0; i < n; i++) {
            // reduce velocity to 99%
            p[i].vx *= 0.99;
            p[i].vy *= 0.99;

            // adjust position by the current velocity
            p[i].x += p[i].vx;
            p[i].y += p[i].vy;

            // detect collisions with the edges
            if (p[i].x < p[i].r || p[i].x > w-p[i].r) {
                // reverse velocity (direction)
                p[i].vx = -p[i].vx;
                // adjust position again (in case it already passed the edge)
                p[i].x += p[i].vx;
            }
            // see above
            if (p[i].y < p[i].r || p[i].y > h-p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y += p[i].vy;
            }

            // draw the circle at the new postion
            c.fillStyle = clr[p[i].clr]; // set color
            c.beginPath();
            c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false);
            c.fill();
        }
    }

    // execute frame() every 30 ms
    setInterval(frame, 30);
}());

Answer 5

You are right in my opinion the best way to do it is to create images from the canvas's data and then compile all those images into a video via a module (fluent-ffmpeg for example, which is a node js package). It's pretty easy but be careful of the FPS (frame rate) if you create those images as fast as you can you may change the fps of your video, for example if you use recursively requestAnimationFrame() you will be at 60fps. So, instead of reading a html5 video you should set the time each 1/30s (for example if you want a 30fps video) and create a image from the currentTime until the end of the video. And if you have not only one canvas, if you apply animations on your video via multiple canvas you could create a new empty canvas and draw all canvas's data on it to create only one image instead of one image for each canvas.