node.js - 跨设备编码静态文件以使用 FFMPEG 在浏览器中流式传输(分段的 h264?)

标签 node.js ffmpeg streaming html5-video h.264

我正在用 NodeJS 构建一个 mediacenter 应用程序,进展顺利。 (你可以在 Github 上查看:https://github.com/jansmolders86/mediacenterjs)

我正在使用 FFMPEG 将本地(静态)电影转码为流,然后将其发送到浏览器。

起初我使用 h264 和 Flash,它在浏览器中工作,但我真的需要它在 Android 和 iOS 上工作(所以没有 Flash),最好在 Raspberry Pi 上工作。

但是要让它在所有设备上播放都快让我发疯了!

我从无数小时阅读文章、教程和堆栈溢出帖子中收集了所有这些难题,这使我得出结论,我需要产生以下内容:

  • Use video codec H264 to transcode to MP4
  • Move the moovatom '-movflags' to make a MP4 streamable
  • Segment the stream so Apple can play the stream as well.

但是却一事无成。每次我生成一系列 FFMPEG 设置时,这些设置要么不起作用,要么在某些设备上工作而不是在所有设备上工作。

我的一些失败尝试:

我的 flash 尝试 -> 主要问题(未在 IOS 中运行):

    '-y','-ss 0','-b 800k','-vcodec libx264','-acodec mp3'\ 
    '-ab 128','-ar 44100','-bufsize 62000', '-maxrate 620k'\
    metaDuration,tDuration,'-f flv

我的 HLS 尝试 -> 主要问题(未在浏览器中运行):

        '-r 15','-b:v 128k','-c:v libx264','-x264opts level=41'\
        '-threads 4','-s 640x480','-map 0:v','-map 0:a:0','-c:a mp3'\
        '-b:a 160000','-ac 2','-f hls','-hls_time 10','-hls_list_size 6'\
        '-hls_wrap 18','-start_number 1'

我的 MP4 尝试 -> 主要问题(时长变短,后面的视频快过)

       '-y','-ss 0','-b 800k','-vcodec libx264','-acodec mp3'\
       '-ab 128','-ar 44100','-bufsize 62000', '-maxrate 620k'\
       metaDuration,tDuration,'-f mp4','-movflags','frag_keyframe+empty_moov'

第二次 MP4 尝试:-> 主要问题(持续时间缩短,视频后半部分速度过快)

    '-y','-vcodec libx264','-pix_fmt yuv420p','-b 1200k','-flags +loop+mv4'\
    '-cmp 256','-partitions +parti4x4+parti8x8+partp4x4+partp8x8+partb8x8'\
    '-me_method hex','-subq 7','-trellis 1','-refs 5','-bf 3','-coder 1'\
    '-me_range 16','-g 150','-keyint_min 25','-sc_threshold 40'\
    '-i_qfactor 0.71','-acodec mp3','-qmin 10','-qdiff 4','-qmax 51'\
    '-ab 128k','-ar 44100','-threads 2','-f mp4','-movflags','frag_keyframe+empty_moov'])

