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

wouldnt it be 1000/framerate ?

This is awesome. Thanks!

hi @phanan thanks for this awesome code, but i got some error while implementing this code.

Thanks in advance

It starts with 25 fps but drops down to 3fps after several seconds. Is there a way to keep the framerate high? I'd like to stream a webpage and like this it's not possible.

Can you please update it ? phantomjs render('/dev/stdout'..) print nothing to stdout. Then ffmpeg can't capture it.
I'm using centos

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