首页 文章

在html页面播放h.264视频流

提问于
浏览
1

我在linux上使用 ffmpegvlc 来通过HTTP生成MPEG传输流( mpegts ) . 基本上 ffmpeg 捕获屏幕并使用 mpegts 生成 h.264 流,然后 vlc 用作通过 http 传递流的服务器 . 这就是我设法实现这一目标的方式 .

ffmpeg -f x11grab -s 1280x800 -r 30 -i :0.0+0,0  -f alsa -ac 2 -i pulse -vcodec libx264 -preset ultrafast -s 1280x800 -threads 0 -f mpegts - | vlc -I dummy - --sout '#std{access=http,mux=ts,dst=:3030}

关于结果流的一些有用的日志:

Output #0, mpegts, to 'pipe:':
  Metadata:
    encoder         : Lavf57.72.101
    Stream #0:0: Video: h264 (libx264), yuv444p(progressive), 1280x800, q=-1--1, 30 fps, 90k tbn, 30 tbc
    Metadata:
      encoder         : Lavc57.96.101 libx264
    Side data:
      cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: -1
    Stream #0:1: Audio: mp2, 48000 Hz, stereo, s16, 384 kb/s
    Metadata:
      encoder         : Lavc57.96.101 mp2

一切看起来不错,除了我无法在HTML页面中播放流 . 有人能指出我在某个解决方案中,要么在HTML页面中呈现流,要么更改流类型以便呈现它 . 先感谢您!

EDIT: 我注意到一些奇怪的东西 . <video> 无法在Firefox(51.0.1)上为Ubuntu播放mp4文件(我还在Windows 8上使用Chrome测试过) . 我只需使用 ffmpeg 录制屏幕10秒钟,然后制作.mp4视频(见下文) .

ffmpeg -video_size 1280x800 -framerate 25 -f x11grab -i :0.0+0,0 -t 00:00:10 ~/Workspace/videostream/output.mp4

然后使用以下代码段播放output.mp4视频 .

<video width="480" height="320" controls="controls">
    <source src="output.mp4" type="video/mp4">
</video>

虽然我可以使用任何其他媒体播放器打开视频,但这根本无法播放 . output.mp4 文件的媒体信息(使用MediaInfo,v0.7.96)是:

GENERAL: MPEG-4 (Base Media): 1.007 MiB, 10s 0ms; 1 Video stream: AVC; Overall bit rate: 825 Kbps; Writing application: Lavf57.72.101
VIDEO: 2 343 Kbps, 1280*800(16:10), at 25.000 fps, MPEG Video (Version 2) (Main@High 1440)

但是,如果我将 output.mp4 替换为任何其他 .mp4 文件,它确实可以在Firefox中播放 . 因此,这使我得出结论,它不是浏览器问题,而是我利用 ffmpeg 的方式 . 以下是在浏览器中成功运行的正确 .mp4 文件的媒体信息 .

GENERAL: MPEG-4 (Base Media/Version 2): 48.4 MiB, 2mn 50s; 1 Video stream: AVC; 1 Audio stream: AAC; Overall bit mode rate: Variable; Overall bit rate: 2 385 Kbps;
VIDEO: 2 256 Kbps, 1280*720(16:9), at 25.000 fps, AVC (Main@L3.1) (CABAC / 3 Ref Frames); ISO media produced by Google Inc.
AUDIO:
126 Kbps, 44.1 KHz, 2 channels, AAC (LC), ISO media produced by Google Inc.

以下是使用带有 -pix_fmt yuv420p ./ffmpeg -t 00:00:10 -f x11grab -s 1280x800 -r 30 -i :0.0+0,0 -pix_fmt yuv420p -vcodec libx264 -preset ultrafast -s 1280x800 -threads 0 -f mpegts - > ~/Workspace/file.tsffmpeg 命令重定向h.264 mpegts流所产生的输出文件的媒体信息:

GENERAL: MPEG-TS: 2.93 MiB, 9s 960ms; 1 Video stream: MPEG Video; 1 Menu stream: MPEG Video; Overall bit rate mode: Variable; Overall bit rate: 2 465 Kbps; 
VIDEO: 2 343 Kbps, 1280*800(16:10), at 25.000 fps, MPEG Video (Version 2) (Main@High 1440)

1 回答

  • 2

    我不认为 yuv444p 可以在任何浏览器的 <video> 标签中播放 .

    您可能需要 ffmpeg 二进制文件,可以输出更加圆润的 yuv420p 平面 . 也许你可以将它作为选项传递给 libx264 ,如下所示: -pix_fmt yuv420p .

    EDIT: 这对我有用:

    "C:\Program Files\VideoLAN\VLC\vlc.exe" screen:// :screen-fps=25 :screen-caching=5000 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=800,height=600,acodec=none}:http{mux=ogg,dst=:8181/desktop} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep
    

    唯一的缺点似乎是表现 . 这很慢 . 也许它是Windows构建的VLC特有的东西,希望它在Linux上做得更好 . 另外,尝试其他编解码器/容器组合,我不知道Theora是编码桌面捕获的合适选择 .

    在Chrome(Windows)中测试过

    <video controls>
        <source src="http://127.0.0.1:8181/desktop">
    </video>
    

    注意:您不必使用localhost,VLC会侦听

    TCP    0.0.0.0:8181
    

相关问题