P2P Streaming Engine

vuePress-theme-reco    2018 - 2021
P2P Streaming Engine P2P Streaming Engine

Choose mode

  • dark
  • auto
  • light
Documents
  • Introduction
  • Web SDK

    • Hls.js
    • Dash.js
    • Shaka-Player
    • MP4
    • Downloader
  • Android SDK
  • iOS SDK
  • Flutter SDK
Pricing
Contact Us
Partnership
Console
GitHub
语言
  • English
  • 简体中文

Documents
  • Introduction
  • Web SDK

    • Hls.js
    • Dash.js
    • Shaka-Player
    • MP4
    • Downloader
  • Android SDK
  • iOS SDK
  • Flutter SDK
Pricing
Contact Us
Partnership
Console
GitHub
语言
  • English
  • 简体中文
  • Introduction
  • FAQ
  • Tracking Service
  • Signaling Service
  • P2P Optimization
  • Console

    • Domain/AppId Binding
    • Data Analysis
    • P2P Control
    • Restful API
  • Hls.js SDK

    • Introduction
    • Usage
      • Quick Start Demo
      • Register Domain
      • Integrate to existing hls.js Project
      • Integrate to HTML5 Players
      • Include
      • Usage
      • Support for IE
      • Electron
    • Player Integration
    • API & Config
    • CDN
    • Change Log
  • Android SDK

    • Introduction
    • Usage
    • API & Config
    • Change Log
  • iOS SDK

    • Introduction
    • Usage
    • API & Config
    • Change Log
  • Flutter SDK

    • Introduction
    • Usage
    • API & Config
    • Change Log
  • Shaka-Player SDK

    • Introduction
    • Usage
    • Player Integration
    • API & Config
    • Change Log
  • Web MP4 SDK

    • Introduction
    • Usage
    • Player Integration
    • API & Config
    • Change Log
  • Dash.js SDK

    • Introduction
    • Usage
    • Player Integration
    • API & Config
    • Change Log
  • Web Downloader

    • Introduction
    • Usage
    • API & Config
    • Change Log
  • Android SDK 1.x

    • Introduction
    • Usage
    • API & Config
    • Change Log
  • More

    • Design

Usage

vuePress-theme-reco    2018 - 2021

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

See Player Integration

# 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