Usage
Prerequisites
CORS
Make sure your streaming servers have proper CORS (Cross-origin resource sharing) headers so that data can be fetched across domain.
OPTIONS REQUEST
OPTIONS requests are mandatory to be able to perform RANGE requests in a cross-domain environment. The general idea is to add the following header to the HTTP response:
Access-Control-Allow-Methods: GET, OPTIONS
RANGE REQUEST
RANGE requests is required by 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
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.
To secure your site with HTTPS, you can use Let's Encrypt for a free certificate and easy integration. See Let's Encrypt's starting instructions here to secure your site.
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 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 to 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 request. 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 for clappr, videojs, jwplayer and so on, see here