firstaid
v1.0.0
Published
<h1 align="center"> <img src="fig/pear.png" height="220"></img> <br> PearPlayer.js <br> <br> </h1>
Downloads
18
Maintainers
Readme
PearPlayer(梨享播放器) 是完全用JavaScript写的开源HTML5流媒体播放框架,实现了融合HTTP(包含HTTPS、HTTP2)、WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web端流媒体加速能力。基于H5的MSE技术(Media Source Extension)将来自多个源节点的Buffer分块喂给播放器,再加上精心设计的算法来达到最优的调度策略和处理各种异常情况,Pear Player能在保证用户流畅视频体验的前提下最大化P2P率。
只需将pear-player.min.js
通过<script>
标签导入到HTML就可以使用。 参考以下代码示例,也可以查看/test/test.html
来了解使用方法。
信令部分以及WebRTC部分我们使用了自己精心设计的协议,实现此部分可以参考我们的API文档。
特性
- P2P能力基于WebRTC,无须安装任何插件
- 播放流畅,加载快速(具体依赖于当前网络环境)
- 多协议(HTTP、HTTPS、WebRTC)、多源
- 自行研发的调度算法,在保证用户流畅视频体验的前提下最大化P2P率
- 经过严格测试,稳定可靠
- 支持Chrome、Firefox、Opera等主流浏览器
使用方法
获取token
在使用PearPlayer之前,需要获取token,通过调用我们提供的API接口(/v1/customer/login)并传入用户名和密码, 我们已经为访客提供了测试帐号(用户名:test 密码:123456),获取token的示例代码如下:
var PearPlayer = require('PearPlayer');
var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://api.webrtc.win:6601/v1/customer/login');
var data = JSON.stringify({
user:'test',
password:'123456'
});
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var res = JSON.parse(this.response);
if (!!res.token){
console.log('token:' +res.token);
}
} else {
alert('请求出错!');
}
};
xhr.send(data);
导入js文件并绑定video标签
首先通过script标签导入pear-player.min.js:
<script src="./dest/pear-player.min.js"></script>
假设用video标签播放(/tv/pear001.mp4)这个视频,HTML如下所示:
<video id="pearvideo" src="https://qq.webrtc.win/tv/pear001.mp4" controls>
只需要如下几行代码,即可将PearPlayer绑定到video标签:
<script>
var PearPlayer = require('PearPlayer');
var player = new PearPlayer('#pearvideo', {//第一个参数为video标签的id或class
type: 'mp4', //播放视频的类型,目前只能是mp4
token: res.token, //与信令服务器连接的token,必须
});
</script>
恭喜您,您的播放器已经具备P2P能力了,而且无须任何插件!
谁在用我们的产品?
Pear Player 文档
致谢
特别感谢以下项目,为我们提供了技术参考以及灵感来源。
License
MIT. Copyright (c) Pear Limited and Xie Ting.