To support HTML5 live video streaming for iOS device, there are only two options.
- HLS
- WebRTC (for limited codecs)
The pros of HLS is supporting the most common browsers and Operating Systems. However, compare with other live streaming methods such as flash, websockets, RTMP… The latency of HLS is much higher, it will have approx 30-45 seconds delay. Due to the requirement, I have no choice to choose HLS as the option.
First of all, build a web server using IIS or Apache. Install VLC player on the same machine.
Set immediate expiration on the web folder. For IIS web server, open IIS Manager, select your web folder -> HTTP Response Headers -> Set Common Headers -> Expire Web Content Immediately. In addition, as the .m3u8 file is going to be consumed by web players such as Flowplayer, you need to put crossdomain.xml file in your web root folder (for IIS, c:\inetpub\wwwroot) and to enable cross-origin access (CORS) for your HLS web folder by adding “Access-Control-Allow-Origin: *” custom HTTP header. For details please refer to https://enable-cors.org/server.html .
Start streaming RTSP with Xsplit with VLC player (Ref my previous post)
Launch VLC player with the below command to re-stream RTSP feed as HTTP Live Stream
vlc -I dummy rtsp://ip:port/live--sout '#transcode{vcodec=h264,fps=20,vb=512,scale=1,acodec=none,venc=x264{aud,profile=high,level=60,keyint=15,bframes=0,ref=1,nocabac}}:duplicate{dst=std{access=livehttp{seglen=10,delsegs=true,numsegs=10,index=c:\inetpub\wwwroot\mystream.m3u8,index-url=http://ip/live/mystream-########.ts},mux=ts{use-key-frames},dst=c:\inetpub\wwwroot\mystream-########.ts},dst=std{access=http,mux=ts,dst=:8082/video.mp4}}'Ok! Now we can start the http part. First define the flowplayer skin & JS
<!-- Flowplayer skin -->
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/skin/skin.css">
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
<!-- The hlsjs plugin for playback of HLS without Flash in modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
Then define javascript to run the player with specific parameter handling.
<script>
window.onload = function () {
flowplayer("#hlsjslive", {
splash: true, ratio: 9/16, clip: { live: true,
sources: [
{ type: "application/x-mpegurl",
src: "http://ip:port/mystream.m3u8" } ] }
});
};
</script>Finally, define the container in the HTML for the player using <div>
<div id="hlsjslive" class="fp-slim"></div>
