English | 简体中文

This JS library implements WebRTC datachannel to scale live/vod video streaming by peer-to-peer network using bittorrent-like protocol. The forming peer network can be layed over other CDNs or on top of the origin server. Powered by hls.js, it can play HLS on any platform with many popular HTML5 players such as video.js, JWPlayer and Flowplayer. BTW, if you need a p2p engine for dash.js, tell me!

• WebRTC data channels for lightweight peer-to-peer communication with no plugins
• Very easy to integrate with an existing hls.js project
• Seamlessly fallback to normal server usage if a browser doesn't support WebRTC
• Highly configurable for users
• Support most popular HTML5 players such as video.js、Clappr、Flowplayer
• Efficient scheduling policies to enhance the performance of P2P streaming
• Use IP database to group up peers by ISP and regions

Click me!

Put the quick-start.html 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.

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!

See demos.

WebRTC has already been incorporated into the HTML5 standard and it is broadly deployed in modern browsers. The compatibility of CDNBye depends on the browser support of WebRTC and Hls.js. Please note that iOS Safari "Mobile" does not support the MediaSource API.

Include the pre-built script of latest version bundled with hls.js(recommended):

<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/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>

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 ...

Create hls.js instance passsing hlsjsConfig as param. Create P2PEngine instance passing hls.js instance and p2pConfig as params. Call hls.js loadSource and attachMedia methods.

var hlsjsConfig = {
    maxBufferSize: 0,       // Highly recommended setting
    maxBufferLength: 30,    // Highly recommended setting
    liveSyncDurationCount: 10,    // Highly recommended setting
};

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();
});

• videojs
  • See videojs-demo.html
• flowplayer
  • See flowplayer-demo.html
• jwplayer
  • See jwplayer-demo.html
• DPlayer
  • See dplayer-demo.html based on P2P-DPlayer.
• CKPlayer
  • See ckplayer-demo.html based on P2P-CKPlayer
• clappr
  • See clappr-demo.html
• MediaElement.js
  • See mediaelement-demo.html
• TCPlayer(Tencent Cloud Player)
  • See tcplayer-demo.html
• Chimee
  • See chimee-demo.html
• Add your customized player here
  • CDNBye can be integrated into any HTML5 video player that with hls.js built in.

See API.md

To communicate with another peer you simply need to exchange contact information and the rest will be done by WebRTC. The process of connecting to the other peers is also known as signaling.

• Deploy your own Signaling Server (Recommended)
  • gosignaler (written by Golang)
  • php-signaler (written by PHP)
• Use free Signaling Server
  • 'wss://signal.cdnbye.com/wss' (Default signaling server)

See design.md

We have collected some frequently asked questions. Before reporting an issue, please search if the FAQ has the answer to your problem.

Email: [email protected]