Record a webpage with PhantomJS and FFMpeg

runner.js

// Run this from the commandline:
// phantomjs runner.js | ffmpeg -y -c:v png -f image2pipe -r 24 -t 10  -i - -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp4

var page = require('webpage').create(),
    address = 'http://s.codepen.io/phanan/fullembedgrid/YPLewm?type=embed&safe=true&_t=1424767252279',
    duration = 3, // duration of the video, in seconds
    framerate = 24, // number of frames per second. 24 is a good value.
    counter = 0,
    width = 500,
    height = 500;

page.viewportSize = { width: width, height: height };

page.open(address, function(status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit(1);
    } else {
        window.setTimeout(function () {
            page.clipRect = { top: 0, left: 0, width: width, height: height };

            window.setInterval(function () {
                counter++;
                page.render('/dev/stdout', { format: 'png' });
                if (counter > duration * framerate) {
                    phantom.exit();
                }
            }, 1/framerate);
        }, 200);
    }
});

Hey, have you tried to render a website in fullhd with web animations (like css3 / jquery) successful?

I've tried it, but the animation is broken complety in the final video. If i'm trying it with just a area and not full-hd it seems to work. But i wanna capture a website in full-hd with animations etc and want to stream it to another machine.

hope anyone can help me with this! thanks a lot!

@maddo7 Do you find any solution?

It record the initial frame only, not the subsequent ones. What could be the problem?

Should change pipeline to this for cover all screen size (or view port size)

| ffmpeg -y -c:v png -f image2pipe -r 25 -t 10 -i - -c:v libx264 -pix_fmt yuv420p -movflags +faststart -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" out.mp4