使用方法 | SwarmCloud中文文档

绑定域名

在使用P2P服务之前，需要先绑定域名。

TIP

Localhost 已加入白名单，无需绑定，用于本地调试。

使用原生hls.js项目

如果您在项目中引入了hls.js的script标签，那么只需要将该标签如：

html

<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16"></script>

<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16"></script>

替换为

html

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

就是这么简单！

播放器集成

参考播放器示例。

引入插件

Script标签引入

通过script标签引入已经和hls.js打包的最新版本（推荐）：

html

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

或者引入没有与hls.js打包的独立版本：

html

<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>

文件引入

点击
注意js代码需要放在播放器代码之前执行，可以在引入播放器代码的script标签之前引入。

Browserify / Webpack

shell

npm install --save cdnbye

npm install --save cdnbye

在播放器模块中通过 require 引入cdnbye：

javascript

var Hls = require('cdnbye');

var Hls = require('cdnbye');

或者使用ES6的 import 语法：

javascript

import Hls from 'cdnbye';

import Hls from 'cdnbye';

使用插件

Bundled SDK(已经整合了 P2P 插件的Hls.js库)

在 hlsjsConfig 对象字面量中加入 p2pConfig 字段，然后在实例化hls.js时把 hlsjsConfig 作为参数传入。

javascript

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

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

Wrapper(没有打包 Hls.js 的插件，需要自己引入 Hls.js）

实例化hls.js并将 hlsjsConfig 作为参数传入。然后实例化 P2PEngine 并将 p2pConfig 作为参数传入。调用hls.js的 loadSource 和 attachMedia 方法。

javascript

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

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

WARNING

引入CDNBye提供的hls.js则不需要再引入Engine

兼容IE浏览器

由于插件使用了ES6的API，会导致在IE浏览器下报错，可以在项目中引入polyfill来解决这个问题，首先通过npm安装：

bash

npm install --save @babel/polyfill

npm install --save @babel/polyfill

然后在相应模块中引入：

javascript

require("@babel/polyfill");

require("@babel/polyfill");

或者可以在html中引入插件之前加入一行script标签：

html

<script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.min.js"></script>

<script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.min.js"></script>

Electron

本插件同样支持 Electron 平台（CDNBye版本>=0.10.0），只需求将从管理面板获取的token等信息传进config中即可，如下所示：

javascript

var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,    // 应用的名称
        appId: YOUR_APP_ID,        // 需要与管理面板输入的保持一致
        // Other p2pConfig options if applicable
    }
};

var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,    // 应用的名称
        appId: YOUR_APP_ID,        // 需要与管理面板输入的保持一致
        // Other p2pConfig options if applicable
    }
};

参考如何获取token

绑定域名 ​

使用原生hls.js项目 ​

播放器集成 ​

引入插件 ​

Script标签引入 ​

文件引入 ​

Browserify / Webpack ​

使用插件 ​

Bundled SDK(已经整合了 P2P 插件的Hls.js库) ​

Wrapper(没有打包 Hls.js 的插件，需要自己引入 Hls.js） ​

兼容IE浏览器 ​

Electron ​

绑定域名

使用原生hls.js项目

播放器集成

引入插件

Script标签引入

文件引入

Browserify / Webpack

使用插件

Bundled SDK(已经整合了 P2P 插件的Hls.js库)

Wrapper(没有打包 Hls.js 的插件，需要自己引入 Hls.js）

兼容IE浏览器

Electron