"HTTP Streaming Live" - How to distribute and utilize videos : Part 3

"HTTP Streaming Live" - How to distribute and utilize videos : Part 3

In part 1 of this guide we introduced how to use progressive downloads. We also told you how to best utilize VoD, which is a component of HTTP streaming. In part 3 of the guide (this post), we will explain how to best use Live via HTTP streaming.

How to use HTTP Streaming (Live)

HTTP streaming requires the following 3 things.
・A streaming server
・A live Encoder
・A viewing page (HTML file)

This is different from the VOD (explained in part 2 of the guide) – we use video data from Live Encoder instead of video contents.

Mechanism of distribution
Http streaming live

In this system, we convert video data from Live Encoder to HLS/MPEG DASH as in the picture above.

Streaming server to use

We need software which can receive video data from Live Encoder. In most cases, we usually use server software as a streaming server, which can read the data. We used Wowza as a streaming server, as before.

Setting up Wowza

Please refer ‘Setting up Wowza’ in part 2

Distribution directory creation

Creating a Directory for distribution
Http streaming live

Create a directory for live distribution on a server which Wowza runs. As we did previously, we create it and save it on the Home directory for Linux User called ‘wowzaadmin’ using WinSCP.

Directory for distribution

/home/wowzaadmin/live-test

Add live distribution settings

Http streaming live

 

Under ‘Applications’ on the top menu on the Wowza Web control panel, go to ‘Add Application’ -> ‘Live.’ After ‘New Application’ window shows, you add ‘live-test’ which is the same name as directory name and press ‘add’.

Application settings

Application is applicable to the distribution settings.

Http streaming live

Settings are as follow:
– Application Description
– Playback Types: MPEG DASH, Apple HLS (Check the distribution method used)
– Options: Place checkmark on CORS (It is needed for a js based player)
– Content Directory: Use the following directory
: /home/wowzaadmin/live-test (designate a directory path for distribution)
– Closed Caption Sources: None (keep the initial settings)
– Maximum Connections: without checks

Confirm the settings and click Save. When finish saving you will see the word “Saved”! Your application is ready to use”.

Authorization setting for Live encoder connection

At the standard setting of Application, Live Encoder requires authorization in order to connection.

Http streaming live

 

Set the user and password for authorization.

Http streaming live

 

This time, we set ‘wowzalive’ as the user name and a password the characters of your choice.

Http streaming live

 

Make sure that it has added the user as ‘wowzalive.’

Setting Live Encoder

A live encoder is a piece of software or hardware which sends footage from a web camera or a video file to a streaming server. This time, we will use Wirecast, which is a well-known live encoder software.

Installing Wirecast

Wirecast is not free. You will need to get (purchase) a license on Wirecast’s website. You can also use the trial version for free which has a demo mode. This time, we will continue as though you have already gotten a license for Wirecast and have it installed.

Starting Wirecast

When you start Wirecast, it shows the welcome window. Select ‘create plain document’ and click ‘Continue’.

Http streaming live

Distribution settings

Press ‘Distribution settings’ from ‘Distribution’ on the top menu.

Http streaming live

Set ‘RTMP Server’ as export and press ‘OK.’

Http streaming live

The precise settings for exporting

Input the precise settings when the live encoder sends video data to a streaming server.

Http streaming live

This time, we set as below.
– Name: wowza-1 (Designate the name to this setting)
– stream location: RTMP server
– encode: Default (Designate the quality and resolution of videos)
– address: rtmp://xxx.xxx.xxx.xxx:1935/live-test
– Stream: myStream

‘live-test’ is the application name for live which we set on Wowza. ‘xxx.xxx.xxx.xxx’ is the IP address for the streaming server (Wowza). ‘myStream’ is the name of the stream and can be a selection of any characters. We can send multiple live videos to an application. Each will need a stream name in order to distinguish between them.

Setting authorization information

There are authorization settings to connect applications to the streaming server. So, it requires a username and password for authorization.

Http streaming live

 

Clicking ‘Set authorization information’ will bring up a window where we input the authorization information.

Input the user and password which we set during ‘Source Authentication’ on Wowza. After clicking ‘OK,’ it will save the authorization information. It’ll then go back to the detailed setting window. Press ‘OK’ to save the live streaming settings.

Adding videos for distribution

Now we will add videos for live distribution. Here, we distribute the live videos from a PC with web camera running Wirecast.

Http streaming live

