How to use the castLabs DASH Everywhere player with Wowza Streaming Engine

This article describes how to use the castLabs DASH Everywhere player with Wowza Streaming Engine™ media server software. The DASH Everywhere interoperable player for web browsers simplifies playback of MPEG-DASH, Microsoft Smooth Streaming, and Apple HLS video content.

Contents


Set up streaming applications in Wowza Streaming Engine media server
Set up castLabs DASH Everywhere player for streaming from Wowza Streaming Engine More resources

Set up streaming applications in Wowza Streaming Engine media server


To stream to the DASH Everywhere player, you must set up or create streaming applications in Wowza Streaming Engine Manager. The following procedure guides you through setting up the default live and vod applications, which are included in default Wowza Streaming Engine software installations, to enable delivery of unencrypted video to the DASH Everywhere player.
 
Note: For instructions on how to deliver encrypted video using the castLabs DRMtoday service, see How to set up castLabs DRMtoday secure video delivery in Wowza Streaming Engine.
  1. In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
     
  2. In the Applications contents panel, click live (for live streaming) or vod (for on-demand streaming), and then click Edit.
     
    Note: This procedure uses the installed live and vod applications. If you want to create a new streaming application, click Add Application in the contents panel, and then click Live or VOD.
  3. On the application page, select the MPEG-DASH, Apple HLS, and Microsoft Smooth Streaming playback types, and then click Save.


     
  4. Restart the application.


     
  5. If you set up an application for live streaming, connect live video from a camera or encoder to it by following the instructions in How to connect a live source to Wowza Streaming Engine.

    If you set up an application for on-demand streaming, copy your encoded video files to your VOD application's content directory. If you didn't change any of the application's default values, upload the files to the content folder in the Wowza Streaming Engine installation ([install-dir]/content). If you changed the application's Content Directory setting to an application-specific directory (${com.wowza.wms.context.VHostConfigHome}/content/[application-name]) or to a fully customized location on the media server, upload the files to these alternate locations.

Set up castLabs DASH Everywhere player for streaming from Wowza Streaming Engine


After you purchase the DASH Everywhere player, you'll be provided with a player release package that has all of the required libraries and a sample integration webpage (index_min.html) that you can use as template in this setup procedure.

Put the index_min.html and cldasheverywhere.min.js files and dashas and dashcs folders on your web server. Then you can point the player to your Wowza Streaming Engine stream as shown below.

To include the cldasheverywhere.min.js and video-js.css libraries in your webpage, copy the following into the HEAD section of the webpage code:
<link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
<style>
  .vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
  .vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
</style>
<script src="cldasheverywhere.min.js"></script>
To define where the player is placed in the webpage, copy the following <video> tag into the BODY section of the webpage code:
<video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px">
</video>
To initialize the player with custom configuration options, copy the following into the BODY section of the webpage code:
var config, player;
  var config = {
      "silverlightFile": "./dashcs/dashcs.xap",
      "flashFile": './dashas/dashas.swf',
      "techs": ['dashjs','dashas','dashcs']
    };

  player = videojs('vid', {
    plugins: {
      audiotracks: {
         title: 'Languages'
      },
      texttracks: {
         title: 'Subtitles'
      }
    },
    autoplay: true,
    controls: true,
    dasheverywhere: config,
    techOrder: ['dasheverywhere']
  });
Note: A full list of available configuration options is available in the DASH Everywhere Manual, which is included in the product release package.
To load your stream into the player, copy the following to the end of the player configuration <script> section of your webpage code:
player.loadVideo("http://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd", {});
Where:
 
  • The [wowza-ip-address]:[port] placeholder is the IP address and port of your Wowza media server (default port is 1935).
     
  • The [application] placeholder is the name of your Wowza media server application (such as live or vod).
     
  • The [stream-name] placeholder is the name of your stream in that application.
The following playback examples show a minimal player configuration on a sample webpage for live and on-demand video streaming.

castLabs DASH Everywhere player integration example for live streaming from Wowza Streaming Engine

In the following example, DASH Everywhere plays a live stream named myStream from the Wowza Streaming Engine live application.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>castLabs DASH Everywhere Player Integration example</title>
    <link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
    <style>
        .vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
        .vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
    </style>
    <script src="cldasheverywhere.min.js"></script>
</head>

<body>
    <video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px"></video>

    <script>
        //Init player
        var config, player;
        var config = {
            "silverlightFile": "./dashcs/dashcs.xap",
            "flashFile": './dashas/dashas.swf',
            "techs": ['dashjs','dashas','dashcs']
          };

        player = videojs('vid', {
            plugins: {
              audiotracks: {
                 title: 'Languages'
              },
              texttracks: {
                 title: 'Subtitles'
              }
             },
            autoplay: true,
            controls: true,
            dasheverywhere: config,
            techOrder: ['dasheverywhere']
          });

        player.loadVideo("http://[wowza-ip-address]:1935/live/myStream/manifest.mpd", {});

    </script>

</body>
</html>

castLabs DASH Everywhere player integration example for on-demand streaming from Wowza Streaming Engine

In the following example, DASH Everywhere plays the [install-dir]/content/sample.mp4 video file included in your Wowza media server installation from the Wowza Streaming Engine vod application.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>castLabs DASH Everywhere Player Integration example</title>
    <link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
    <style>
        .vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
        .vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
    </style>
    <script src="cldasheverywhere.min.js"></script>
</head>

<body>
    <video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px"></video>

    <script>
        //Init player
        var config, player;
        var config = {
            "silverlightFile": "./dashcs/dashcs.xap",
            "flashFile": './dashas/dashas.swf',
            "techs": ['dashjs','dashas','dashcs']
          };

        player = videojs('vid', {
            plugins: {
                audiotracks: {
                title: 'Languages'
                },
                texttracks: {
                title: 'Subtitles'
                }
            },
            autoplay: true,
            controls: true,
            dasheverywhere: config,
            techOrder: ['dasheverywhere']
        });

        player.loadVideo("http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd", {});
    </script>

</body>
</html>

More resources


How to set up castLabs DRMtoday secure video delivery in Wowza Streaming Engine
How to do MPEG-DASH streaming
Originally Published: For Wowza Streaming Engine on 09-14-2016.
 

If you're having problems or want to discuss this article, post in our forum.