How to distribute and utilize videos part 2” HTTP streaming (VOD)”

How to distribute and utilize videos part 2” HTTP streaming (VOD)”

We introduced how to use progressive downloads in part 1. In this, part 2, we will tell you how to use the VOD which is also HTTP streaming.

 

About HTTP streaming

Until now, video streaming was with an exclusive protocol. Now, HTTP streaming by HTTP protocol is commonly used because it is more multipurpose.

There are 3 features on HTTP streaming;

  • Use of multipurpose HTTP protocol
  • Multi-bitrate distribution (Adaptive streaming)
  • Available for use with multiple devices

Those features allow us to distribute videos in the best suited way for various devices.

VOD and live streaming

There are roughly two ways of distributing videos, including HTTP streaming.

– VOD (Video-on-demand)

This is the method of preparing movie files for distribution. The viewers can watch and listen to contents whenever they want. It is often used for internet distribution of movies and music.

– Live streaming

This is a live broadcast type of distribution. The viewers can watch videos as they occur in real-time. It is suitable for the internet contents which rely heavily on being broadcasted real-time, like concert and events.

The type of HTTP streaming

There are several types of HTTP streaming. There are currently two methods which are widely used.

– HLS (HTTP Live Streaming)

This is the HTTP streaming invented by Apple which is known by Mac OS and iPhone series. Apart from Mac products, it can also be played on Android devices. If you wanted to play videos on Windows, a player based on Flash Player is often required. However, players based on HTML5+JavaScript are also being distributed now so that you can play videos without plug-ins.

This achieves a very high share rate, and we can say that it is representative of HTTP streaming.

– MPEG DASH (Dynamic Adaptive Streaming over HTTP)

MPEG DASH, known as “DASH” is the international standard for HTTP streaming. The organization is composed of multiple companies which work out designs and plans. Among those companies are Adobe Systems and Microsoft which developed the original HTTP streaming. As you can also play this with HTML5+Javascript player it does not need plug-ins. Be careful when distributing video for smartphone users playback on the iPhone safari app is not possible.

Its adoption started with major video-sharing services and continued to SNS and video distribution services. Its share is only going to keep on expanding.

How to use HTTP streaming (VOD)

Although it has a quite similar structure to the progressive download which was explained in part 1, HTTP streaming needs the following 3 things.

  • streaming server (substituted by Web server)
  • Video Contents
  • video page (HTML file)

This time, we will illustrate how to use VOD distribution with a streaming server.

– Distribution system

As pictured above, in this distribution system, we invert and distribute the mp4 file uploaded on the streaming server to HLS/MPEG DASH.

– The streaming server we use

This is the server which responds to viewers, inverting the video file to HTTP streaming when they send the request. You can add specific streaming server software like Wowza(Wowza Streaming Engine) and Red5 Web server module like the nginx-rtmp-module to use.

Here, we use Wowza because it is widely used and suitable for both HLS/MPEG DASHs.

– How to acquire a Wowza license

You have to pay when you use the Wowza server software and purchase a license and make an account for the portal site on Wowza’s Web site.

In this case, we assume that you already have a license (license key).

– Setting up Wowza

The files that you need, and how to set up are detailed on the webpage below.

Here, we set up Wowza on Linux (CentOS 7.6) and used it as a streaming server.

1. Download Wowza installer

Please check download URL on the installer page below

$ curl -OL https://www.wowza.com/downloads/WowzaStreamingEngine-4-7-7/WowzaStreamingEngine-4.7.7-linux-x64-installer.run

2. Authorize the execution on Wowza installer

$ chmod +x WowzaStreamingEngine-4.7.7-linux-x64-installer.run

3. Execute Wowza installer

$ sudo ./WowzaStreamingEngine-4.7.7-linux-x64-installer.run

4. Confirming the License Agreement
It shows the consent to use. Click agree if there is no problem.

Do you accept this agreement? [y/n]:  ( If you accept the agreement, press y and then Enter key)

5. Input license key for Wowza
License keys are sent to the registered E-mail address after purchase.

License Key: []:  (Enter the license key and press Enter)

