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.
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/@swarmcloud/file"></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 @swarmcloud/file
To include @swarmcloud/file you need to require it in the player module:
var P2PEngineFile = require('@swarmcloud/file');
If you are using ES6's import syntax:
import P2PEngineFile from '@swarmcloud/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();