Usage
# Quick Start Demo
Copy the following code in your web page and run. Wait for a few seconds,and 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 there is no one else in the same channel.
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls({
p2pConfig: {
logLevel: true,
live: false, // set to true in live mode
// Other p2pConfig options provided by CDNBye
}
});
hls.loadSource('https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
video.play();
});
hls.p2pEngine.on('stats', function ({totalHTTPDownloaded, totalP2PDownloaded, totalP2PUploaded}) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
});
}
</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.
# Integrate to existing hls.js Project
Simply replace the hls.js script tag like:
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
with
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
That's it!
# Integrate to HTML5 Players
# Include
# Script
Include the pre-built script of latest version bundled with hls.js:
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
Or include the latest version without hls.js:
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></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
To include cdnbye you need to require it in the player module:
var Hls = require('cdnbye');
If you are using ES6's import syntax:
import Hls from 'cdnbye';
# Usage
# Bundle
Add p2pConfig as a property of hlsjsConfig, then Create hls.js instance passing hlsjsConfig as constructor param.
var hlsjsConfig = {
debug: true,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: 'debug',
// Other p2pConfig options if applicable
}
};
// Hls constructor is overriden by included bundle
var hls = new Hls(hlsjsConfig);
// Use hls just like the usual hls.js ...
hls.loadSource(contentUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
# Engine(the library without hls.js)
Create hls.js instance passsing hlsjsConfig as parameter. Create P2PEngine instance passing hls.js instance and p2pConfig as parameters. Call hls.js loadSource and attachMedia methods.
var hlsjsConfig = {
maxBufferSize: 0, // Highly recommended setting in live mode
maxBufferLength: 10, // Highly recommended setting in live mode
liveSyncDurationCount: 10, // Highly recommended setting in live mode
};
var p2pConfig = {
logLevel: 'debug',
// Other p2pConfig options if applicable
};
var hls = new Hls(hlsjsConfig);
if (P2PEngine.isSupported()) {
new P2PEngine(hls, p2pConfig); // Key step
}
// Use hls just like your usual hls.js…
hls.loadSource(contentUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
# Support for IE
CDNBye use ES6 API which make it not supported for IE. @babel/polyfill can emulate a full ES2015+ environment. You can use CommonJS style to include required packages. First install these packages:
npm install --save @babel/polyfill
Then insert the code into the beginning of your entry file:
require("@babel/polyfill");
Or include it in a <script>
before the script of cdnbye:
<script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.min.js"></script>
# Electron
CDNBye also supports Electron(CDNBye version>=0.10.0), you just need to register AppId and get a token from CDNBye console:
var hlsjsConfig = {
p2pConfig: {
token: YOUR_TOKEN,
appName: YOUR_APP_NAME,
appId: YOUR_APP_ID,
// Other p2pConfig options if applicable
}
};
Learn more here