6. Create an account for Wowza Web control panel
You can add and change distribution settings in Wowza Web control panel. Input the account information to login to the Web control panel here.

Enter a user name and password that will be used to manage Wowza Streaming
Engine.
User Name: []:    (Input the User name and press Enter)
Password: :         (Input the Password and press Enter)
Confirm Password: :    (Re-type the Password and press enter)

7. Auto-restart of Wowza
Input “y” to start Wowza when start server’s OS

Start Wowza Streaming Engine automatically [Y/n]: (Input y and press Enter)

8. Confirmation of successful installation of Wowza
This is the confirmation of whether the information you input was correct. If there is no problem, input “y.”

Do you want to continue? [Y/n]: (Input y and press Enter)

If it shows “Setup has finished installing Wowza Streaming Engine on your computer.”, It means that Wowza is installed.

9. Confirmation of Wowza’s start

$ ps aux |grep “Wowza” (It shows 4 processes)
– firewall settings

On CentOS 7.x, access from outside is limited by a firewall. Then, you have to allow Wowza’s transmission port access from outside.

$ systemctl status firewalld                                     (Check it is active)
$ sudo firewall-cmd –add-port=8088/tcp –zone=public –permanent (For web control panel))
$ sudo firewall-cmd –add-port=1935/tcp –zone=public –permanent (For distribution)
$ sudo firewall-cmd –add-port=80/tcp –zone=public –permanent   (For distribution)
$ sudo firewall-cmd –reload                                      (Reload to reflect the setting)
– Access to Wowza’s Web control panel

Access to the Wowza’s Web control panel on a web browser.

1. Web control panel (In “xxx.xxx.xxx.xxx,” Input the server’s IP address )
http://xxx.xxx.xxx.xxx:8088/enginemanager

2. Web control panel login
Input the User name/Password which you set during Wowza’s installation.

3. Create a page for Live Encoder connected users
This is the User name/Password setting screen when Live Encoder connects to Wowza during live streaming.

As you can add this later, we will skip this step, and you can set it when you use live streaming next time. When you click “Done!”, it will move to Wowza’s control panel which is the home screen.

4. Confirm on the home screen
On the home screen, you can check the general status of Wowza.

Just after installation, it shows the performance caution in a red box in the upper right. There you can go to change the settings by clicking the “Java Settings” link.

5. Changing the Java Heap Size
Change “Development level” to “Production level” and save it.

After that, the “Restart Now” button is shown above. Click that button to see the settings reflected, and restart Wowza.

6. Adding the Virtual Host’s port
If you communicate with standard HTTP, it only allows access with TCP1935 which is the same as RTMP, though you can access with TCP80 which is also the standard port for HTTP.

From the “Server” on the top menu, move to “Virtual Host Setup”-> “Basic” -> “Edit” -> “Host Ports” in that order. If you click the red box as pictured above, it allows you to edit. Moreover, there you change the port from 1935 to 1935,80.

If you save after changing, it shows the “Restart Now” button in the upper part. Click that button to reflect the settings and restart Wowza.

– Create distribution directory and upload the contents

On the server provided by Wowza, create the directory to save contents for distribution. Upload the video file for the contents for distribution.

This time, we created the “wowzaadmin” on the home directory of Linux User with WinSCP.

  • Directory for distribution : /home/wowzaadmin/vod-test
  • Test contents for distribution : /home/wowzaadmin/vod-test/cdnw-test.mp4
– Add VOD distribution settings

From Wowza’s web control panel on the header menu, click “Applications” and proceed to “Add Application” -> “VOD.” It shows “New Application” window. There type “vod-test” (same as directory name) and press “Add.”

  • Application settings
    Application means the distribution settings.

This time, we used the settings as following.

Application Description   : Describe the setting
Playback Types   : MPEG DASH, Apple HLS (Check the delivery format to use)
Options   : Check CORS (Required for js-based Player)
Content Directory   : Use the following directory
: /home/wowzaadmin/vod-test   : (Specify the delivery directory Path)
Closed Caption Sources   : Leave as default
Maximum Connections   : Do not need to check

When you confirm the settings, save it. After saving, it shows “Restart Now” in the upper part. Click that button to reflect the settings and restart the application.

