Live streaming RTMP to HTML5
Solution 1
I ended up using VLC Player (which uses FFmpeg) for transcoding the RTMP stream with H.264
codec and displaying it in .ogg
format with built-in http server of VLC. Also I started another instance of VLC for HLS
streaming for Apple based devices. Here are the two commands for H.264
and HLS
respectively (note: I did this on windows, and used wamp
for HLS streaming as VLC does not provide the means for transport in this case):
vlc.exe -I dummy rtmp://_ip_addr_of_the_rtmp_stream :network-caching=0 :sout=#transcode{vcodec=theo,vb=512,scale=1,acodec=none}:http{mux=ogg,dst=:8181/stream.ogg} :no-sout-rtp-sap :no-sout-standard-sap :sout-keep
vlc.exe -I dummy rtmp://_ip_addr_of_the_rtmp_stream :network-caching=0 :sout="#transcode{vcodec=h264,vb=500, venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1}, aenc=none} :std{access=livehttp{seglen=10,delsegs=true,numsegs=5, index=C:\wamp\www\stream.m3u8, index-url=http://_ip_addr_of_your_web_server/stream-########.ts}, mux=ts{use-key-frames}, dst=C:\wamp\www\stream-########.ts}"
Then in html page simply:
<video width="320" height="240" controls autoplay>
<source src="http://_ip_addr_of_your_web_server/stream.m3u8" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="http://_ip_addr_of_your_web_server:8181/stream.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Further reading:
https://wiki.videolan.org/Documentation:Streaming_HowTo/Streaming_for_the_iPhone/
Solution 2
You cannot live stream using the mp4
format and you cannot live stream using only HTML5 tags. Your command records the stream in a static mp4
file to be served via HTTP progressive download.
RTMP
requires a Flash player. Alternatives include HLS
and a web-player that supports Flash fallback for desktops (eg. Clappr, JWPlayer, Flowplayer) or DASH
via Media Source Extensions (MSE) on the browsers that support it.
Solution 3
Unreal Media Server v12 (released Sep 15 2016) supports exactly what you need. You don't need to transcode anything. The same broadcast that was playing via RTMP, now can be played in HTML5 video tag.
astralmaster
Updated on July 09, 2022Comments
-
astralmaster almost 2 years
I have a
RTMP
live stream coming fromUnreal Media Server
that I need to display on a HTML5 page with<video>
tag. So far I am thinking of using ffmpeg libraries to transcode the stream with H.264 codec and output it to a .mp4 file and then access it through http protocol like this:http://ip_addr/output_from_ffmpeg.mp4
I am, however, uncertain if this would play the whole output file from the beginning or stream it live. My current ffmpeg command for transcoding the stream is:ffmpeg -i rtmp://IP_addr_of_rtmp_stream:5119/live/Roulette -c:v libx264 -maxrate 1000k -bufsize 2000k -g 50 output.mp4
Could anyone point me in the right direction? I have also read in the docs that ffserver is able to achieve this but windows build is unavailable for it.