同步操作将从 cdnbye/hlsjs-p2p-engine 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
随着H5的普及,flash逐渐被淘汰已成为不可逆转的趋势。而在H5采用的视频传输格式中,hls由于兼容ios和android、可以穿过任何允许HTTP数据通过的防火墙、容易使用内容分发网络来传输媒体流和码率自适应等众多优势而在业界得到广泛使用。通过使用hls.js这个第三方库,几乎所有现代浏览器都可以播放hls视频。hls天生分片传输的优势,使其可以采用p2p的方式进行传输,从而减小服务器的负担。在web端,无插件化实现p2p传输能力的最好选择就是WebRTC技术,与hls.js类似,WebRTC也支持几乎所有现代浏览器。本项目的目标是开发一个hls.js的插件,通过WebRTC datachannel技术,在不影响用户体验的前提下,最大化p2p率,从而为CP节省流量成本。
该插件的优势如下:
打开2个相同的网页:demo
将quick-start.html拷贝到您的网页中并运行。再打开另一个相同的网页。见证奇迹的时候到了!您已在两个网页之间建立了一个P2P连接,在不安装任何插件的情况下。如果在这个频道中(一个m3u8标识了一个频道)没有其它参与者,那么您打开的第一个网页将作为种子为第二个网页提供数据。
只需要将原有的引入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 |
引入已经和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>
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库
在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 ...
实例化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);
var p2pEngine = 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.md
信令服务器用于在WebRTC建立P2P连接过程中交换信令,推荐自行部署信令服务器
如果您也在使用这个开源项目,欢迎通过pull request提交您网站的logo和网址
参见 设计.md
我们收集了一些常见问题。在报告issue之前请先查看一下。
欢迎贡献您的播放器demo
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。