npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

firstaid

v1.0.0

Published

<h1 align="center">  <img src="fig/pear.png" height="220"></img> <br> PearPlayer.js <br> <br> </h1>

Downloads

18

Readme

PearPlayer(梨享播放器) 是完全用JavaScript写的开源HTML5流媒体播放框架,实现了融合HTTP(包含HTTPS、HTTP2)、WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web端流媒体加速能力。基于H5的MSE技术(Media Source Extension)将来自多个源节点的Buffer分块喂给播放器,再加上精心设计的算法来达到最优的调度策略和处理各种异常情况,Pear Player能在保证用户流畅视频体验的前提下最大化P2P率。

multisources

只需将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.