Skip to content

Before You Start ☝️

6 Step Integration Guide

You can use Flink OTT with nearly every CDN provider, video streaming server and HTML5 player. In this guide, we will provide information on how to integrate Flink OTT into your web or native application with 6 simple steps:

Steps 1 & 2 - Configure Your Origin / CDN

The Flink OTT Client SDK will slightly alter the way how client devices request data from your CDN. Instead of typical HTTP GET calls, they will use HTTP Range Requests 🔗.

Please Note: The correct setup of your CDN infrastructure may depend on both your streaming origin's configuration and/or your CDN's configuration. For example, some CDNs pass through all HTTP headers they receive from the origin while other CDNs add, remove or replace existing HTTP headers. To ensure the correct setup, please keep in mind that some CDN providers can override or alter your origin HTTP headers. This means, that in some cases, Step 1 and Step 2 of this guide can interfere with each other.

Modern web and streaming servers support range requests by default. However, you might want to ensure that your streaming origin / CDN meets the following requirements:

CORS OPTIONS Request Support

CORS Preflight requests (HTTP OPTIONS requests) must be supported. Verification: curl -i -X OPTIONS <your manifest URL> must contain an ALLOWED header in which OPTIONS must be listed.

Example:

curl -X OPTIONS http://example.org -i

HTTP/1.1 204 No Content
Allow: OPTIONS, GET, HEAD, POST

HTTP Range Request Support

HTTP Range Requests 🔗 must be allowed. This means, when sending a CORS OPTIONS request, your server must respond with a Access-Control-Allowed-Headers header in which Range must be listed.

Example:

curl -X OPTIONS http://example.org -i

HTTP/1.1 204 No Content
Access-Control-Allowed-Headers: Range

Step 3 - Configure Your Swarm

Allowed Domain Patterns

Swarms are designed to optimize one or more live video streams via a WebRTC Peer-To-Peer network. To specify which content should be optimized by a single swarm, you can define URL patterns to your content. To define patterns, you can use globbing 🔗.

Examples

*.yourcompany.com matches cdn1.yourcompany.com, cdn2.yourcompany.com, video.yourcompany.com
us-0?.cdn.yourcdn.com matches us-01.cdn.yourcdn.com, us-02.cdn.yourcdn.com
* matches every existing domain
static.cdnroute.yourcompany.com matches static.cdnroute.yourcompany.com

Token Authentication

To protect content from piracy, video URLs are often secured with server-side generated tokens. There are several schemes of how to apply those tokens to a URL.

Query Parameter Based Authentication is fully supported by Flink OTT. This means an authentication scheme of domain.com/path/to/segment.ts?token=<YOUR_ID>.

Please Note: If you use another authentication scheme than Query Parameter Based Authentication, please contact us for an advanced configuration.

Tracker Access

Trackers need additional access to your content to optimize a stream. This means, our servers must be able to access your content. If you use security tools like geo-blocking, please contact us for advanced configuration. We host tracker servers in almost all countries and are happy to configure your tracker server appropriately.

When requesting data from your origin / CDN, the tracker server will send an X-Strive-Fetch header with a randomly generated string. For example X-Strive-Fetch: d00938a11d86715a92f4ce07bcf52e51. If possible, you can use this header an authorization method to whitelist all requests from our tracker to your origin / CDN.

Matching Policy

Determines how a tracker will match peers to clusters. There are three policies available:

  • Random maps peers randomly without a specific scheme. Although it seems counter-intuitive, this policy works very well for 10.000+ concurrent users.
  • Geo /ISP clusters peers based on network topological information and geoinformation.
  • ECDN / Intranet maps peers based on their public IPs and/or a given set of subnet masks.

(Optional) Web Media Selector

The Flink OTT Client SDK can track business-relevant data like traffic consumption without any further specification of a video player or similar. However, you can specify a CSS selector that points to your HTML5 player's video tag to collect even more data like buffering events, video quality and much more.

Step 4 - Verify Your Configuration

To verify that Steps 1 - 3 have been completed successfully, you can now apply the swarm to one of your live streams in a sandbox. Strive provides an extensive sandbox environment that you can use to try out Flink OTT in combination with your HLS or DASH based live video stream.

Flink OTT - Sandbox Verification

Flink OTT - Sandbox Configuration Panel
  • The player panel contains an HTML5 player of your choice (see configuration panel) that plays your live HLS stream.
  • The traffic panel show a graph that visualizes the distribution of traffic sources (CDN and Peer-To-Peer). When starting your live stream, CDN traffic will be generated. As soon as more than one person is watching the stream at the same time, traffic will be split between CDN and Peer-To-Peer.
  • The statistics panel shows real-time measurements about the current and total CDN savings, number of peers and bandwidth information.
  • The configuration panel enables you to choose from a list of HTML5 players, try out different stream resources and connect your Flink OTT swarm to the stream. If applicable, you can also put in a player license key to test your preconfigured video player.
  • The validation panel runs some crucial tests to verify that your origin/CDN setup meets all requirements 🔗 for Flink OTT to work.
  • The debug panel contains a log console for further investigation in case of problems with a given HLS URL.

Flink OTT - Sandbox New Instance Button

If all tests in the validation panel succeed and if you can generate P2P traffic after clicking Open New Instance in the top bar, you successfully validated your origin / CDN configuration.

Step 5 - Client SDK Integration

Web SDK Integration

There is no change or update in your player required. The Flink OTT Client SDK automatically adapts to your player setup without changing the way it works. To integrate the Flink OTT Client SDK into your web application, navigate to your swarm's settings page.

Flink OTT - Swarms Integration

In the Integration panel, you see a short HTML code snippet that you need to integrate into your website or web application to load and activate the swarm for your stream.

<head>
    <!-- Integrate Flink OTT Client SDK -->
    <script src="https://web-v2.strivetech.io/web/static/js/strive-loader.v2.min.js?manifest_main=[YOUR_STREAM_TOKEN]"></script>
    <!-- Integrate Your Player -->
    ...

...

Please note: It is crucial to load the swarm integration code as early as possible on your website. Therefore, please try to move the swarm integration code up as much as possible in your website's <head> section. Also, make sure the swarm activation code is loaded before your HTML5 web player is loaded and/or initialized.

Mobile / Native SDK Integration

Currently, we do not expose the mobile / native Client SDKs. If you want to integrate Flink OTT into a native mobile app, please contact us directly.

Step 6 - Verify Your Integration

In order to verify that you successfully integrated the Flink OTT Client SDK into your application, you have to navigate to the Reporting page and see if data is received when consuming live content via your app. While you can run a test and verify the results later, the easiest way is to use the real-time reporting view. At the reporting page, choose Now as the time range.

Flink OTT - Reporting Selector Now

Select the P2P Savings view and start using your application with 2 or more users. As soon as you can see the percentage of CDN savings rising, you have successfully verified your integration.

Flink OTT - Real-Time P2P Savings

Congratulations! You are now ready to use Flink OTT! 😄🎉