Skip to content

Instantly share code, notes, and snippets.

@phanan phanan/runner.js
Last active Jul 18, 2019

Embed
What would you like to do?
Record a webpage with PhantomJS and FFMpeg
// 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);
}
});
@rushi216

This comment has been minimized.

Copy link

commented Jan 20, 2016

wouldnt it be 1000/framerate ?

@jimkang

This comment has been minimized.

Copy link

commented May 12, 2016

This is awesome. Thanks!

@karthickvkumar

This comment has been minimized.

Copy link

commented Oct 2, 2016

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

Thanks in advance

@maddo7

This comment has been minimized.

Copy link

commented Mar 30, 2017

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.

@nghiemvien

This comment has been minimized.

Copy link

commented Apr 30, 2017

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

@hendrikreimers

This comment has been minimized.

Copy link

commented Jun 12, 2017

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!

@Nuptial

This comment has been minimized.

Copy link

commented Oct 3, 2017

@maddo7 Do you find any solution?

@imrek

This comment has been minimized.

Copy link

commented May 29, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.