2

I am trying to use phantomjs with ffmpeg to complie videos from screenshots of a webpage as described here: https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J

I have the following test.js file:

var page = require('webpage').create();

page.clipRect = { top: 0, left: 0, width: 900, height: 800};
page.viewportSize = { width: 900, height: 800};

var url = 'http://dl.dropbox.com/u/621993/voronoi/voronoi.html';
var frames = 100;

page.open(url, function(){
    setInterval(function(){
        page.render('/dev/stdout');

        if( frames == 0 ){
            phantom.exit();
        }

        frames--;

    }, 100);
});

Then I run this command, taken from the link above:

$ phantomjs test.js |ffmpeg -c:v png -f image2pipe -r 10 -sameq -i - -y test.mp4

Including -sameq causes an error in ffmpeg, so I took it out and ran:

$ phantomjs test.js |ffmpeg -c:v png -f image2pipe -r 10 -i - -y test.mp4

I get the following output from ffmpeg:

ffmpeg version 2.0 Copyright (c) 2000-2013 the FFmpeg developers
  built on Jul 22 2013 09:14:18 with llvm-gcc 4.2.1 (LLVM build 2336.11.00)
  configuration: --prefix=/Volumes/Ramdisk/sw --enable-gpl --enable-pthreads --enable-version3 --enable-libspeex --enable-libvpx --disable-decoder=libvpx --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libx264 --enable-avfilter --enable-libopencore_amrwb --enable-libopencore_amrnb --enable-filters --enable-libgsm --arch=x86_64 --enable-runtime-cpudetect
  libavutil      52. 38.100 / 52. 38.100
  libavcodec     55. 18.102 / 55. 18.102
  libavformat    55. 12.100 / 55. 12.100
  libavdevice    55.  3.100 / 55.  3.100
  libavfilter     3. 79.101 /  3. 79.101
  libswscale      2.  3.100 /  2.  3.100
  libswresample   0. 17.102 /  0. 17.102
  libpostproc    52.  3.100 / 52.  3.100
Input #0, image2pipe, from 'pipe:':
  Duration: N/A, bitrate: N/A
    Stream #0:0: Video: png, rgba, 900x800 [SAR 2835:2835 DAR 9:8], 10 fps, 10 tbr, 10 tbn, 10 tbc
No pixel format specified, yuv444p for H.264 encoding chosen.
Use -pix_fmt yuv420p for compatibility with outdated media players.
[libx264 @ 0x7f8973803800] using SAR=1/1
[libx264 @ 0x7f8973803800] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX
[libx264 @ 0x7f8973803800] profile High 4:4:4 Predictive, level 3.1, 4:4:4 8-bit
[libx264 @ 0x7f8973803800] 264 - core 133 - H.264/MPEG-4 AVC codec - Copyleft 2003-2013 - http://www.videolan.org/x264.html - options: cabac=1 ref=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=4 threads=6 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=10 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
Output #0, mp4, to 'test.mp4':
  Metadata:
    encoder         : Lavf55.12.100
    Stream #0:0: Video: h264 (libx264) ([33][0][0][0] / 0x0021), yuv444p, 900x800 [SAR 1:1 DAR 9:8], q=-1--1, 10240 tbn, 10 tbc
Stream mapping:
  Stream #0:0 -> #0:0 (png -> libx264)