这是使用这些设置运行的 FFMPEG 日志的示例:

        file conversion error ffmpeg version N-52458-gaa96439 Copyright (c) 2000-2013 the FFmpeg developers
          built on Apr 24 2013 22:19:32 with gcc 4.8.0 (GCC)
          configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --e
        nable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libcaca --enable-libfreetype --enable
        -libgsm --enable-libilbc --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --ena
        ble-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwola
        me --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libxavs --enabl
        e-libxvid --enable-zlib
          libavutil      52. 27.101 / 52. 27.101
          libavcodec     55.  6.100 / 55.  6.100
          libavformat    55.  3.100 / 55.  3.100
          libavdevice    55.  0.100 / 55.  0.100
          libavfilter     3. 60.101 /  3. 60.101
          libswscale      2.  2.100 /  2.  2.100
          libswresample   0. 17.102 /  0. 17.102
          libpostproc    52.  3.100 / 52.  3.100
        [avi @ 02427900] non-interleaved AVI
        Guessed Channel Layout for  Input Stream #0.1 : mono
        Input #0, avi, from 'C:/temp/the avengers.avi':
          Duration: 00:00:34.00, start: 0.000000, bitrate: 1433 kb/s
            Stream #0:0: Video: cinepak (cvid / 0x64697663), rgb24, 320x240, 15 tbr, 15 tbn, 15 tbc
            Stream #0:1: Audio: pcm_u8 ([1][0][0][0] / 0x0001), 22050 Hz, mono, u8, 176 kb/s
        Please use -b:a or -b:v, -b is ambiguous
        [libx264 @ 02527c60] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX
        [libx264 @ 02527c60] profile High, level 2.0
        [libx264 @ 02527c60] 264 - core 130 r2274 c832fe9 - H.264/MPEG-4 AVC codec - Copyleft 2003-2013 - http://www.videolan.org/x26
        4.html - options: cabac=1 ref=5 deblock=1:0:0 analyse=0x3:0x133 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=-2 threads=2 lookahead_threads=1 sliced_th
        reads=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 we
        ightb=1 open_gop=0 weightp=2 keyint=150 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=abr mbtree=1 bitrate=120
        0 ratetol=1.0 qcomp=0.60 qpmin=10 qpmax=51 qpstep=4 ip_ratio=1.41 aq=1:1.00
        Output #0, mp4, to 'pipe:1':
          Metadata:
            encoder         : Lavf55.3.100
            Stream #0:0: Video: h264 ([33][0][0][0] / 0x0021), yuv420p, 320x240, q=10-51, 1200 kb/s, 15360 tbn, 15 tbc
            Stream #0:1: Audio: mp3 (i[0][0][0] / 0x0069), 44100 Hz, mono, s16p, 128 kb/s
        Stream mapping:
          Stream #0:0 -> #0:0 (cinepak -> libx264)
          Stream #0:1 -> #0:1 (pcm_u8 -> libmp3lame)
        Press [q] to stop, [?] for help
        frame=  106 fps=0.0 q=10.0 size=       1kB time=00:00:06.94 bitrate=   1.4kbits/s
        frame=  150 fps=149 q=14.0 size=       1kB time=00:00:09.87 bitrate=   1.0kbits/s
        frame=  191 fps=126 q=16.0 size=       1kB time=00:00:12.61 bitrate=   0.8kbits/s
        frame=  244 fps=121 q=16.0 size=    2262kB time=00:00:16.14 bitrate=1147.6kbits/s
        frame=  303 fps=120 q=14.0 size=    2262kB time=00:00:20.08 bitrate= 922.2kbits/s
        frame=  354 fps=117 q=15.0 size=    3035kB time=00:00:23.48 bitrate=1058.6kbits/s
        frame=  402 fps=113 q=15.0 size=    3035kB time=00:00:26.67 bitrate= 932.1kbits/s
        frame=  459 fps=113 q=16.0 size=    4041kB time=00:00:30.43 bitrate=1087.7kbits/s
        frame=  510 fps=103 q=2686559.0 Lsize=    5755kB time=00:00:33.93 bitrate=1389.3kbits/s

        video:5211kB audio:531kB subtitle:0 global headers:0kB muxing overhead 0.235111%
        [libx264 @ 02527c60] frame I:6     Avg QP:10.55  size: 25921
        [libx264 @ 02527c60] frame P:245   Avg QP:12.15  size: 14543
        [libx264 @ 02527c60] frame B:259   Avg QP:15.55  size:  6242
        [libx264 @ 02527c60] consecutive B-frames:  6.1% 73.7% 14.7%  5.5%
        [libx264 @ 02527c60] mb I  I16..4: 19.9%  6.2% 73.9%
        [libx264 @ 02527c60] mb P  I16..4:  6.0%  0.2% 12.0%  P16..4: 35.4%  9.6% 16.3%  7.0%  5.6%    skip: 7.8%
        [libx264 @ 02527c60] mb B  I16..4:  0.7%  0.0%  4.3%  B16..8: 27.6% 17.2% 17.0%  direct:17.3%  skip:15.9%  L0:39.4% L1:43.2%
        BI:17.4%
        [libx264 @ 02527c60] final ratefactor: 11.41
        [libx264 @ 02527c60] 8x8 transform intra:1.6% inter:4.0%
        [libx264 @ 02527c60] coded y,uvDC,uvAC intra: 93.0% 97.0% 94.9% inter: 58.4% 58.7% 50.6%
        [libx264 @ 02527c60] i16 v,h,dc,p: 15% 26% 54%  5%
        [libx264 @ 02527c60] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 16% 17% 39%  4%  4%  3%  1%  6%  9%
        [libx264 @ 02527c60] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 28% 34% 21%  4%  2%  2%  2%  2%  5%
        [libx264 @ 02527c60] i8c dc,h,v,p: 51% 24% 19%  6%
        [libx264 @ 02527c60] Weighted P-Frames: Y:4.1% UV:1.2%
        [libx264 @ 02527c60] ref P L0: 68.2%  9.8% 11.0%  5.6%  4.6%  0.8%  0.0%
        [libx264 @ 02527c60] ref B L0: 87.7%  8.0%  3.9%  0.4%
        [libx264 @ 02527c60] ref B L1: 97.8%  2.2%
        [libx264 @ 02527c60] kb/s:1255.36

