Skip to content

Instantly share code, notes, and snippets.

@hitripod
Created August 28, 2017 16:40
Show Gist options
  • Save hitripod/5acda92b2bb2e080fc45b9258c0b21de to your computer and use it in GitHub Desktop.
Save hitripod/5acda92b2bb2e080fc45b9258c0b21de to your computer and use it in GitHub Desktop.
PearPlayer Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pear Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main">
<!--<video id="pearvideo" src="https://qq.webrtc.win/tv/pear001.mp4" controls>-->
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/planet.mp4" controls>-->
<video id="pearvideo" src="https://qq.webrtc.win/fastweb/Pear-Demo-FastWeb.mp4" controls>
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/SoundOfMusic_20.mp4" controls>-->
<!--<video id="pearvideo" src="https://qq.webrtc.win/free/Pear-Demo-SoundOfMusic_60.mp4" controls>-->
</video>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest/dist/pear-player.min.js"></script>-->
<script src="../pear-player.js"></script>
<!--<script src="../dist/pear-player.min.js"></script>-->
<script>
var magnetURI = 'magnet:?xt=urn:btih:1e02d0db405a5a17d59a2e1d42e9908f074a1e44&dn=pear001.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com';
// var magnetURI = 'magnet:?xt=urn:btih:18aef04e719dbc741578824938715e42397b194b&dn=planet.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com';
var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://api.webrtc.win:6601/v1/customer/login');
var data = JSON.stringify({
user:'demo',
password:'demo'
});
xhr.timeout = 2000;
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var res = JSON.parse(this.response);
if (!!res.token){
console.log('token:' +res.token);
//第一个参数为video标签的id或class
var player = new PearPlayer('#pearvideo', res.token, {
type: 'mp4',
algorithm: 'firstaid', //核心算法,默认firstaid
autoplay: true, //是否自动播发视频,默认true
interval: 5000, //滑动窗口的时间间隔,单位毫秒,默认10s
auto: false, //true为连续下载buffer,false则是只有当前播放时间与已缓冲时间小于slideInterval时下载buffer,默认false
slideInterval: 20, //当前播放时间与已缓冲时间小于这个数值时触发窗口滑动,单位秒,默认20s
useDataChannel: true, //是否开启data channel,默认true
dataChannels: 10, //创建data channel的最大数量,默认2
useTorrent: true, //是否开启Browser P2P(基于Webtorrent),默认true
// magnetURI: magnetURI, //可手动传入magnetURI,需先将useTorrent设为true
// trackers:["wss://tracker.openwebtorrent.com"], //可手动传入tracker服务器,需先将useTorrent设为true
useMonitor: true //是否开启monitor,会稍微影响性能,默认false
});
player.on('exception', onException); //播放器出现异常时的回调函数
player.on('begin', onBegin);              //开始下载时触发
player.on('progress', onProgress); //回调目前的下载进度
player.on('cloudspeed', onCloudSpeed); //来自server的HTTP的平均下载速度
player.on('fogspeed', onFogSpeed); //来自fog的节点(包括HTTP和WebRTC)的平均下载速度
player.on('fograte', onWebRTCRate);          //fog节点的下载比率(下载的字节数除以总的字节数)
player.on('buffersources', onBufferSources); //buffer map,记录每个buffer的下载源类型,其中s: server n: node d: data channel b: browser
player.on('done', onDone);         //结束下载时触发
player.on('traffic', onTraffic); //节点流量统计
}
} else {
alert('请求出错!');
}
};
xhr.send(data);
function onBegin(fileLength, chunks) {
console.log('start downloading buffer by first aid, file length is:' + fileLength + ' total chunks:' + chunks);
}
function onProgress(downloaded) {
console.log('Progress: ' + (downloaded * 100).toFixed(1) + '%');
}
function onCloudSpeed(speed) {
console.log('Cloud download speed: ' + speed + 'KBps');
}
function onFogSpeed(speed) {
console.log('Fog download speed: ' + speed + 'KBps');
}
function onWebRTCRate(p2pRate) {
console.log('Fog Rate: ' + (p2pRate * 100).toFixed(1) + '%');
}
function onDone() {
console.log('finished downloading buffer by first aid');
}
function onException(exception) {
var errCode = exception.errCode;
switch (errCode) {
case 1:
console.log(exception.errMsg);
break
}
}
function onBufferSources(bufferSources) { //s: server n: node d: data channel b: browser
console.log('Current Buffer Sources:' + bufferSources);
}
function onTraffic(mac, downloaded, type) {
console.log('type:'+type+' mac:'+mac+' downloaded:'+downloaded/1024/1024+'MB');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment