Usage
# Getting Started
Put the below codes in your web page, run it. 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-mp4@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `p2p version: ${P2PEngineMp4.version}`;
var video = document.getElementById('video');
var mp4 = new P2PEngineMp4(video, {
autoplay: true,
controls: true,
p2pConfig: {
logLevel: 'debug',
}
});
mp4.loadSource('https://webtorrent.io/torrents/Sintel/Sintel.mp4');
mp4.on('stats', function (stats) {
var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}% saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
})
mp4.on('peers', function (peers) {
document.querySelector('#peers').innerText = `peers: ${peers.length}`;
})
</script>
# 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 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
# Include
# Script
Include the pre-built script of latest version:
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></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 cdnbye-mp4
To include cdnbye-mp4 you need to require it in the player module:
var P2PEngineMp4 = require('cdnbye-mp4');
If you are using ES6's import syntax:
import P2PEngineMp4 from 'cdnbye-mp4';
# Usage
Create P2PEngineMp4 instance passing video tag as parameter.
var video = document.getElementById('video');
var mp4 = new P2PEngineMp4(video);
mp4.loadSource('example.mp4');
# Electron
CDNBye also supports Electron (opens new window), 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