最后,这是启动 FFMPEG 的 Node 代码。 (我使用的是 Fluent-ffmpeg 模块:https://github.com/schaermu/node-fluent-ffmpeg)

    var proc = new ffmpeg({ source: movie, nolog: true, timeout:15000})                         
        .addOptions(['-r 15','-b:v 128k','-c:v libx264','-x264opts level=41','-threads 4','-s 640x480','-map 0:v','-map 0:a:0','-c:a mp3','-b:a 160000','-ac 2','-f hls','-hls_time 10','-hls_list_size 6','-hls_wrap 18','-start_number 1 stream.m3u8'])
        .writeToStream(res, function(retcode, error){
            if (!error){
                console.log('file has been converted succesfully',retcode .green);
            }else{
                console.log('file conversion error',error .red);
            }
        });

总结一下这个非常长且代码繁重的问题:

我希望这不是一个懒惰的请求,但是有人可以向我展示/解释哪些 FFMPEG 设置可以/应该在所有平台(现代浏览器、Android 和 iOS)上工作,从而产生一个静态文件流,我可以发送到 HTML5 播放器。

[编辑] 如果通用选项不可用,我需要什么

如果这不可能像某些帖子所建议的那样,我很乐意看到一组 FFMPEG 设置,就 mp4 流而言,它们可以正确完成工作。 (例如编码可流式传输的 mp4)。

流式mp4需要以下内容

  • A shifted moovAtom
  • It needs to be h264

非常感谢您的帮助!

最佳答案

没有一种格式可以在所有设备和浏览器上播放。 HTML5 让我们更接近了,但关于格式和编解码器的争论仍然存在。我在 Zencoder 的 friend 有一篇新的博客文章 ( HERE ) 解决了这个问题。

编辑:您要求提供更多细节。同样,这取决于您希望定位的平台。我将在这里介绍几个。

这应该可以在所有支持 h.264 编解码器的现代浏览器上播放。它也应该在 iPhone4 及更高版本上播放:

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4

iPhone 3gs 不支持 main profile,支持的最大分辨率为 640x480。此命令将为这个旧设备编码。

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4

我编码了一些示例文件并在此处创建了一个网页: http://szatmary.org/stackoverflow/18758133/

HTML 看起来像这样:

<!DOCTYPE html>
<html>
<body>
<br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4<br>
<video controls>
  <source src="movie1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4<br>
<video controls>
  <source src="movie2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

这里的命令分解为每个元素的含义:

命令 + 输入文件(应该很明显):

ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4

使用libx264编码视频:

-vcodec libx264

将 h.264 配置文件设置为主。基线将允许在旧设备上播放,但你会牺牲一点质量:

-profile:v main 

将比特率设置为每秒 512 kb。根据可用带宽选择一个值。 LAN/WiFi 更高,3G/LTE 更低

-b:v 512k 

将视频缩放到 720p 分辨率(再次取决于目标平台)

-s 1280x720 

以每秒 30 帧的速度编码:

-r:v 30 

使用 libfdk_aac 对音频进行编码。或者如果你想要 mp3,请使用 libmp3lame。强烈推荐 AAC。它在 ios 上有更好的支持并产生更高质量的音频:

-acodec libfdk_aac

将音频比特率设置为每秒 128 kb。您也可以针对带宽调整此项。使用 AAC,您可能低至 32k

-b:a 128k 

将音频采样率设置为每秒 48000 个样本。如果使用 mp3,则为 ios 执行 44100

-r:a 48000

这告诉 ffmpeg 将 moov 原子放在 mp4 文件的开头。

-movflags faststart 

输出文件(-y告诉ffmpeg它可以不问就覆盖文件)

-y movie1.mp4

关于node.js - 跨设备编码静态文件以使用 FFMPEG 在浏览器中流式传输(分段的 h264?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18758133/

相关文章:

scala - 将输入流式传输到 Scala 中的外部进程

node.js - 将 Cypress 升级到最新版本如果不强制安装则无法工作

php - 如何在另一个页面恢复Socket连接?

ffmpeg - 如何使用 execv 执行 ffmpeg 摄取 rtmp 流

php - 使用 PHP 和 Guzzle 流式传输远程文件

android - 流式传输到 VideoView 仅在使用三星手机时在 Wifi 上播放

node.js - 如何递归卸载所有 node_modules 文件夹

node.js - 使用 ffmpeg 抓取 hevc h265 流

android - 为 android NDK 创建独立工具链

ffmpeg - 当我在后台运行 `ffmpeg` 时,如何防止 `suspended (tty output)` ?