Skip to main content

Usage

Getting Started

Copy the demo html to your IDE and open 2 pages to check p2p.

Register Domain

Register your domain to activate P2P service.

tip

Localhost is always whitelisted. This means that you do not have to configure anything to perform tests locally.

Prepare

CORS

Make sure your file 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

Some browsers such as Firefox, need to set Access-Control-Expose-Headers in the HTTP response header to get the file size:

Access-Control-Expose-Headers: Content-Length

Include

Script

Include the pre-built script of latest version:

<script src="https://cdn.jsdelivr.net/npm/cdnbye-file@latest"></script>

File

Click me
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 cdnbye-file

To include cdnbye-file you need to require it in the player module:

var P2PEngineFile = require('cdnbye-file');

If you are using ES6's import syntax:

import P2PEngineFile from 'cdnbye-file';

Usage

Create P2PEngineFile instance passing url as parameter.

var downloader = new P2PEngineFile('path/to/your.file');
downloader.on('finished', function (file) {
file.save('name.file');
file.revokeBlobURL(); // free the blob
});
downloader.on('failed', function (e) {
// fallback to normal download
});
downloader.on('progress', function (e) {
// show progress to user
});
downloader.start();

Save file by ServiceWorker Stream

Instead of saving data in client-side storage or in memory then save by blob url, you could now actually create a writable stream directly to the file system. This is accomplished by emulating how a server would instruct the browser to save a file using some response header + service worker. It will create an own man in the middle that installs the service worker in a secure context hosted on github static pages from an iframe. You can host the mitm.html by yourself.

var downloader = new P2PEngineFile('path/to/your.file'{
// mitm: './mitm.html', // https://github.com/cdnbye/file-p2p-engine/blob/master/demo/mitm.html
});
if (downloader.isSaveByStreamSupported()) {
downloader.saveByServiceWorkerStream("filename")
.catch(err => {
console.error(err)
// you need to make the fallback strategy by yourself
});
} else {
// you need to make the fallback strategy by yourself
}
downloader.start();

See save-by-stream demo