SwarmCloud中文文档

中文

English

中文

English

Appearance

准备工作 ​

绑定域名 ​

在使用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 文件的第一行增加以下代码：

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

并且在 SDK 配置正确的 sw.js 路径

javascript
var p2pConfig = {
     swFile: PATH_TO_SW_FILE
}
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打包的独立版本：

html
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/p2p-engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/p2p-engine.min.js"></script>
html
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls.min.js"></script>

文件引入 ​

点击
注意js代码需要放在播放器代码之前执行，可以在引入播放器代码的script标签之前引入。

Browserify / Webpack ​

shell
npm install --save swarmcloud-hls
npm install --save swarmcloud-hls

在播放器模块中通过 require 引入：

javascript
var Hls = require('hls.js');
var P2pEngineHls = require('swarmcloud-hls');
var Hls = require('hls.js');
var P2pEngineHls = require('swarmcloud-hls');
javascript
var Hls = require('swarmcloud-hls/dist/hls.min');
var Hls = require('swarmcloud-hls/dist/hls.min');

或者使用ES6的 import 语法：

javascript
import Hls from 'hls.js';
import P2pEngineHls from 'swarmcloud-hls';
import Hls from 'hls.js';
import P2pEngineHls from 'swarmcloud-hls';
javascript
import Hls from 'swarmcloud-hls/dist/hls.min';
import Hls from 'swarmcloud-hls/dist/hls.min';

使用插件 ​

javascript
// 实例化hls.js并将 ***hlsjsConfig*** 作为参数传入。然后实例化 ***P2pEngineHls*** 并将 ***p2pConfig*** 作为参数传入。
var p2pConfig = {
    // Other p2pConfig options if applicable
}
var engine;
if (P2pEngineHls.isMSESupported()) {
    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 hls = new Hls(hlsjsConfig);
    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

    });
}
// 实例化hls.js并将 ***hlsjsConfig*** 作为参数传入。然后实例化 ***P2pEngineHls*** 并将 ***p2pConfig*** 作为参数传入。
var p2pConfig = {
    // Other p2pConfig options if applicable
}
var engine;
if (P2pEngineHls.isMSESupported()) {
    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 hls = new Hls(hlsjsConfig);
    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

    });
}
javascript
// 在 ***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);
}
// 在 ***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);
}

WARNING

如果媒体文件是由多个服务器生成的，为避免冲突，请增加以下配置：

javascript
var p2pConfig = {
    strictSegmentId: true,
}
var p2pConfig = {
    strictSegmentId: true,
}

引擎的切换原理 ​

SDK在实例化时，会优先尝试使用基于 hls.js 的引擎（以下简称MSE引擎），如果不成功则尝试基于 ServiceWorker 的引擎（以下简称SW引擎），具体如下：

  • 如果浏览器不支持 WebRTC Datachannel，则不启用任何P2P引擎
  • 如果浏览器支持 MSE 并且 传入了 hlsjsInstance 并且没有设置 proxyOnly，则尝试启用MSE引擎
  • 否则在支持 ServiceWorker 的情况下启用SW引擎

播放器集成 ​

参考播放器示例。

Electron ​

本插件同样支持 Electron 平台，只需求将从管理面板获取的token等信息传进config中即可，如下所示：

javascript
var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,    // 应用的名称
        appId: YOUR_APP_ID,        // 需要与管理面板输入的保持一致
        // Other p2pConfig options if applicable
    }
};
var hlsjsConfig = {
    p2pConfig: {
        token: YOUR_TOKEN,
        appName: YOUR_APP_NAME,    // 应用的名称
        appId: YOUR_APP_ID,        // 需要与管理面板输入的保持一致
        // Other p2pConfig options if applicable
    }
};

参考如何获取token

粤ICP备18075581号

Copyright © 2019-present SwarmCloud