I cannot visualize a H264/MP4 stream generated by ffmpeg in Chrome, IE, Edge. It works only in Firefox.
My testing environment is Windows 10, all updates done, all browsers up to date.
What I have tried:
I have a source MJPEG stream, which I need to transcode to H264/MP4 and show it in browser in a HTML5 element.
In order to provide a working example, I use here this MJPEG stream: http://22.214.171.124/mjpg/video.mjpg?resolution=320x240. In my real case I have MJPEG input from different sources like IP cameras.
I use the following command line:
ffmpeg.exe -use_wallclock_as_timestamps 1 -f mjpeg -i "http://126.96.36.199/mjpg/video.mjpg?resolution=320x240" -f mp4 -c:v libx264 -an -preset ultrafast -tune zerolatency -movflags frag_keyframe+empty_moov+faststart -reset_timestamps 1 -vsync 1 -flags global_header -r 15 "tcp://127.0.0.1:5000?listen"
If I try to visualize the output in VLC, I use this link: tcp://127.0.0.1:5000 and it works.
Then I try to visualize the stream in browser, so I put this into a html document:
<video autoplay controls>
<source src="http://127.0.0.1:5000" type="video/mp4">
If I open the document in Firefox it works just fine.
But it does not work when trying to open in Chrome, IE or Edge. It seems that the browser tries to connect to the TCP server exposed by ffmpeg, but something happens because ffmpeg exits after few seconds.
In ffmpeg console I can see this:
av_interleaved_write_frame(): Unknown error
Error writing trailer of tcp://127.0.0.1:5000?listen: Error number -10053 occurred
If I inspect the video element in Chrome is can see this error:
Failed to load resource: net::ERR_INVALID_HTTP_RESPONSE
As far as I know all these browsers should support H264 encoded streams transported in MP4 containers. If in the element I replace the link http://127.0.0.1:5000 with a local link to a mp4/H264 encoded file, it is played just fine in each browser. The problem seems to be related to live streaming.
Does anyone knows why this happens and how it can be solved?