23 |
24 |
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RAID CDN Video Site Demo ---- Lower The Cost of Your Video Delievery
2 |
3 | by [@RAID CDN Developper](http://demo-cloud.apps.58dahuo.com),
4 |
5 |
6 |
7 |
8 |
For more information about how to implement RAID CDN on your video site, please email our customer service: xfang@actiontec.com
9 |
10 |
11 |
12 | ## 0. Index
13 |
14 | 1. [Description](#1-description)
15 | 2. [Demos](#2-demos)
16 | 3. [Implementation](#3-implementation)
17 | 4. [License](#4-license)
18 |
19 | ## 1. Description
20 |
21 | RAID CDN uses web browser based P2P technology to break free from traditional CDN infrastructures.
22 | It is a hybrid solution of WebRTC, P2P, CDN, and hls for saving cost of video service provider.
23 | Drop one line of JavaScript on your video page, you are able lower the cost of your video delievery.
24 | No matter what kind of video, origin or CDN(s) you use - RAIDCDN can provide answers.
25 |
26 | To provide an easy and straightforward way for how does RAIDCDN save bandwidth, we create this sample project to illustrate that.
27 |
28 | RAIDCDN also offers a commercial CDN service, specifically designed for video delivery. For more information about how to implement RAID CDN on your site, please get in touch with us.
29 |
30 | ## 2. Demos
31 | The first open browser fetches data from its original source.
32 |
33 | 
34 |
35 | The second open browser fetches part of data from the first open tab.
36 |
37 | 
38 |
39 | The third open browser fetches part of data from both first and secound open tabs.
40 |
41 | 
42 |
43 | The fourth open browser.
44 |
45 | 
46 |
47 | ## 3. Implementation
48 | We provide a VirtualBox Image for this demo in case you do not want to follow all the steps. You can:
49 |
50 | a) Install VirtualBox from [**VirtualBox Installation] (https://www.virtualbox.org/wiki/Downloads)
51 |
52 | b) Download image from [**Demo Image**] (http://pan.baidu.com/s/1b0IlP0). Import and launch it using your VirtualBox
53 |
54 | c) The login username/password is demo/demo. Defaulty you can log in without them
55 |
56 | d) After it launches,
57 |
58 | ```
59 | $ cd /home/demo/workspace/webRTC-CDN-raidcdn-sample folder
60 | $ http-server
61 | ```
62 |
63 | e) Now the sample video streaming server is running with RAIDCDN gearing up. Visit its host 8080 port (http://localhost:8080) to see the magic of RAIDCDN
64 |
65 | ## Alternatively, you can go through the whole process in your own environment
66 |
67 | 1\. [**Sign up**] (http://accountsmgr.raidcdn.com/) to RAID CDN.
68 |
69 | Get instant access to your RAID CDN token. You will use it in 4.
70 |
71 | 2\. Install Node.js [**From Node.js**] (https://nodejs.org/)
72 |
73 | For Ubuntu/Debian user:
74 |
75 |
76 | ```
77 | $ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
78 | $ sudo apt-get install -y nodejs
79 | ```
80 |
81 | 3\. Install http-server
82 |
83 | ```
84 | $ sudo npm install -g http-server
85 | ```
86 | 4\. Clone this sample code, unzip it to any place, and modify the token by editting index.html:
87 |
88 | ```
89 |
90 | ```
91 | replace 'TOKEN VALUE' with the token you registered on 1.
92 |
93 | 5\. Enter the unzipped sample folder, and run your local video server:
94 |
95 | ```
96 | $ cd webRTC-CDN-raidcdn-sample
97 | $ http-server
98 | ```
99 |
100 | Done! Now the set up work is finished.
101 |
102 | 6\. To experience it, please open your local browser and visit:
103 |
104 | ```
105 | http://localhost:8080
106 | ```
107 |
108 | You can play the video on your local video serer.
109 |
110 | Then if you open a new tab on your browser, you will see the current video you are watching fetches video chunk from the previous open one. And if you open more tabs, you will find there are multiple nodes (current opened browser) which provide video chunks to the one your are viewing.
111 |
112 | 7\. To view how much data RAID CDN helps you saved, please log in to http://accountsmgr.raidcdn.com/, click "Total" on left column and you will see:
113 |
114 | 
115 |
116 | which will illustrate your saving.
117 |
118 | ## 4. License
119 |
120 | **_This sample is completely free for both non-commercial and commercial use._**
121 |
--------------------------------------------------------------------------------
/js/bootstrap-progressbar.js:
--------------------------------------------------------------------------------
1 | !function ($) {
2 |
3 | var ProgressBar = function (element, options) {
4 | this.element = $(element);
5 | this.position = 0;
6 | this.percent = 0;
7 |
8 | var hasOptions = typeof options == 'object';
9 |
10 | this.dangerMarker = $.fn.progressbar.defaults.dangerMarker;
11 | if (hasOptions && typeof options.dangerMarker == 'number') {
12 | this.setDangerMarker(options.dangerMarker);
13 | }
14 |
15 | this.warningMarker = $.fn.progressbar.defaults.warningMarker;
16 | if (hasOptions && typeof options.warningMarker == 'number') {
17 | this.setWarningMarker(options.warningMarker);
18 | }
19 |
20 | this.maximum = $.fn.progressbar.defaults.maximum;
21 | if (hasOptions && typeof options.maximum == 'number') {
22 | this.setMaximum(options.maximum);
23 | }
24 |
25 | this.step = $.fn.progressbar.defaults.step;
26 | if (hasOptions && typeof options.step == 'number') {
27 | this.setStep(options.step);
28 | }
29 |
30 | this.element.html($(DRPGlobal.template));
31 | };
32 |
33 | ProgressBar.prototype = {
34 | constructor: ProgressBar,
35 |
36 | stepIt: function () {
37 | if (this.position < this.maximum)
38 | this.position += this.step;
39 |
40 | this.setPosition(this.position);
41 | },
42 |
43 | setWarningMarker: function (marker) {
44 | marker = parseInt(marker);
45 | if (marker > this.dangerMarker) {
46 | this.warningMarker = this.dangerMarker;
47 | return;
48 | }
49 |
50 | this.warningMarker = marker;
51 | },
52 |
53 | setDangerMarker: function (marker) {
54 | this.dangerMarker = parseInt(marker);
55 | },
56 |
57 | setMaximum: function (maximum) {
58 | this.maximum = parseInt(maximum);
59 | },
60 |
61 | setStep: function (step) {
62 | step = parseInt(step);
63 | if (step <= 0)
64 | step = 1;
65 |
66 | this.step = parseInt(step);
67 | },
68 |
69 | setPosition: function (position) {
70 | position = parseInt(position);
71 | if (position < 0)
72 | position = 0;
73 | if (position > this.maximum)
74 | position = this.maximum;
75 |
76 | this.position = position;
77 | this.percent = Math.ceil((this.position / this.maximum) * 100);
78 |
79 | try {
80 | if (this.percent <= this.warningMarker) {
81 | this.element.find('.bar-success').css('width', this.percent + "%");
82 | this.element.find('.bar-warning').css('width', "0%");
83 | this.element.find('.bar-danger').css('width', "0%");
84 | return;
85 | }
86 |
87 | this.element.find('.bar-success').css('width', this.warningMarker + "%");
88 | if (this.percent > this.warningMarker && this.percent <= this.dangerMarker) {
89 | this.element.find('.bar-warning').css('width', (this.percent - this.warningMarker) + "%");
90 | this.element.find('.bar-danger').css('width', "0%");
91 | return;
92 | }
93 |
94 | this.element.find('.bar-warning').css('width', (this.dangerMarker - this.warningMarker) + "%");
95 | this.element.find('.bar-danger').css('width', (this.percent - this.dangerMarker) + "%");
96 |
97 | } finally {
98 | this._triggerPositionChanged();
99 | }
100 | },
101 |
102 | reset: function () {
103 | this.position = 0;
104 | this.percent = 0;
105 | this._triggerPositionChanged();
106 | this.element.find('.bar-success').css('width', "0%");
107 | this.element.find('.bar-warning').css('width', "0%");
108 | this.element.find('.bar-danger').css('width', "0%");
109 | },
110 |
111 | _triggerPositionChanged: function () {
112 | this.element.trigger({
113 | type: "positionChanged",
114 | position: this.position,
115 | percent: this.percent
116 | });
117 | }
118 | };
119 |
120 | $.fn.progressbar = function (option) {
121 | var args = Array.apply(null, arguments);
122 | args.shift();
123 | return this.each(function () {
124 | var $this = $(this),
125 | data = $this.data('progressbar'),
126 | options = typeof option == 'object' && option;
127 |
128 | if (!data) {
129 | $this.data('progressbar', new ProgressBar(this, $.extend({}, $.fn.progressbar().defaults, options)));
130 | }
131 | if (typeof option == 'string' && typeof data[option] == 'function') {
132 | data[option].apply(data, args);
133 | }
134 | });
135 | };
136 |
137 | $.fn.progressbar.defaults = {
138 | warningMarker: 50,
139 | dangerMarker: 90,
140 | maximum: 100,
141 | step: 1
142 | };
143 |
144 | $.fn.progressbar.Constructor = ProgressBar;
145 |
146 | var DRPGlobal = {};
147 |
148 | DRPGlobal.template = '
