Usage

Prerequisites

Register Domain

Register your domain to activate P2P service.

Localhost is always whitelisted. This means that you do not have to configure anything to perform tests 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.

Host Service Worker

To maintain a high-security standard, foreign software to be integrated into the browser with the help of ServiceWorkers is not allowed. This is only possible if the software is hosted on the same server as the web page. So the ServiceWorkers only work if they are hosted under the same domain as the main page, meaning that a client running a website needs to host our web SDK on his own servers instead of getting it from our public cloud.

If you don't have a Service Worker

Copy sw.js (opens new window) to your server and make it available at https://your_website.com/sw.js . Alternatively, download hls-proxy.js (opens new window) then rename to sw.js .

If you already have a Service Worker

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

self.importScripts('https://cdn.jsdelivr.net/npm/swarmcloud-hls-sw@latest/dist/hls-proxy.js')

Then set the correct path to sw.js for p2pConfig:

var p2pConfig = {
     swFile: PATH_TO_SW_FILE
}

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 HLS request. All 'fetch' events not handled by SwarmCloud's Service Worker will fall through to your existing Service Worker's 'fetch' event handler(s).

You don't need to secure your site with HTTPS or host Service Worker if only hls.js is used.

Install P2P Engine

Script

Include the pre-built script of latest version bundled with hls.js:

<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls.min.js"></script>

Or include the latest version without hls.js:

<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.17"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/p2p-engine.min.js"></script>

File

Click me (opens new window)
This needs to be included before your player code. You can either prepend it to your compiled code or include it in a <script> before it.

Browserify / Webpack

npm install --save swarmcloud-hls

To include swarmcloud-hls you need to require it in the player module:

var Hls = require('swarmcloud-hls/dist/hls.min');
// or P2pEngineHls
var P2pEngineHls = require('swarmcloud-hls/dist/p2p-engine.min');

If you are using ES6's import syntax:

import Hls from 'swarmcloud-hls/dist/hls.min';
// or P2pEngineHls
import P2pEngineHls from 'swarmcloud-hls/dist/p2p-engine.min';

Usage

Bundled SDK(Hls.js that has been bundled with the P2P engine)

Add p2pConfig as a property of hlsjsConfig, then Create hls.js instance passing hlsjsConfig as constructor param.

var p2pConfig = {
    logLevel: 'debug',
    // Other p2pConfig options if applicable
}
if(Hls.isSupported()) {
    var hlsjsConfig = {
        debug: true,
        // Other hlsjsConfig options provided by hls.js
        p2pConfig
    };
    // Hls constructor is overriden by included bundle
    var hls = new Hls(hlsjsConfig);
    // Use hls just like the usual hls.js ...
    hls.loadSource(contentUrl);
    hls.attachMedia(video);
} else {
    // use ServiceWorker based p2p engine if hls.js is not supported
    new Hls.P2pEngine(p2pConfig);   // equal to  new Hls.P2pEngine.ServiceWorkerEngine(p2pConfig);
}

Wrapper(the standalone SDK that without hls.js)

Create hls.js instance passsing hlsjsConfig as parameter. Create P2pEngineHls instance passing p2pConfig as parameter. Call hls.js loadSource and attachMedia methods.

var hlsjsConfig = {
    maxBufferSize: 0,       // Highly recommended setting in live mode
    maxBufferLength: 10,     // Highly recommended setting in live mode
    liveSyncDurationCount: 10,   // Highly recommended setting in live mode
};
var p2pConfig = {
    // Other p2pConfig options if applicable
}
if (P2pEngineHls.isMSESupported()) {
    var hls = new Hls(hlsjsConfig);
    p2pConfig.hlsjsInstance = hls;        // set hlsjs instance to SDK
    // Use hls just like your usual hls.js…
    hls.loadSource(contentUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
}
new P2pEngineHls(p2pConfig)

How it works

When the SDK is instantiated, it will give priority to trying to use hls.js based engine (hereinafter referred to as MSE Engine). If failed, try the ServiceWorker based engine (hereinafter referred to as SW Engine), as follows:

• If the browser does not support webrtc datachannel, no engine will be enabled
• If the browser supports MSE && hlsjsInstance is passed in && proxyOnly is not set, try to enable the MSE Engine
• Otherwise, enable the SW Engine if ServiceWorker is supported

Player Integration

See players demo .

Electron

Electron (opens new window) is also supported, you just need to register AppId and get a token from dashboard:

var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,
        appId: YOUR_APP_ID,
        // Other p2pConfig options if applicable
    }
};

Learn more here