├── .gitignore
├── README.md
├── Readme_zh.md
├── demo
    ├── dplayer.html
    ├── flowplayer.html
    ├── plyr.html
    ├── quick-start.html
    └── videojs.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea
3 | /node_modules
4 | /dist
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **English | [简体中文](Readme_zh.md)**
 2 | 
 3 | <h1 align="center"><a href="" target="_blank" rel="noopener noreferrer"><img width="250" src="https://www.swarmcloud.net/img/logo.png" alt="cdnbye logo"></a></h1>
 4 | <h4 align="center">Let your viewers become your unlimitedly scalable CDN.</h4>
 5 | <p align="center">
 6 |   <a href="https://www.npmjs.com/package/@swarmcloud/dashjs"><img src="https://img.shields.io/npm/v/@swarmcloud/dashjs.svg?style=flat" alt="npm"></a>
 7 |   <a href="https://www.jsdelivr.com/package/npm/@swarmcloud/dashjs"><img src="https://data.jsdelivr.com/v1/package/npm/@swarmcloud/dashjs/badge" alt="jsdelivr"></a>
 8 | </p>
 9 | 
10 | 
11 | CDNBye dashjs-p2p-engine implements [WebRTC](https://en.wikipedia.org/wiki/WebRTC) datachannel to scale live/vod video streaming by peer-to-peer network using bittorrent-like protocol. The forming peer network can be layed over other CDNs or on top of the origin server. Powered by [dash.js](https://github.com/Dash-Industry-Forum/dash.js), it can play MPEG-dash on PC and mobile.
12 | 
13 | ## Features
14 | - WebRTC data channels for lightweight peer-to-peer communication with no plugins
15 | - Support live and VOD streams over MPEG-dash protocol
16 | - Very easy to integrate with an existing dash.js project
17 | - Seamlessly fallback to normal server usage if a browser doesn't support WebRTC
18 | - Compatible with all CDNs, agnostic to DRM and video codecs. No service side changes required.
19 | - Efficient scheduling policies to enhance the performance of P2P streaming
20 | - Use IP database to group up peers by ISP and regions
21 | 
22 | ## Getting Started
23 | Put the [quick-start.html](demo/quick-start.html) in your web page, run it. Wait for a few seconds，then open the same page from another browser. Now you have a direct P2P connection between two browsers without plugin!
24 | The first web peer will serve as a seed, if no one else in the same channel.
25 | 
26 | ## Browser Support
27 | WebRTC has already been incorporated into the HTML5 standard and it is broadly deployed in modern browsers. The compatibility of CDNBye depends on the browser support of WebRTC and dash.js. Please note that iOS Safari "Mobile" does not support the MediaSource API.
28 | 
29 | Compatibility|Chrome | Firefox | macOS Safari| Android Wechat/QQ | Opera | Edge | IE | iOS Safari |
30 | :-: | :-: | :-: | :-: | :-: | :-: | :-:| :-:| :-:
31 | WebRTC Datachannel | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ |
32 | dash.js | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
33 | CDNBye | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ |
34 | 
35 | ## Include
36 | Include the pre-built script of latest version:
37 | ```html
38 | <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
39 | ```
40 | 
41 | ## API and Configuration
42 | See [API.md](https://docs.swarmcloud.net/dashjs/API)
43 | 
44 | ## Console
45 | Register your domain in [dashboard](https://dash.swarmcloud.net), where you can view p2p-related information.
46 | 
47 | ## Related Projects
48 | - [shaka-p2p-engine](https://github.com/cdnbye/shaka-p2p-engine) - P2P engine for Shaka Player.
49 | - [hlsjs-p2p-engine](https://github.com/cdnbye/hlsjs-p2p-engine) - Web Video Delivery Technology with No Plugins for hls.js.
50 | - [mp4-p2p-engine](https://github.com/cdnbye/mp4-p2p-engine) - Web Video Delivery Technology with No Plugins for MP4.
51 | 
52 | ## FAQ
53 | We have collected some [frequently asked questions](https://docs.swarmcloud.net/faq). Before reporting an issue, please search if the FAQ has the answer to your problem.
54 | 
55 | ## Contact Us
56 | Email: service@cdnbye.com
57 | <br>
58 | Telegram: @cdnbye
59 | <br>
60 | Skype: live:86755838
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/Readme_zh.md:
--------------------------------------------------------------------------------
 1 | **[English](README.md) | 简体中文**
 2 | 
 3 | <h1 align="center"><a href="" target="_blank" rel="noopener noreferrer"><img width="250" src="https://www.swarmcloud.net/img/logo.png" alt="cdnbye logo"></a></h1>
 4 | <h4 align="center">Save Your Bandwidth using WebRTC.</h4>
 5 | <h4 align="center">视频网站省流量&加速插件.</h4>
 6 | <p align="center">
 7 |     <a href="https://www.npmjs.com/package/@swarmcloud/dashjs"><img src="https://img.shields.io/npm/v/@swarmcloud/dashjs.svg?style=flat" alt="npm"></a>
 8 |     <a href="https://www.jsdelivr.com/package/npm/@swarmcloud/dashjs"><img src="https://data.jsdelivr.com/v1/package/npm/@swarmcloud/dashjs/badge" alt="jsdelivr"></a>
 9 | </p>
10 | 
11 | P2P技术使观看相同内容的用户之间可以相互分享数据，不仅能效降低视频/直播网站的带宽成本，还可以提升用户的播放体验，降低卡顿、二次缓存的发生率。
12 | 另外，随着H5的普及，flash逐渐被淘汰已成为不可逆转的趋势。而在H5采用的视频传输格式中，dash由于兼容ios和android、可以穿过任何允许HTTP数据通过的防火墙、容易使用内容分发网络来传输媒体流和码率自适应等众多优势而在业界得到广泛使用。通过使用[dash.js](https://github.com/Dash-Industry-Forum/dash.js)这个第三方库，几乎所有现代浏览器都可以播放dash视频。dash天生分片传输的优势，使其可以采用p2p的方式进行传输，从而减小服务器的负担。在web端，无插件化实现p2p传输能力的最好选择就是[WebRTC](https://zh.wikipedia.org/wiki/WebRTC)技术，与dash.js类似，WebRTC也支持几乎所有现代浏览器。本项目是一个dash.js的插件，通过WebRTC datachannel技术，在不影响用户体验的前提下，最大化p2p率，是面向未来的Web P2P技术。
13 | 
14 | 该插件的优势如下：
15 | - 浏览器原生支持，不需要安装任何插件，采用仿BT算法，在线人数越多效果越好
16 | - 支持基于MPEG-dash流媒体协议的直播和点播场景
17 | - 不改动dash.js源码，并且可以与其无缝衔接，几行代码集成，便于在现有项目中快速集成
18 | - 浏览器不支持WebRTC时无缝切换到HTTP下载模式
19 | - 高可配置化，用户可以根据特定的使用环境调整各个参数
20 | - 通过有效的调度策略来保证用户的播放体验以及p2p率
21 | - Tracker服务器根据访问IP的ISP、地域等进行智能调度
22 | 
23 | ## 快速入门
24 | 将[quick-start.html](demo/quick-start.html)拷贝到您的网页中并运行。再打开另一个相同的网页。见证奇迹的时候到了！您已在两个网页之间建立了一个P2P连接，在不安装任何插件的情况下。如果在这个频道中（一个mpd标识了一个频道）没有其它参与者，那么您打开的第一个网页将作为种子为第二个网页提供数据。
25 | 
26 | ## 浏览器支持情况
27 | 由于WebRTC已成为HTML5标准，目前大部分主流浏览器都已经支持。CDNBye的浏览器兼容性取决于WebRTC和dash.js。需要注意的是iOS版Safari由于不支持MediaSource API，因此也不支持dash.js。
28 | 
29 |  兼容性|Chrome | Firefox | macOS Safari| 安卓微信/QQ | Opera | Edge | IE | iOS Safari |
30 | :-: | :-: | :-: | :-: | :-: | :-: | :-:| :-:| :-:
31 | WebRTC Datachannel | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ |
32 | dash.js | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
33 | CDNBye | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ | ✔ |
34 | 
35 | ## 集成
36 | 通过script标签引入最新版本：
37 | ```html
38 | <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
39 | ```
40 | 
41 | ## API文档
42 | 参见 [API.md](https://www.cdnbye.com/cn/dashjs/API.html)
43 | 
44 | ## 后台管理系统
45 | 在接入P2P插件后，访问[dashboard](https://dash.swarmcloud.net)，注册并绑定域名，即可查看该域名的P2P流量、在线人数、用户地理分布等信息。
46 | 
47 | ## 相关项目
48 | - [shaka-p2p-engine](https://github.com/cdnbye/shaka-p2p-engine) - 同时支持HLS和Mpeg-Dash格式。
49 | - [hlsjs-p2p-engine](https://gitee.com/cdnbye/hlsjs-p2p-engine) - HLS协议的Web端P2P流媒体方案。
50 | - [mp4-p2p-engine](https://github.com/cdnbye/mp4-p2p-engine) - 支持MP4的Web端P2P流媒体方案。
51 | 
52 | ## FAQ
53 | 我们收集了一些[常见问题](https://www.cdnbye.com/faq.html)。在报告issue之前请先查看一下。
54 | 
55 | ## 联系我们
56 | 邮箱：service@cdnbye.com
57 | 
58 | 


--------------------------------------------------------------------------------
/demo/dplayer.html:
--------------------------------------------------------------------------------
 1 | <meta charset="UTF-8">
 2 | <style type="text/css">
 3 |     body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
 4 |     *{margin:0;border:0;padding:0;text-decoration:none}
 5 |     #stats{position:fixed;top:5px;left:10px;font-size:12px;color:#fdfdfd;z-index:2147483647;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
 6 |     #dplayer{position:inherit}
 7 | </style>
 8 | <div id="dplayer"></div>
 9 | <div id="stats"></div>
10 | <script src="https://cdn.dashjs.org/v4.7.3/dash.all.min.js"></script>
11 | <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
12 | <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0"></script>
13 | <script>
14 |     var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
15 |     var type = 'normal';
16 |     if(P2PEngineDash.isSupported()) {
17 |         type = 'customDash';
18 |     }
19 |     const dp = new DPlayer({
20 |         container: document.getElementById('dplayer'),
21 |         autoplay: true,
22 |         video: {
23 |             url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
24 |             type: type,
25 |             hotkey: true,        // 移动端全屏时向右划动快进，向左划动快退。
26 |             customType: {
27 |                 'customDash': function (video) {
28 |                     var player = dashjs.MediaPlayer().create();
29 |                     var p2pConfig = {
30 |                         // logLevel: 'debug',
31 |                         // trackerZone: 'hk',        // if using Hongkong tracker
32 |                         // trackerZone: 'us',        // if using USA tracker
33 |                         // token: YOUR_TOKEN
34 |                     }
35 |                     var engine = new P2PEngineDash(player, p2pConfig);
36 |                     player.initialize(video, video.src, true);
37 |                     engine.on('stats', function (stats) {
38 |                         _totalP2PDownloaded = stats.totalP2PDownloaded;
39 |                         _totalP2PUploaded = stats.totalP2PUploaded;
40 |                         updateStats();
41 |                     }).on('peerId', function (peerId) {
42 |                         _peerId = peerId;
43 |                     }).on('peers', function (peers) {
44 |                         _peerNum = peers.length;
45 |                         updateStats();
46 |                     });
47 |                 }
48 |             }
49 |         }
50 |     });
51 |     function updateStats() {
52 |         var text = 'CDNBye P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
53 |             + 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
54 |         document.getElementById('stats').innerText = text
55 |     }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/demo/flowplayer.html:
--------------------------------------------------------------------------------
 1 | <!-- head section -->
 2 | <!-- skin -->
 3 | <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
 4 | <!-- CDNBye plugin -->
 5 | <script src="//cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
 6 | <!-- flowplayer -->
 7 | <script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
 8 | <script src="//cdn.flowplayer.com/releases/native/stable/plugins/dash.min.js"></script>
 9 | <!-- body section -->
10 | <div id="player"></div>
11 | <p id="version"></p>
12 | <h3>download info:</h3>
13 | <p id="info"></p>
14 | <script>
15 |     document.querySelector('#version').innerText = `cdnbye version: ${P2PEngineDash.version}`;
16 | 
17 |     var player = flowplayer('#player', {
18 |             src: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
19 |         }
20 |     )
21 | 
22 |     var engine = new P2PEngineDash(player.dash, {
23 |         // logLevel: "debug",
24 |         // trackerZone: 'hk',        // if using Hongkong tracker
25 |         // trackerZone: 'us',        // if using USA tracker
26 |         // token: YOUR_TOKEN
27 |     });
28 |     engine.on('stats', function (stats) {
29 |         var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
30 |         document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%, saved traffic: ${stats.totalP2PDownloaded}KB, uploaded: ${stats.totalP2PUploaded}KB`;
31 |     })
32 | </script>
33 | 


--------------------------------------------------------------------------------
/demo/plyr.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <video controls crossorigin playsinline></video>
 3 | </div>
 4 | <h3>download info:</h3>
 5 | <p id="info"></p>
 6 | <link rel="stylesheet" href="//cdn.plyr.io/3.7.8/plyr.css">
 7 | <script src="//cdn.plyr.io/3.7.8/plyr.js"></script>
 8 | <script src="https://cdn.dashjs.org/v4.7.3/dash.all.min.js"></script>
 9 | <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
10 | <style>
11 |     .container {
12 |         margin: 50px auto;
13 |         max-width: 1500px;
14 |     }
15 | </style>
16 | <script>
17 |     document.addEventListener('DOMContentLoaded', () => {
18 |         const source = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';
19 |         // For more dash options, see https://github.com/Dash-Industry-Forum/dash.js
20 |         const dash = dashjs.MediaPlayer().create();
21 | 
22 |         if (P2PEngineDash.isSupported()) {
23 |             var p2pConfig = {
24 |                 // logLevel: 'debug',
25 |                 // trackerZone: 'hk',        // if using Hongkong tracker
26 |                 // trackerZone: 'us',        // if using USA tracker
27 |                 // token: YOUR_TOKEN
28 |                 // Other p2pConfig options if applicable
29 |             };
30 |             var engine = new P2PEngineDash(dash, p2pConfig);
31 |             engine.on('stats', function (stats) {
32 |                 var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
33 |                 document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%, saved traffic: ${stats.totalP2PDownloaded}KB, uploaded: ${stats.totalP2PUploaded}KB`;
34 |             })
35 |         }
36 | 
37 |         const video = document.querySelector('video');
38 |         dash.initialize(video, source, true);
39 | 
40 |         // Update caption tracks after initializing Plyr to get the generated captions
41 |         // For more options see: https://github.com/sampotts/plyr/#options
42 |         const player = new Plyr(video, {captions: {active: true, update: true}});
43 | 
44 |         // Expose player and dash so they can be used from the console
45 |         window.player = player;
46 |         window.dash = dash;
47 |     });
48 | </script>
49 | 


--------------------------------------------------------------------------------
/demo/quick-start.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <video id="videoPlayer" controls></video>
 3 | <p id="version"></p>
 4 | <h3>download info:</h3>
 5 | <p id="peers"></p>
 6 | <p id="info"></p>
 7 | <script src="https://cdn.dashjs.org/v4.7.3/dash.all.min.js"></script>
 8 | <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
 9 | <script>
10 |     var url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
11 |     var player = dashjs.MediaPlayer().create()
12 |     document.querySelector('#version').innerText = `dash.js version: ${player.getVersion()} p2p version: ${P2PEngineDash.version}`;
13 |     var p2pConfig = {
14 |         logLevel: 'debug',
15 |         // trackerZone: 'hk',        // if using Hongkong tracker
16 |         // trackerZone: 'us',        // if using USA tracker
17 |         // token: YOUR_TOKEN
18 |     }
19 |     var engine = new P2PEngineDash(player, p2pConfig);
20 |     player.initialize(document.querySelector("#videoPlayer"), url, true);
21 |     engine.on('stats', function (stats) {
22 |         var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
23 |         document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded / total * 100)}%   saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
24 |     })
25 |     engine.on('peers', function (peers) {
26 |         document.querySelector('#peers').innerText = `peers: ${peers.length}`;
27 |     })
28 | </script>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/demo/videojs.html:
--------------------------------------------------------------------------------
 1 | <link href="//vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
 2 | <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
 3 | <script src="//vjs.zencdn.net/5.19.2/video.js"></script>
 4 | <!-- Dash.js -->
 5 | <script src="//cdn.dashjs.org/v4.7.3/dash.all.min.js"></script>
 6 | <!-- cdnbye dash.js plugin script -->
 7 | <script src="//cdn.jsdelivr.net/npm/@swarmcloud/dashjs"></script>
 8 | <script src="//cdn.jsdelivr.net/npm/videojs-contrib-dash@5.1.1/dist/videojs-dash.min.js"></script>
 9 | <!--<script src="../dist/dashjs-p2p-engine.min.js"></script>-->
10 | 
11 | <script>
12 |     var player = videojs('example-video', {
13 |         html5: {
14 |             dash: {
15 |                 // dash.js options
16 |             }
17 |         }
18 |     });
19 |     player.ready(function() {
20 |         player.src({
21 |             src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
22 |             type: 'application/dash+xml'
23 |         });
24 |         player.play();
25 |     });
26 |     var myCustomCallback = function(player, mediaPlayer) {
27 |         var p2pConfig = {
28 |             // logLevel: 'debug',
29 |             // trackerZone: 'hk',        // if using Hongkong tracker
30 |             // trackerZone: 'us',        // if using USA tracker
31 |             // token: YOUR_TOKEN
32 |         };
33 |         var engine = new P2PEngineDash(mediaPlayer, p2pConfig);
34 |     };
35 |     videojs.Html5DashJS.hook('beforeinitialize', myCustomCallback);
36 | </script>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cdnbye-dash",
 3 |   "version": "0.7.5",
 4 |   "description": "Let your viewers become your unlimitedly scalable CDN.",
 5 |   "main": "./dist/dashjs-p2p-engine.min.js",
 6 |   "types": "./dist/dashjs-p2p-engine.min.d.ts",
 7 |   "files": [
 8 |     "dist"
 9 |   ],
10 |   "scripts": {
11 |     "git-push": "git add demo && git add package.json && git add README.md && git add Readme_zh.md && git commit -m 'release v0.7.5' && git push origin master",
12 |     "git-pull": "git pull origin master",
13 |     "publish": "npm publish",
14 |     "test": "echo \"Error: no test specified\" && exit 1"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/cdnbye/dashjs-p2p-engine"
19 |   },
20 |   "author": "cdnbye",
21 |   "license": "ISC",
22 |   "keywords": [
23 |     "html5",
24 |     "WebRTC",
25 |     "video",
26 |     "mse",
27 |     "player",
28 |     "p2p",
29 |     "peer-to-peer",
30 |     "dash",
31 |     "dashjs",
32 |     "cdnbye",
33 |     "bittorrent",
34 |     "webrtc data channel",
35 |     "MPEG-dash"
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------