使用方法
# 准备工作
# 綁定域名
在使用P2P服務之前，需要先綁定域名。
Localhost 已加入白名單，無需綁定，用於本地調試。
# 网站迁移到HTTPS
由于基於 Service Worker 的引擎需要在HTTPS下才能生效，请确保你的网站已经迁移到HTTPS，如果只使用基於 hls.js 的引擎則可以忽略。
# 部署本地代理(sw.js)
為了安全起見，瀏覽器不允許其他域名的腳本調用 ServiceWorker ，因此需要將腳本文件置於網站同一域名下，P2P功能才能正常工作，具體操作如下：
# 如果網站不是PWA
拷貝 sw.js (opens new window) 到服務器的播放器所在目錄， 並確保可以通過公網訪問如 https://your_website.com/sw.js 。 您也可以下载hls-proxy.js (opens new window) 本地化并改名为 sw.js 。
# 如果網站是PWA
在網站根目錄的 sw.js 文件的第一行增加以下代碼：
self.importScripts('https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls-proxy.js')
並且在 SDK 配置正確的 sw.js 路徑
var p2pConfig = {
swFile: PATH_TO_SW_FILE
}
部署完成後，1）您的網站之前 sw.js 的邏輯將繼續正常執行；2）SwarmCloud 的 ServiceWorker 腳本將監聽"fetch"事件進而攔截HLS請求，其他請求將被之前的 ServiceWorker 的邏輯處理。
如果仅使用hls.js，則不需要部署HTTPS或者本地代理(sw.js)
# 引入插件
# Script標簽引入
通過script標簽引入已經和hls.js打包的最新版本：
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls.min.js"></script>
或者引入沒有與hls.js打包的獨立版本：
<script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.17"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/p2p-engine.min.js"></script>
# 文件引入
點擊 (opens new window)
註意js代碼需要放在播放器代碼之前執行，可以在引入播放器代碼的script標簽之前引入。
# Browserify / Webpack
npm install --save swarmcloud-hls
在播放器模塊中通過 require 引入：
var Hls = require('swarmcloud-hls/dist/hls.min');
// 或者引入P2pEngineHls
var P2pEngineHls = require('swarmcloud-hls/dist/p2p-engine.min');
或者使用ES6的 import 語法：
import Hls from 'swarmcloud-hls/dist/hls.min';
// 或者引入P2pEngineHls
import P2pEngineHls from 'swarmcloud-hls/dist/p2p-engine.min';
# 使用插件
# Bundled SDK(已經整合了 P2P 插件的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);
}
# Wrapper(沒有打包 Hls.js 的插件，需要自己引入 Hls.js）
實例化hls.js並將 hlsjsConfig 作為參數傳入。然後實例化 P2pEngineHls 並將 p2pConfig 作為參數傳入。調用hls.js的 loadSource 和 attachMedia 方法。
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 = {
// Other p2pConfig options if applicable
}
if (P2pEngineHls.isMSESupported()) {
var hls = new Hls(hlsjsConfig);
p2pConfig.hlsjsInstance = hls; // set hlsjs instance to SDK
// Use hls just like your usual hls.js…
hls.loadSource(contentUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
new P2pEngineHls(p2pConfig)
# 引擎的切換原理
SDK在實例化時，會優先嘗試使用基於 hls.js 的引擎（以下簡稱MSE引擎），如果不成功則嘗試基於 ServiceWorker 的引擎（以下簡稱SW引擎），具體如下：
- 如果瀏覽器不支持 WebRTC Datachannel，則不啟用任何P2P引擎
- 如果瀏覽器支持 MSE 並且 傳入了 hlsjsInstance 並且沒有設置 proxyOnly，則嘗試啟用MSE引擎
- 否則在支持 ServiceWorker 的情況下啟用SW引擎
# 播放器集成
參考播放器示例。
# Electron
本插件同樣支持 Electron (opens new window) 平臺，只需求將從管理面板獲取的token等信息傳進config中即可，如下所示：
var hlsjsConfig = {
p2pConfig: {
token: YOUR_TOKEN,
appName: YOUR_APP_NAME, // 應用的名稱
appId: YOUR_APP_ID, // 需要與管理面板輸入的保持一致
// Other p2pConfig options if applicable
}
};