Skip to main content

Usage

Prerequisites​

CORS​

Ensure your streaming servers have proper CORS (Cross-Origin Resource Sharing) headers configured so that data can be fetched across domains.

OPTIONS REQUEST​

OPTIONS requests are required to perform RANGE requests in a cross-domain environment. In general, add the following header to the HTTP response:

Access-Control-Allow-Methods: GET, OPTIONS

RANGE REQUEST​

RANGE requests are required for P2P. Add the following header to the HTTP response:

Access-Control-Allow-Headers: Range

Register your Domain​

Register your domain at https://oms.cdnbye.com

tip

Localhost is always whitelisted, so no additional configuration is needed to test locally.

Secure your Site with HTTPS​

Secure your site with HTTPS, if it isn't already. HTTPS is required for Service Worker, which we'll set up in the next step.

To secure your site with HTTPS, you can use Let's Encrypt for a free certificate and easy integration. See Let's Encrypt's setup instructions here to secure your site.

Host Service Worker​

For security reasons, foreign software that integrates into the browser via Service Workers must be hosted on the same server as the web page. Service Workers only work if they're hosted on the same domain as the main page, meaning a client hosting a website must host our web SDK on their own servers rather than retrieving it from our public cloud.

If you don't have a Service Worker​

Copy sw.js to your server and make it available at https://your_website.com/sw.js .

If you already have a Service Worker​

Integrate media-proxy.js into your existing Service Worker by adding this code at the beginning of your Service Worker's root JavaScript file:

self.importScripts('https://cdn.jsdelivr.net/npm/@swarmcloud/media/media-proxy.js')

Once added, 1) your existing Service Worker will continue to be installed, and 2) SwarmCloud's imported Service Worker script will handle CDN 'fetch' events to intercept MP4/MP3 requests. All 'fetch' events not handled by SwarmCloud's Service Worker will fall through to your existing Service Worker's 'fetch' event handler(s).

Integrate P2P Engine​

Add the following line as early as possible to the <head> tag of your index.html; you can pass any of the Client Config options to the P2PEngineMedia class constructor:

<script src="https://cdn.jsdelivr.net/npm/@swarmcloud/media"></script>

Or via npm:

$ npm install @swarmcloud/media
import P2PEngineMedia from '@swarmcloud/media';

// Create P2PEngineMedia instance...
var engine = new P2PEngineMedia({
    // logLevel: 'debug',
    // swFile: './sw.js',     // you may need to change it to the actual path of sw.js
    // trackerZone: 'hk',        // if using Hongkong tracker
    // trackerZone: 'us',        // if using USA tracker
    // token: YOUR_TOKEN
    // Other p2pConfig options provided by P2PEngineMedia
})
// get the proxied playback url
engine.getProxiedUrl('http://example.mp4').then((url) => {
    video.src = url;
})

Player Integration​

You can use this SDK with clappr, videojs, jwplayer, and others; see examples here