Overview

Goals

This article will give you an overview of how to integrate StriveCast Javascript SDK into your Webpage using an HTML5 Player and how you can verify your integration.

Requirements

  • Access to the StriveCast web portal

  • Access to your HTML5 web environment

Who should use this document?

Developers, responsible for integrating the StriveCast eCDN Javascript SDK into their organization’s video platform.

The integration process

Step

Description

Step 1 - Create a Deployment

To get the Javascript file for the StriveCast eCDN web SDK, you need to create a Deployment in the StriveCast web portal.

Step 2 - Integrate the web SDK

Integrate your generated Javascript snippet into your HTML5 infrastructure.

Step 3 - Verify your integration

Use StriveCast’s debug mode and the web portal to verify the integration works properly.

Step 1 - Create a Deployment

To get the Javascript snippet, you need to create a Deployment in the StriveCast web portal. A Deployment is a cloud object which contains two things:

  1. A set of configurations

  2. A generated Javascript file containing the StriveCast eCDN web SDK

While the Javascript file will be integrated statically into your HTML5 environment, the cloud-based configuration of your Deployment will govern the way the web SDK works. Think of it as a way to remote-control the integrated snippet without the need to update your actual source code again.

When creating your Deployment, please make sure to:

  • Set your Deployment’s status to “Online”

  • Enable the P2P module in the “P2P” tab of your Deployment

  • Enable the “Debug Mode” for further evaluation of your integration

  • Set the “Matching Policy” to “No Restrictions” for further evaluation of your integration

After you created a Deployment, the generated Javascript file will be made available to you in the StriveCast web portal:

Step 2 - Integrate the web SDK

The StriveCast web SDK is not a player plugin, rather it is an autonomous script, able to locate and integrate with whatever video player you are using. To ensure this functionality, the only integration requirement is to include the web SDK into your web environment before the player component. StriveCast recommends loading our JavaScript SDK as the first script inside the <head> section of the HTML page. If first positioning is not possible, you still must ensure the script to be loaded before the video player.

The StriveCast JavaScript SDK needs to be integrated once per Deployment. Future updates will not require the adaption of the code. The snippet includes two parts custom to your Deployment:

  • Account ID

  • Deployment ID

In the StriveCast web portal, your snippet will be pre-rendered for each created Deployment. The snippet is of the following form:

<script type="application/javascript" src="https://cdn.strivetech.io/services/storage/v0/entity-resource/<ACCOUNT-ID>/<DEPLOYMENT-ID>/gwc.min.js"></script>
JS

In order to get your Account ID and Deployment ID, please head to the Deployment section of the StriveCast Web Portal and click on the specific Deployment you would like to implement.

Step 3 - Verify your integration

This step assumes you have configured your Deployment as described in Step 1. If not, please make sure to:

  • Set your Deployment’s status to “Online”

  • Enable the P2P module in the “P2P” tab of your Deployment

  • Enable the “Debug Mode” for further evaluation of your integration

  • Set the “Matching Policy” to “No Restrictions” for further evaluation of your integration

You can now open your player and load any segmented video content (HLS, Dash). The following window should appear on your screen:

Each loaded video segment is represented by a single bar in the chart. The bar’s color indicates whether or not it had been delivered via P2P or via your video infrastructure. By opening multiple browser tabs or multiple browsers with the same URL, you can simulate multiple users and start the P2P mechanism. You should see the following behavior in the debug window:

  1. The first tab is open. Black bars start filling the chart (one user, no P2P).

  2. The second tab is open. One of the tabs starts showing blue bars instead of black bars (the second user joins and received content via P2P).

  3. Switching bar colors. You might experience bars to turn black and blue from time to time. You should see the exact same color pattern in reverse in the other browser tab. This means that StriveCast decides which user should be the P2P sender and receiver. This decision is made on a per-segment basis. Seeing the color switch between one another is expected behavior and shows that both peers have excellent connectivity.

  4. Orange bar colors. You might experience bars appearing in orange color. What this means is that the video segment was expected to be delivered by P2P but did not arrive in time and was thus fetched via your video infrastructure. This fallback mechanism activates in case of bad connectivity between peers and indicates that the P2P connection between two users is not strong enough to support video delivery. In this case, please verify that regardless of the orange bars, the video is still running smoothly.

Frequently asked questions

  • The Debug Window is displayed, but no media segments are being loaded
    Please check if the JavaScript has been integrated into the <head> section of the page initializing the player.

  • Do I need to update the code when a new version is being released?
    No. The new versions are being loaded dynamically once you set them in the Self-Service Portal.

  • My player is integrated via an iframe
    In this case, you need to get access to the iframe’s content. As any Javascript code can not access the content of an iframe, the StriveCast web SDK needs to be located within the iframe.

  • What other integrations do you provide?
    StriveCast offers out-of-the-box integration with most enterprise video platforms. For a native integration, we offer

    • HTML5 integration as described in this document

    • iOS integration via Xcode library

    • Android integration via Android Studio library

    • Set-Top-Box integration via custom wrapper

Contact us

For any further questions or problems, please reach out any time to support@strivecast.com.