準備工作

綁定網域

在使用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.jsdmirror.com/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.jsdmirror.com/npm/hls.js@latest"></script>
<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/hls/p2p-engine.min.js"></script>

內建P2pEngine的hls.js

<script src="https://cdn.jsdmirror.com/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.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