使用方法
SwarmCloud
# 快速入门
将以下代码拷贝到您的网页中并运行。再打开另一个相同的网页。见证奇迹的时候到了!您已在两个网页之间建立了一个P2P连接,在不安装任何插件的情况下。如果在这个频道中(一个mp4标识了一个频道)没有其它参与者,那么您打开的第一个网页将作为种子为第二个网页提供数据。
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `p2p version: ${P2PEngineMp4.version}`;
var video = document.getElementById('video');
var mp4 = new P2PEngineMp4(video, {
autoplay: true,
controls: true,
p2pConfig: {
logLevel: 'debug',
}
});
mp4.loadSource('https://webtorrent.io/torrents/Sintel/Sintel.mp4');
mp4.on('stats', function (stats) {
var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}% saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
})
mp4.on('peers', function (peers) {
document.querySelector('#peers').innerText = `peers: ${peers.length}`;
})
</script>
# 绑定域名
在使用P2P服务之前,需要先绑定域名。
Localhost 已加入白名单,无需绑定,用于本地调试。
# 准备工作
# 跨域配置
请确保流媒体服务器已做好跨域配置
# 允许 OPTIONS 请求
OPTIONS 请求是在跨域环境下 RANGE 请求的前置请求,一般情况下可以在 HTTP 响应头中添加:
Access-Control-Allow-Methods: GET, OPTIONS
# 允许 RANGE 请求
本SDK需要用到 RANGE 请求,一般情况下可以在 HTTP 响应头中添加:
Access-Control-Allow-Headers: Range
# 引入插件
# Script标签引入
通过script标签引入最新版本:
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
# 文件引入
点击 (opens new window)
注意js代码需要放在播放器代码之前执行,可以在引入播放器代码的script标签之前引入。
# Browserify / Webpack
npm install --save cdnbye-mp4
在播放器模块中通过 require 引入cdnbye-mp4:
var P2PEngineMp4 = require('cdnbye-mp4');
或者使用ES6的 import 语法:
import P2PEngineMp4 from 'cdnbye-mp4';
# 使用插件
实例化 P2PEngineMp4 并将 video 标签作为参数传入。
var video = document.getElementById('video');
var mp4 = new P2PEngineMp4(video);
mp4.loadSource('example.mp4');
# Electron
本插件同样支持 Electron (opens new window) 平台,只需求将从控制台获取的token等信息传进config中即可,如下所示:
p2pConfig: {
token: YOUR_TOKEN,
appName: YOUR_APP_NAME, // 应用的名称
appId: YOUR_APP_ID, // 需要与控制台输入的保持一致
// Other p2pConfig options if applicable
}