Usage

Getting Started

Run the below codes in your web page. Wait for a few seconds，then open the same page from another browser. Now you have a direct P2P connection between two browsers without plugin! The first web peer will serve as a seed, if no one else in the same channel.

<script src="https://cdn.jsdelivr.net/npm/cdnbye-file@latest"></script>
<h3>download info:</h3>
<p id="url"></p>
<p id="mime"></p>
<p id="size"></p>
<p id="progress"></p>
<p id="speed"></p>
<p id="p2p"></p>
<script>
    var url = 'https://webtorrent.io/torrents/Sintel/Sintel.mp4';
    var downloader = new P2PEngineFile(url);
    downloader.on('metadata', function (source) {
            document.querySelector('#url').innerText = `Url: ${source.getUrl()}`;
            document.querySelector('#mime').innerText = `Mime: ${source.getMime()}`;
            document.querySelector('#size').innerText = `Size: ${source.getFileLength()}`;
        })
        .on('finished', function (file) {
            document.querySelector('#progress').innerText = `Download finished`
            file.save('test.mp4')
        })
        .on('progress', ratio => {
            document.querySelector('#progress').innerText = `Progress: ${ratio.toFixed(2)}%`
        })
        .on('speed', speed => {
            document.querySelector('#speed').innerText = `Speed: ${Math.round(speed/1000)}KB/s`
        })
        .on('failed', function (e) {
            // fallback
            var a = document.createElement('a');
            a.download = "test.mp4";
            a.href = url;
            document.body.appendChild(a);
            a.click();
            a.remove();
        })
        .on('stats', function (stats) {
            var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
            document.querySelector('#p2p').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%   saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
        })

    downloader.start();
</script>

Register Domain

Register your domain to activate P2P service.

Localhost (127.0.0.1) 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();

Electron

CDNBye also supports Electron, you just need to register AppId and get a token from CDNBye console:

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

Learn more here