Live Streaming

Part6 – VideoJS Player for HLS Streaming

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>

3 Comments

  1. Hi. I followed you up to Chapter 6 and you lost me. No detailed instructions on how to setup another nginx server just to host the HLS stream. And to add to the confusion and difficulty, I was trying to put my web server on the internet! In the last few days, I had to break away from your instructions and did some research on how to properly setup nginx on ubuntu and CORS configuration. I also had to figure out how to embed video.js – latest version. Your procedure didn’t work for me for some reason.

    All is working now! I have 1 streaming server, 1 internet facing web, and 1 internal web server. On to chapter 7!

    I appreciate your instruction nonetheless! It got me started on the right direction. This is coming from someone who has been more accustomed to “Windows” most of his career. Just trying to learn something new, in a world of quarantine life.

    Reply
    1. Could you please provide sources from where you did the alternate research? I am also setting things up and would appreciate it.

      Reply

Post Comment

Scroll Up