Watch Star Fork

cdnbye / hlsjs-p2p-engineJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
一个完全免费的视频加速插件,通过WebRTC datachannel技术,在不影响用户体验的前提下,最大化p2p率,从而为CP节省流量成本。QQ群:746163014
snowinszu 最后提交于 update API docs
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
Readme_zh.md 7.54 KB

cdnbye logo

Save Your Bandwidth using WebRTC.

视频网站省流量神器.

npm jsdelivr License

English

随着H5的普及,flash逐渐被淘汰已成为不可逆转的趋势。而在H5采用的视频传输格式中,hls由于兼容ios和android、可以穿过任何允许HTTP数据通过的防火墙、容易使用内容分发网络来传输媒体流和码率自适应等众多优势而在业界得到广泛使用。通过使用hls.js这个第三方库,几乎所有现代浏览器都可以播放hls视频。hls天生分片传输的优势,使其可以采用p2p的方式进行传输,从而减小服务器的负担。在web端,无插件化实现p2p传输能力的最好选择就是WebRTC技术,与hls.js类似,WebRTC也支持几乎所有现代浏览器。本项目的目标是开发一个hls.js的插件,通过WebRTC datachannel技术,在不影响用户体验的前提下,最大化p2p率,从而为CP节省流量成本。

该插件的优势如下:

  • 采用仿BT算法,简化BT的流程,并且针对流媒体的特点对算法进行调整
  • 不改动hls.js源码,并且可以与其无缝衔接,几行代码集成,便于在现有项目中快速集成
  • 高可配置化,用户可以根据特定的使用环境调整各个参数
  • 支持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>

就是这么简单!

浏览器支持情况

由于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>

通过NPM安装依赖

cd yourProject && npm install cdnbye --save

在项目中通过import/require引入依赖包:

import Hls from 'cdnbye';   // 打包了hls.js的依赖

或者

import Hls from 'hls.js';     // 需要先执行"npm install --save hls.js"
import P2PEngine from 'cdnbye/dist/hlsjs-p2p-engine';   // 没有打包hls.js的JS库

使用方法

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
    liveSyncDuration: 30    // 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'(本插件默认信令地址,负载较大,不推荐)
    • 'wss://free.freesignal.net'(由freesignal.net提供的免费版本,推荐)

用户案例

如果您也在使用这个开源项目,欢迎通过pull request提交您网站的logo和网址

设计&原理

参见 设计.md

FAQ

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

播放器集成

项目点评 ( 6 )

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

搜索帮助