Skip to content

Recently I went to two quite interesting seminar and both are kind of a very hot topic.

The first one is discuss about the new China cyber security law. Nowadays, most of the registration in China needs to provide real personal information for real-name authentication. It is include but not limited to travelling buses,  Express Rail Link, Free Wi-Fi access, e-payment..... The one we are concerning for IT infrastructure is providing free Wi-Fi for guest. A real-name authentication and log system must be implemented. There are two real-name authentication method: 1. SMS, 2. Wechat authenticate. After the authentication, the system must also store at least 6 months logging including all access logs and DHCP logs that can be traceable. All log must be upload to the government system by daily. Therefore, if any guest use the public Wi-Fi to do any illegal things, the host of the service will not get into any trouble.

The second conference I have attended is IBM AI, Cloud and Data. There are quite a lot of start up company which are very innovative, make use of the advantage of IoT integrate with cloud & AI, company can collect huge big data for analysis.

In future, it is not talking just one cloud platform, it's multi-cloud platform connects to each other across different networks and applications.

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>