Lumen help

Integrating Mesh Delivery with Azure Media Player

Introduction

Step 1: Install Azure Media Player and Mesh Delivery builds

                <!--Azure Media Player build -->
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

<!-- Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/azuremp-dna-wrapper/1/stable/azuremp-dna-wrapper.js?srKey=YOUR_STREAMROOT_KEY"></script>

            

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

 

Parameter name

Mandatory

Description

YOUR_STREAMROOT_KEY

Yes      

The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard.

Step 2: Set up Azure Media Player and Mesh Delivery

In the HTML <body> or with npm

                <div id="video-div">
    <video id="demoplayer" class="azuremediaplayer amp-default-skin" />
</div>
<script>
    var player = amp('demoplayer', {});
    var dnaConfig = {};
    var wrapper = new AzureMPDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
    window.player = player;
    player.src([{
        src: 'YOUR_PLAYLIST_URL',
        type: 'application/vnd.ms-sstr+xml',
    }]);
</script>

            

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery