准备工作

绑定域名

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

TIP

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

部署本地代理(可选)

Click me

由于基于 Service Worker 的引擎需要在HTTPS下才能生效，请确保你的网站已经迁移到HTTPS，如果只使用基于 hls.js 的引擎则可以忽略。为了安全起见，浏览器不允许其他域名的脚本调用 ServiceWorker ，因此需要将脚本文件置于网站同一域名下，P2P功能才能正常工作，具体操作如下：

如果网站不是PWA

拷贝 sw.js 到服务器的播放器所在目录， 并确保可以通过公网访问如 https://your_website.com/sw.js 。 您也可以下载hls-proxy.js 本地化并改名为 sw.js 。

如果网站是PWA

在网站根目录的 sw.js 文件的第一行增加以下代码：

self.importScripts('https://cdn.jsdelivr.net/npm/@swarmcloud/hls/hls-proxy.js')

并且在 SDK 配置正确的 sw.js 路径

var p2pConfig = {
     swFile: PATH_TO_SW_FILE
}

部署完成后，1）您的网站之前 sw.js 的逻辑将继续正常执行；2）SwarmCloud 的 ServiceWorker 脚本将监听"fetch"事件进而拦截HLS请求，其他请求将被之前的 ServiceWorker 的逻辑处理。

TIP

如果仅使用hls.js，则不需要部署HTTPS或者本地代理(sw.js)

引入插件

Script标签引入

通过script标签引入已经和hls.js打包的最新版本，或者引入没有与hls.js打包的独立版本：

单独打包的P2pEngine

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

内置P2pEngine的hls.js

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

文件引入

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

Browserify / Webpack

npm install --save @swarmcloud/hls

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

单独打包的P2pEngine

var Hls = require('hls.js');
var P2pEngineHls = require('@swarmcloud/hls').default;

内置P2pEngine的hls.js

var Hls = require('@swarmcloud/hls/hls.min');

或者使用ES6的 import 语法：

单独打包的P2pEngine

import Hls from 'hls.js';
import P2pEngineHls from '@swarmcloud/hls';

内置P2pEngine的hls.js

import Hls from '@swarmcloud/hls/hls.min';

使用插件

单独打包的P2pEngine

// 实例化hls.js并将 ***hlsjsConfig*** 作为参数传入。然后实例化 ***P2pEngineHls*** 并将 ***p2pConfig*** 作为参数传入。
var p2pConfig = {
    // Other p2pConfig options if applicable
}
var engine;
if (P2pEngineHls.isMSESupported()) {
    var hls = new Hls();
    p2pConfig.hlsjsInstance = hls;        // set hlsjs instance to SDK
    engine = new P2pEngineHls(p2pConfig);
    // Use hls just like your usual hls.js…
    hls.loadSource(contentUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
} else {
    engine = new P2pEngineHls(p2pConfig);   // equal to new P2pEngineHls.ServiceWorkerEngine(p2pConfig);
    engine.registerServiceWorker().catch(() => {}).finally(() => {
        // native video playback here

    });
}

内置P2pEngine的hls.js

// 在 ***hlsjsConfig*** 对象字面量中加入 ***p2pConfig*** 字段，然后在实例化hls.js时把 ***hlsjsConfig*** 作为参数传入。
var p2pConfig = {
    logLevel: 'debug',
    // Other p2pConfig options if applicable
}
if(Hls.isSupported()) {
    var hlsjsConfig = {
        debug: true,
        // Other hlsjsConfig options provided by hls.js
        p2pConfig
    };
    // 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);
} else {
    // use ServiceWorker based p2p engine if hls.js is not supported
    new Hls.P2pEngine(p2pConfig);     // equal to  new Hls.P2pEngine.ServiceWorkerEngine(p2pConfig);
}

引擎的切换原理

SDK在实例化时，会优先尝试使用基于 hls.js 的引擎（以下简称MSE引擎），如果不成功则尝试基于 ServiceWorker 的引擎（以下简称SW引擎），具体如下：

• 如果浏览器不支持 WebRTC Datachannel，则不启用任何P2P引擎
• 如果浏览器支持 MSE 并且 传入了 hlsjsInstance 并且没有设置 proxyOnly，则尝试启用MSE引擎
• 否则在支持 ServiceWorker 的情况下启用SW引擎

播放器集成

参考播放器示例。

文件解释

@swarmcloud/hls/
├── hls.min.d.ts              # Typescript type information about hls.min.js and hls.light.min.js
├── hls.min.js                # Hls.js with P2pEngine built in
└── hls.light.min.js          # Hls.light.js with P2pEngine built in
└── p2p-engine.min.d.js       # Typescript type information about p2p-engine.min.js
└── p2p-engine.min.js         # P2pEngine that supports both Hls.js and ServiceWorker
└── p2p-engine.es.min.js         # P2pEngine that supports both Hls.js and ServiceWorker for ES Module
└── hlsjs-p2p-engine.min.js   # P2pEngine that supports Hls.js only
└── sw-p2p-engine.min.js      # P2pEngine that supports ServiceWorker only
└── hls-proxy.js              # The file that be imported by sw.js

Electron

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

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

参考如何获取token