– Confirm the distribution URL(HLS)

The red letters represent the Application name, the blue is for the title of the contents file, and the green letter are for the subdirectory name respectively.

  • Without Subdirectory
    http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8
  • “sub-dir” when you save inside directory
    http://xxx.xxx.xxx.xxx/vod-test/_definst_/sub-dir/mp4:cdnw-test.mp4/playlist.m3u8
– Confirm distribution URL (MPEG DASH)

The red letters represent the application name, the blue is for the name of contents file and green letters are for the subdirectory name respectively.

  • Without Subdirectory
    http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/manifest.mpd
  • “sub-dir” when you save inside directory
    http://xxx.xxx.xxx.xxx/vod-test/_definst_/sub-dir/mp4:cdnw-test.mp4/manifest.mpd
– The watching environment HLS and MPEG DASH

The web browser needs to adopt the distribution method to watch. It is the list of HLS/MPEG DASH with major OS and Web browser as below.

– Creating viewing page and the player (HLS)

When you want to play the video, you need to input HTML5 Video or HTML5 Video+JavaScript on an HTML file which becomes the viewing page.

Safari for iOS works with HLS. However, it does not work with MSE, so you cannot use HTML5 Video+JavaScript player. Thus, it means that HTML5+JavaScript is only for PC and HTML5 Video is only for smartphones.

  • For PC (including macOS)
    In this case, we use “hls.js” which is published in Github. There are 2 parts to designate the distribution URL as a video resource. Then you rewrite HLS as above to the distribution URL.
<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/vod-test/_definst_/mp4:cdnw-test.mp4/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/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8’;
video.addEventListener(‘canplay’,function() {
video.play();
});
}
</script>

As “hls.js is a Java script-based player, it is limited by the ‘Same Origin Policy’ If the domain of the Wowza server is different from viewing page, viewers will not be able to get the HLS’s movie data from the Wowza server.

As a countermeasure, it is better to check “CORS” when you create applications with Wowza. After doing that, the Wowza server can respond to the header which allows the acquisition from the external domain and receives video data of HLS.

  • For mobile (iOS Android)
    This is a description of HTML5 Video. You can add other features as necessary.
<video src=”http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8″ controls></video>
  • Access to viewing page
    When you access the viewing page on a Web browser, it will show the embedded player. After clicking on the play button, It will start the HLS Video.


※This time the data acquisition of HLS is HTYP (non-encrypt). If the viewing page is encrypted with SSL/TLS, the Web browser may block your viewing.

– Creating a viewing page and Player (MPEG DASH)

If you want to play a video, you will need to input HTML5 Video+JavaScript on HTML file which will become the viewing page.  The Web browser needs to work with MSE and the settings of CORS which are the same as “hls.js.”

  • PC (Including macOS) and Android
    This time it uses “dash.js” which is published on GitHub.
<div>
<video data-dashjs-player src=”http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/manifest.mpd” controls>
</video>
</div>
<script src=”https://cdn.dashjs.org/latest/dash.all.min.js”></script>
  • Access to viewing page
    If you access the viewing page on a Web browser, the embedded player will be shown. It will start the HLS video after you press play.


※This time, the data acquisition of HLS is HTYP (non-encrypt). If the viewing page is encrypted with SSL/TLS, the Web browser may block your viewing

It is easy to use HTTP streaming with CDN

This time, we have explained how to convert mp4 video files to HLS/MPEG DASH with a streaming server. You can distribute the converted file as an HTTP. It is possible to distribute it as a cached file.

Therefore, it shows a perfect combination with CDN because our strong point is our HTTP cache system. You can use in various situations, like large-scale distribution for numerous users’ viewing, or for a stable distribution environment for video on a corporate site.

CDNetworks video distribution service

CDNetworks gives you a unique platform for video distribution. In Japan, we have developed a global platform which distributes videos to international users efficiently, quickly, and with stability.

CDNetworks serves OVP (Online Video Platform) to manage video contents. It is the one-stop service for video distribution. If you are not good at the technical side of things, we listen to your needs and will supply a service fitting to your needs.

If you are thinking of CDNetwokrs’ video distribution service, please do not hesitate to ask us for more information.