ffmpeg - 使用 ffmpeg image2pipe 和 phantomjs 从网页屏幕截图渲染视频时出错

Question

我正在尝试使用 phantomjs 和 ffmpeg 来编译网页屏幕截图中的视频，如下所述: https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J

我有以下 test.js 文件:

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

然后我运行此命令，取自上面的链接:

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

包含-sameq会导致ffmpeg出错，所以我把它拿出来运行:

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

我从 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

输出 test.mp4 文件是一个空白的 10 秒视频 - 只是黑屏。据我所知，我从 ffmpeg 收到 pipe::Input/output 错误。

我对 ffmpeg 很陌生，我尝试更改 ffmpeg 调用中的一些参数和视频编解码器，但尚未找到解决方案。谁能给点建议吗？

Answer 1

我通过将 -pix_fmt yuv420p 添加到命令中来使其工作:

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

否则输出将使用chroma subsampling类型(本例中为 yuv444p)与 QuickTime 等“哑”播放器不兼容，QuickTime 需要 yuv420p - 具有 4:2:0 色度子采样的 YUV 色彩空间。

添加 -movflags +faststart 作为输入选项将允许观看者在完全下载之前开始播放视频。如果要在浏览器中观看视频，则很有用。

本示例将使用 libx264 的默认编码设置，生成 H.264 视频。请参阅FFmpeg and x264 Encoding Guide有关控制质量和编码速度的更多信息。