本周日【珠海源创会】一起聊聊:PingCAP分布式事务、支付宝移动端实践、GSBN技术框架选型,点此报名占座

cdnbye / hlsjs-p2p-engineJavaScriptMIT

1 Watch 36 Star 126 Fork 25
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
一个完全免费的视频加速插件,通过WebRTC datachannel技术,在不影响用户体验的前提下,最大化p2p率,从而为CP节省流量成本。QQ群:746163014 展开 收起

http://docs.cdnbye.com

Loading...
Readme_zh.md

English | 简体中文

cdnbye logo

Save Your Bandwidth using WebRTC.

视频网站省流量&加速神器.

npm jsdelivr License

P2P技术使观看相同内容的用户之间可以相互分享数据,不仅能效降低视频/直播网站的带宽成本,还可以提升用户的播放体验,降低卡顿、二次缓存的发生率。 另外,随着H5的普及,flash逐渐被淘汰已成为不可逆转的趋势。而在H5采用的视频传输格式中,hls由于兼容ios和android、可以穿过任何允许HTTP数据通过的防火墙、容易使用内容分发网络来传输媒体流和码率自适应等众多优势而在业界得到广泛使用。通过使用hls.js这个第三方库,几乎所有现代浏览器都可以播放hls视频。hls天生分片传输的优势,使其可以采用p2p的方式进行传输,从而减小服务器的负担。在web端,无插件化实现p2p传输能力的最好选择就是WebRTC技术,与hls.js类似,WebRTC也支持几乎所有现代浏览器。本项目是一个hls.js的插件,通过WebRTC datachannel技术,在不影响用户体验的前提下,最大化p2p率,是面向未来的Web P2P技术。如果使用的是dash协议,请移步这里

该插件的优势如下:

  • 采用仿BT算法,P2P能力基于WebRTC Datachannel技术,浏览器原生支持,无需安装任何插件
  • 不改动hls.js源码,并且可以与其无缝衔接,几行代码集成,便于在现有项目中快速集成
  • 浏览器不支持WebRTC时无缝切换到HTTP下载模式
  • 高可配置化,用户可以根据特定的使用环境调整各个参数
  • 支持video.js、Clappr、Flowplayer等第三方播放器
  • 通过有效的调度策略来保证用户的播放体验以及p2p率
  • Tracker服务器根据访问IP的ISP、地域等进行智能调度

演示Demo

打开2个相同的网页:demo

快速入门

快速入门Demo

quick-start.html拷贝到您的网页中并运行。再打开另一个相同的网页。见证奇迹的时候到了!您已在两个网页之间建立了一个P2P连接,在不安装任何插件的情况下。如果在这个频道中(一个m3u8标识了一个频道)没有其它参与者,那么您打开的第一个网页将作为种子为第二个网页提供数据。

在现有的hls.js项目中集成

只需要将原有的引入hls.js的script标签如:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

替换为

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

就是这么简单!

集成到第三方HTML5播放器

参考demos, 推荐已经打包P2P插件的P2P-DPlayerP2P-CKPlayer

浏览器支持情况

由于WebRTC已成为HTML5标准,目前大部分主流浏览器都已经支持。CDNBye的浏览器兼容性取决于WebRTC和hls.js。需要注意的是iOS版Safari由于不支持MediaSource API,因此也不支持hls.js(不过Safari原生支持HLS播放)。

兼容性 Chrome Firefox Mac Safari iOS Safari Opera IE Edge
WebRTC Yes Yes Yes Yes Yes No No
Hls.js Yes Yes Yes No Yes Yes Yes
CDNBye Yes Yes Yes No Yes No No

集成

通过script标签引入已经和hls.js打包的最新版本(推荐):

<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>

或者引入没有与hls.js打包的独立版本:

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

使用方法

Bundle

在hlsjsConfig对象字面量中加入p2pConfig字段,然后在实例化hls.js时把hlsjsConfig作为参数传入。

var hlsjsConfig = {
    debug: true,
    // Other hlsjsConfig options provided by hls.js
    p2pConfig: {
        logLevel: 'debug',
        // Other p2pConfig options if applicable
    }
};
// Hls constructor is overriden by included bundle
var hls = new Hls(hlsjsConfig);
// Use `hls` just like the usual hls.js ...

Engine(没有打包hls.js的插件,需要自己引入hls.js)

实例化hls.js并将hlsjsConfig作为参数传入。然后实例化P2PEngine并将p2pConfig作为参数传入。调用hls.js的loadSource和attachMedia方法。

var hlsjsConfig = {
    maxBufferSize: 0,       // Highly recommended setting
    maxBufferLength: 30,    // Highly recommended setting
    liveSyncDurationCount: 10,    // Highly recommended setting
};

var p2pConfig = {
    logLevel: 'debug',
    // Other p2pConfig options if applicable
};

var hls = new Hls(hlsjsConfig);
if (P2PEngine.isSupported()) {
    new P2PEngine(hls, p2pConfig);        // Key step
}

// Use `hls` just like your usual hls.js…
hls.loadSource(contentUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
    video.play();
});

播放器集成

API文档

参见 API.md

信令服务器

信令服务器用于在WebRTC建立P2P连接过程中交换信令。

  • 自行部署(推荐)
  • 第三方免费信令服务
    • 'wss://signal.cdnbye.com/wss'(本插件默认信令地址)

设计&原理

参见 设计.md

FAQ

我们收集了一些常见问题。在报告issue之前请先查看一下。

联系我们

邮箱:service@cdnbye.com

项目点评 ( 6 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close