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);
    }
});

@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