Skip to content

Instantly share code, notes, and snippets.

@phanan

phanan/runner.js

Last active Mar 13, 2021
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

@rushi216 rushi216 commented Jan 20, 2016

wouldnt it be 1000/framerate ?

@jimkang

This comment has been minimized.

Copy link

@jimkang jimkang commented May 12, 2016

This is awesome. Thanks!

@karthickvkumar

This comment has been minimized.

Copy link

@karthickvkumar karthickvkumar 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

@maddo7 maddo7 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

@nghiemvien nghiemvien 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

@hendrikreimers hendrikreimers 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

@Nuptial Nuptial commented Oct 3, 2017

@maddo7 Do you find any solution?

@imrek

This comment has been minimized.

Copy link

@imrek imrek commented May 29, 2018

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

@xnohat

This comment has been minimized.

Copy link

@xnohat xnohat commented Feb 15, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment