Well, We have a working HLS streaming solution but how can we present the stream to the users in an effective way. The most common way is to publish your stream on a web site by using a html video player. VideoJS is an open source project and with its additional hls module (videojs-contrib-hls) it works perfect with hls. It can also flashback on the browser where hls is not natively supported. For a working example of VideoJS with HLS you can check the link below.
http://videojs.github.io/videojs-contrib-hls/
You can run your stream and web publishing on the same Nginx Server but it is not recommended. So I installed another nginx server on Ubuntu to host my html video player.
Lets download the latest version of VideoJS from:
https://github.com/videojs/video.js/releases/tag/v5.14.0
Download also videojs-contrib-hls from:
https://github.com/videojs/videojs-contrib-hls/releases/tag/v4.0.2
Enter the unzipped videojs folder and copy everyting to /usr/local/nginx/html (recursively)
cp * -r /usr/local/nginx/html
Modify your index.html and include video-js.css, video.js and videojs-contrib-hls in the head portion of the html file.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Welcome to nginx!</title>
<link href="/video-js.css" rel="stylesheet">
<script src="/video.js"></script>
<script src="/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>
</head>
<body>
<h1></h1>
<body>
<video poster="/logo.png" id="example-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="http://10.20.x.x/hls/test.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</body>
</html>
UPDATE: The above code can not play hls stream on Internet Explorer but if you change the type attribute in source tag as type="application/vnd.apple.mpegurl" >
Internet Explorer also works!
Enabling CORS:
Since the video Player is an HTML5 JavaScript-based player, the video streams it handles should be accessible by JavaScript. This is controlled by the cross-origin resource sharing (CORS) mechanism. You need to configure your streaming server to enable CORS requests. To enable CORS on NGINX, you need to use the add_header directive and add it to the appropriate NGINX configuration file. We already enabled this setting in nginx.conf in the previous hls article.
# # Wide-open CORS config for nginx #
Location /hls { add_header Access-Control-Allow-Origin *; }
You can also check the following CORS example:
http://enable-cors.org/server_nginx.html
Cross-Domain Restrictions:
We might need to take care of what is called "cross-domain" restrictions, which would otherwise shut down your ability to stream to a webpage/website. Create a crossdomain.xml file in your nginx/html folder and put instructions in it to allow data to flow between domains:
sudo touch crossdomain.xml ( in folder /usr/local/nginx/html)
sudo nano /usr/local/nginx/html/crossdomain.xml
Just copy the below code into the crossdomain.xml file and save it.
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>
I also need a iframe code to publish my video stream on another web site. You most probably dont need that but I will add this here just in case.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<iframe src="http://10.20.x.x/index.html" id="cw" name="cw" width="100%" height="1000px;" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</body>
</html>