pipe:: Input/output error0 size=      65kB time=00:00:04.10 bitrate= 130.5kbits/s    
frame=   93 fps= 15 q=-1.0 Lsize=      71kB time=00:00:09.10 bitrate=  63.8kbits/s    
video:69kB audio:0kB subtitle:0 global headers:0kB muxing overhead 2.696543%
[libx264 @ 0x7f8973803800] frame I:1     Avg QP:15.17  size: 50212
[libx264 @ 0x7f8973803800] frame P:24    Avg QP: 8.91  size:   575
[libx264 @ 0x7f8973803800] frame B:68    Avg QP: 9.69  size:    87
[libx264 @ 0x7f8973803800] consecutive B-frames:  2.2%  0.0%  3.2% 94.6%
[libx264 @ 0x7f8973803800] mb I  I16..4: 64.2% 19.6% 16.1%
[libx264 @ 0x7f8973803800] mb P  I16..4:  2.8%  0.2%  0.1%  P16..4:  0.5%  0.0%  0.0%  0.0%  0.0%    skip:96.3%
[libx264 @ 0x7f8973803800] mb B  I16..4:  0.0%  0.0%  0.0%  B16..8:  3.1%  0.0%  0.0%  direct: 0.0%  skip:96.9%  L0:76.4% L1:23.6% BI: 0.0%
[libx264 @ 0x7f8973803800] 8x8 transform intra:13.9% inter:54.0%
[libx264 @ 0x7f8973803800] coded y,u,v intra: 7.4% 4.8% 5.2% inter: 0.1% 0.1% 0.1%
[libx264 @ 0x7f8973803800] i16 v,h,dc,p: 68% 31%  2%  0%
[libx264 @ 0x7f8973803800] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 48% 20% 32%  0%  0%  0%  0%  0%  0%
[libx264 @ 0x7f8973803800] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 30% 31% 20%  3%  3%  3%  5%  3%  4%
[libx264 @ 0x7f8973803800] Weighted P-Frames: Y:0.0% UV:0.0%
[libx264 @ 0x7f8973803800] ref P L0: 91.9%  0.0%  7.4%  0.7%
[libx264 @ 0x7f8973803800] ref B L0: 20.5% 79.5%
[libx264 @ 0x7f8973803800] ref B L1: 99.9%  0.1%
[libx264 @ 0x7f8973803800] kb/s:60.16

The output test.mp4 file is a blank 10 second video - just a black screen. From what i can tell, I am getting a pipe:: Input/output error from ffmpeg.

I am pretty new to ffmpeg and I have tried changing some parameters and video codecs in the ffmpeg call, but have not found a solution yet. Can anyone advise?

3 Answers 3

2

I got this to work by adding -pix_fmt yuv420p to the command:

$ phantomjs test.js | ffmpeg -y -c:v png -f image2pipe -r 10 -i - -c:v libx264 -pix_fmt yuv420p -movflags +faststart test.mp4

Otherwise the output will use a chroma subsampling type (yuv444p in this case) that is not compatible with "dumb" players like QuickTime which require yuv420p – YUV color space with 4:2:0 chroma subsampling.

Adding -movflags +faststart as an input option will allow the video to begin playing by the viewer before it is completely downloaded. Useful if the video will be viewed in a browser.

Default encoding settings for libx264 will be used in this example resulting in H.264 video. See the FFmpeg and x264 Encoding Guide for more information on controlling quality and encoding speed.

Sign up to request clarification or add additional context in comments.

2 Comments

Do not use -sameq: it does not mean "same quality" and has been removed from non-ancient ffmpeg (also you were using it as an input option). With libx264 use -crf instead as shown in the FFmpeg and x264 Encoding Guide. By default ffmpeg will try to avoid or minimize chroma subsampling, but "dumb" players like QuickTime can typical only decode YUV planar color space with 4:2:0 chroma subsampling.
Thank you for the explanation! This helps me better understand ffmpeg commands
1

I'm using user1690179's command but the mp4 is corrupted. I'm able to fix it with ./ffmpeg -i test.mp4 -c copy repaired.mp4

Maybe that's because of the pipe:: Input/output error? Maybe phantomjs doesn't end gracefully?

Comments

1

i don't know much about phantomjs but if you plan on using regular node.js with ffmpeg and request/spawn i have done something similar. It incorporates the use of request to pipe in images for the snapshot url and ffmpeg through spawn for the mjpeg

ffmpeg jpeg stream to webm only creates a file .webm with 1 frame (snapshot) or empty .webm file (mjpeg)

I was having trouble with making webm files from jpeg snapshot and mjpeg stream.. but the answer provided took care of it.

I hope someone finds it useful as this question is pretty old... and perhaps this method is better at serving the task.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.