准备工作

跨域配置

请确保流媒体服务器已做好跨域配置

允许 OPTIONS 请求

OPTIONS 请求是在跨域环境下 RANGE 请求的前置请求，一般情况下可以在 HTTP 响应头中添加:

Access-Control-Allow-Methods: GET, OPTIONS

允许 RANGE 请求

本SDK需要用到 RANGE 请求，一般情况下可以在 HTTP 响应头中添加:

Access-Control-Allow-Headers: Range

绑定域名

访问 https://dash.cdnbye.com ，注册并绑定域名。

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.jsdelivr.net/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.jsdelivr.net/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可以与几乎所有第三方播放器搭配使用，请参考示例代码