Menu

Lumen help

Integrating Mesh Delivery with Rx-Player

Introduction

Mesh Delivery for Streaming can be integrated into your website with Rx-Player, a Smooth Streaming and DASH open-source HTML5 video player developed and maintained by Canal Plus. 

 

We have built optimized plugins for Rx-player from v3.0.

 

The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Step 1: Install Rx-Player and Mesh Delivery builds

Using the pre-build script

Include these sources in the HTML <head>

                <!-- Rx-player build -->
<script src="//cdn.jsdelivr.net/npm/rx-player@3.10.3/dist/rx-player.min.js"></script>

<!-- Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/rxplayer-dna-wrapper/1/stable/rxplayer-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.

Using npm

Install runtime and dev dependencies:

                npm install @streamroot/rxplayer-dna-wrapper

In your application, import/require the package you want to use, like this example:

                import RxplayerDnaWrapper from '@streamroot/rxplayer-dna-wrapper';

Step 2: Set up Rx-Player and Mesh Delivery

In the HTML <body> or with npm

                <video id="demoplayer"></video>
<script>
    var dnaConfig = {};
    var video = document.getElementById('demoplayer');
    player = new RxPlayer({ videoElement: video });
    // Initialize the wrapper BEFORE calling player.loadVideo!
    wrapper = new RxplayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
    player.loadVideo({
        url: "YOUR_PLAYLIST_URL",
        transport: "smooth|dash",
        startAt: {
            fromLastPosition: -30, // It's essential to setup reasonable liveEdge latency for good Mesh delivery on live streams
        },
    });
</script>

Parameter name

Mandatory

Description

dnaConfig

No

The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).

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.

YOUR_PLAYLIST_URL

Yes

Your DASH playlist.

Step 3: Visualize Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Vizualization graph for Mesh Delivery

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.