Skip to content

准备工作

跨域配置

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

允许 OPTIONS 请求

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

Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Methods: GET, OPTIONS

允许 RANGE 请求

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

Access-Control-Allow-Headers: Range
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 文件的第一行增加以下代码:

javascript
self.importScripts('https://cdn.jsdelivr.net/npm/swarmcloud-media@latest/dist/media-proxy.js')
self.importScripts('https://cdn.jsdelivr.net/npm/swarmcloud-media@latest/dist/media-proxy.js')

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

集成 P2P Engine

Script标签集成

在 index.html 的 head 标签中添加如下脚本,并创建 P2PEngineMedia 实例,可以自定义配置参数:

html
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-media@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-media@latest"></script>

也可以通过npm引入:

bash
$ npm install swarmcloud-media
$ npm install swarmcloud-media
javascript
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;
})
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可以与几乎所有第三方播放器搭配使用,请参考示例代码

粤ICP备18075581号