Live streaming RTMP to HTML5

2
votes

I have a RTMP live stream coming from Unreal 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.

3
htmlffmpegstreamingvideo-streamingrtmp

3 Answers

3
votes

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.

2
votes

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/

1
votes

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.