準備工作

跨網域設定

請確保串流媒體伺服器已做好跨網域設定

允許 OPTIONS 請求

OPTIONS 請求是在跨網域環境下 RANGE 請求的前置請求，一般情況下可以在 HTTP 回應標頭中加入:

Access-Control-Allow-Methods: GET, OPTIONS

允許 RANGE 請求

本SDK需要用到 RANGE 請求，一般情況下可以在 HTTP 回應標頭中加入:

Access-Control-Allow-Headers: Range

綁定網域

造訪 管理面板 ，註冊並綁定網域。

TIP

Localhost 已加入白名單，無需綁定，用於本地除錯。

網站遷移到HTTPS

由於 Service Worker 需要在HTTPS下才能生效，請確保你的網站已經遷移到HTTPS。

你可以使用 Let's Encrypt 來產生免費的憑證。請參考 這裡 的教學。

部署本地代理

為了安全起見，瀏覽器不允許其他網域的指令碼呼叫 ServiceWorker，因此需要將指令碼檔案置於網站同一網域下，P2P功能才能正常運作，具體操作如下：

如果網站不是PWA

複製 sw.js 到伺服器的播放器所在目錄，並確保可以透過公用網路存取，如 https://your_website.com/sw.js 。

如果網站是PWA

在網站根目錄的 sw.js 檔案的第一行加入以下程式碼：

self.importScripts('https://cdn.jsdmirror.com/npm/@swarmcloud/media/media-proxy.js')

部署完成後，1）您的網站之前 sw.js 的邏輯將繼續正常執行；2）SwarmCloud 的 ServiceWorker 指令碼將監聽「fetch」事件進而攔截MP4/MP3請求，其他請求將被之前的 ServiceWorker 的邏輯處理。

整合 P2P Engine

Script標籤整合

在 index.html 的 head 標籤中加入如下指令碼，並建立 P2PEngineMedia 實例，可以自訂設定參數：

<script src="https://cdn.jsdmirror.com/npm/@swarmcloud/media"></script>

也可以透過npm引入：

$ npm install @swarmcloud/media

import P2PEngineMedia from '@swarmcloud/media';

// Create P2PEngineMedia instance...
var engine = new P2PEngineMedia({
    // logLevel: 'debug',
    // swFile: './sw.js',     // 如果 sw.js 不在目前資料夾，則需要修改這個欄位
    // trackerZone: 'hk',        // if using Hongkong tracker
    // trackerZone: 'us',        // if using USA tracker
    // token: YOUR_TOKEN
    // Other p2pConfig options provided by P2PEngineMedia
})
// 取得本地代理的播放位址
engine.getProxiedUrl('http://example.mp4').then((url) => {
    video.src = url;
})

第三方播放器整合

本SDK可以與幾乎所有第三方播放器搭配使用，請參考範例程式碼