5 layers are shown on the bottom of the window. If we click ‘+’ on layer 1, the ‘Add shot’ window comes up. Select a web camera shown under ‘system apparatus’ from ‘video capture.’ When you press ‘Add,’ the view from the web camera will be shown on layer 1.

Http streaming live

Start Distribution

Click ‘Start Distribution’ -> ‘Star RTMP server: wowza-1’ from ‘Distribution’ on the top menu.

Http streaming live

Then it will execute the encoding process on the picture from web camera and send it to the streaming server.

Http streaming live

When you click the ‘fade’ button to the right of the window, it will show the video. The left window is for source footage from the web camera. The right window shows the video which is sent to the streaming server.

Check the distribution URL (HLS)

The word in red is for the application name, and the word in blue one is the stream name. Stream name refers to the contents name on VOD, and it can be set to any string of characters on live encoder. Those are used to distinguish between multiple live feeds when sending them to a single application.

<Distribution URL(HLS)>

http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8

Check the distribution URL (MPEG DASH)

The red word is for the application name, and the blue one is for stream name.

<Distribution URL (MPEG DASH)>

http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/manifest.mpd

Viewing Environment for HLS and MPEG DASH

In order to watch videos, the web browser needs to respond to the distribution method. The main applicable OS and Web browsers for HLS/MPEG DASH are as follows.

Http streaming live

Create a viewing page and Player (HLS)

If you want to play videos, you need to input HTML5 Video or HTML5 Video+JavaScript on HTML files. Safari on iOS can cope with HLS. However, it does not accept MSE, so you cannot use HTML5 Video+JavaScript player on it.
Because of this, we will use HTML5+JavaScript for PC and HTML5 video for smartphones.

For PC (including macOS)

In this case, we will use ‘hls.js,’ which is published in GitHub.

<script src=”https://cdn.jsdelivr.net/npm/hls.js@latest”></script>
<video height=”300″ id=”video” controls></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById(‘video’);
    var hls = new Hls();
    hls.loadSource(‘http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8′);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType(‘application/vnd.apple.mpegurl’)) {
    video.src = ‘http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8′;
    video.addEventListener(‘canplay’,function() {
      video.play();
    });
  }
</script>

There are 2 places to designate distribution URLs as video sources, so we will input the HLS distribution URL mentioned above.

hls.js(GitHub)

‘hls.js’ is a JavaScrip based player so it is restricted by same origin policy. If the viewing page and Wowza server’s domain are different, the viewers won’t be able to get HLS video data from the Wowza server.

https://github.com/video-dev/hls.js

A solution to this is to input a check ‘CORS’ when you create an application in Wowza. With this the header that allows acquisitions from external domains will be able to respond, and so will be able to get HLS video data.

For mobile (iOS, Android)

HTML5 is widely used for video input.

<video src=”http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8″ controls></video>

Add other features if necessary.

Accessing the viewing page

When you access the viewing page on a web browser, it shows an embedded player.
When you click play, it starts HLS video.

* This time, The HLS data acquisition is HTTP(Unencrypted). If the viewing page is encrypted with SSL/TLS, web browsers may block it.

Creating a viewing page and player (MPEG DASH)

In order to play the video you will need to input HTML5 video+JavaScript in an HTML file which will become the viewing page. It is the same as ‘hls.js’ in the point that web browsers can cope with MSE and it requires CORS settings.

PC (including macOS) and Android

This time, we will use ‘dash.js,’ which is published by GitHub.

<div>
    <video data-dashjs-player src=” http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/manifest.mpd” controls>
    </video>
</div>
<script src=”https://cdn.dashjs.org/latest/dash.all.min.js”></script>

dash.js(GitHub)

https://github.com/Dash-Industry-Forum/dash.js

Accessing the viewing page

When we access the viewing page on a web browser, the player will be embedded.

Press the play button to start HLS video
* Here, The MPEG DASH data acquisition is HTTP(Unencrypted). If the viewing page is encrypted with SSL/TLS, web browsers may block it.

CDN is useful for HTTP streaming

In conclusion, we have explained how to convert video data which is sent from a live encoder to HLS/MPEG DASH and distribute it with a streaming server.

After conversion, files are distributed by HTTP. We can also cache it to distribute for video playing.

We need to be careful about files’ cache period, which becomes a video list to get the newest footage although it shows the best combination with CDN which has great HTTP cache systems. You can use it in various situations, such as mass distribution, stable distribution environment like news, and IR live broadcasts.