在HTML页面中播放h.264视频流

Question

I am using ffmpeg and vlc on linux to produce MPEG transport stream ( mpegts ) over HTTP. Basically ffmpeg captures the screen and produces h.264 stream using mpegts and then vlc is used as a server that delivers the stream over http . That's how I manage to accomplish this.

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}

And some useful log about the resulting stream:

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

All looks good except for that I am unable to play the stream in a HTML page. Could someone point me at some solution to either render the stream in HTML page or change the stream type so that it gets rendered. Thank you in advance!

EDIT: I've noticed something weird. The <video> fails to play mp4 files on Firefox (51.0.1) for Ubuntu (I have also tested on Windows 8 with Chrome). I simply use ffmpeg to record screen for 10 seconds and produce .mp4 video (see below).

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

And then play the output.mp4 video with the following snippet.

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

This simply does not play although I can open the video with any other media player. The media info (using MediaInfo, v0.7.96) of the output.mp4 file is:

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)

However, if I replace the output.mp4 with any other .mp4 file, it does play in Firefox. So, this leads me to conclude that it is not a browser issue but something with the way I exploit ffmpeg . Below is the media info of a proper .mp4 file that successfully runs in the browser.

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.

And here is the media info of the output file that results from redirecting the h.264 mpegts stream using the ffmpeg command with -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.ts :

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)

Answer 1

I don't think yuv444p is playable in the <video> tag by any browser.

You probably need an ffmpeg binary that can output the more mellow yuv420p planar. Maybe you can pass that as option to libx264 , like this: -pix_fmt yuv420p .

EDIT: Here's what worked for me:

"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

The only downside seems to be the performance. It's slow. Maybe it's something specific to the Windows build of VLC, hopefully it does better on Linux. Also, try other codec/container combo, i have no clue if Theora is the appropriate choice for encoding a desktop capture.

Tested in Chrome (Windows) with

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

NOTE: You don't have to use localhost, VLC listens on

TCP    0.0.0.0:8181