├── LICENSE
├── README.md
├── embed.html
├── embed_demo.html
├── fonts
├── codropsicons
│ ├── codropsicons.eot
│ ├── codropsicons.svg
│ ├── codropsicons.ttf
│ ├── codropsicons.woff
│ └── license.txt
└── font-awesome-4.3.0
│ ├── css
│ ├── font-awesome.css
│ └── font-awesome.min.css
│ └── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ └── fontawesome-webfont.woff2
├── img
├── body-bg.png
├── chat.png
├── highlight-bg.jpg
├── hr.png
├── minivid_html.png
├── octocat-icon.png
├── person_dark.png
├── person_light.png
├── tar-gz-icon.png
└── zip-icon.png
├── index.html
├── js
├── classie.js
├── modalEffects.js
├── modernizr.custom.js
├── rtc-controller.js
└── webrtc.js
├── minivid.html
├── minivid2.html
├── params.json
├── stream.html
└── stylesheets
├── github-dark.css
├── normalize.css
├── print.css
├── style.css
└── stylesheet.css
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Kevin Gleason
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## WebRTC Video Chatting in 20 Lines of JS
2 |
3 | WebRTC, so hot right now. If you don't know it, WebRTC is a free, open project that provides simple APIs for creating Real-Time Communications (RTC) for browsers and mobile devices. Essentially, it makes streaming any content such as video, audio, or arbitrary data simple and fast!
4 |
5 | _NOTE:_
6 |
7 | The following demo uses the PubNub WebRTC JavaScript API for signaling to transfer the metadata and establish the peer-to-peer connection. Once the connection is established, the video and voice runs on public Google STUN/TURN servers.
8 |
9 | Keep in mind, PubNub can provide the signaling for WebRTC, and requires you to combine it with a hosted WebRTC solution. For more detail on what PubNub does, and what PubNub doesn’t do with WebRTC, check out this article: https://support.pubnub.com/support/solutions/articles/14000043715-does-pubnub-provide-webrtc-and-video-chat-
10 |
11 | ## Why PubNub? Signaling.
12 |
13 | WebRTC is not a standalone API, it needs a signaling service to coordinate communication. Metadata needs to be sent between callers before a connection can be established.
14 |
15 | This metadata includes things such as:
16 |
17 | - Session control messages to open and close connections
18 | - Error messages
19 | - Codecs/Codec settings, bandwidth and media types
20 | - Keys to establish a secure connection
21 | - Network data such as host IP and port
22 |
23 | Once signaling has taken place, video/audio/data is streamed directly between clients, using WebRTC's `PeerConnection` API. This peer-to-peer direct connection allows you to stream high-bandwidth robust data, like video.
24 |
25 | PubNub makes this signaling incredibly simple, and then gives you the power to do so much more with your WebRTC applications.
26 |
27 | ### Browser Compatibility
28 |
29 | WebRTC is widely adopted by popular browsers such as Chrome and Firefox, but there are many browsers on which certain features will not work. See a list of [supported browsers here](http://iswebrtcreadyyet.com/).
30 |
31 | ## Part 1: A Simple WebRTC Video Chat
32 |
33 | Time to begin! First I will show you how to make the bare minimum WebRTC video chat. Then, in Part 2 we will make use of a simple wrapper library to create a full featured video chatting application. The live demo of what you will be making in the next 2.5 minutes [can be found here](http://kevingleason.me/SimpleRTC/minivid.html)!
34 |
35 | ### A Note on Testing and Debugging
36 |
37 | If you try to open `file://` in your browser, you will likely run into Cross-Origin Resource Sharing (CORS) errors since the browser will block your requests to use video and microphone features. To test your code you have a few options. You can upload your files to a web server, like [Github Pages](https://pages.github.com/) if you prefer. However, to keep development local, I recommend you setup a simple server using Python.
38 |
39 | To so this, open your terminal and change directories into your current project and depending on your version of Python, run one of the following modules.
40 |
41 | cd
42 |
43 | # Python 2
44 | python -m SimpleHTTPServer
45 |
46 | # Python 3
47 | python -m http.server
48 |
49 | For example, I run Python2.7 and the command I use is `python -m SimpleHTTPServer 8001`. Now I can go to `http://localhost:8001/index.html` to debug my app! Try making an `index.html` with anything in it and serve it on localhost before you continue.
50 |
51 | ### Step 1: The HTML5 Backbone
52 |
53 | For the sake of the demo, let's keep the HTML short and simple. First we need a div to house our videos. Then, all we really need to start off with is a login field so you can specify your name and a call field so you can dial someone.
54 |
55 |
56 |
57 |
61 |
62 |
63 |
67 |
68 | This should leave you with an elaborate, well styled HTML file that looks something like this:
69 |
70 |
71 |
72 | ### Step 2: The JavaScript Imports
73 |
74 | There are three libraries that you will need to include to make WebRTC operations much easier. The first thing you should include is [jQuery](https://jquery.com/) to make modifying DOM elements a breeze. Then, you will need the PubNub JavaScript SDK to facilitate the WebRTC signaling. Finally, include the PubNub WebRTC SDK which makes placing phone calls as simple as calling the `dial(number)` function.
75 |
76 |
77 |
78 |
79 |
80 | Now we are ready to write our calling functions for `login` and `makeCall`!
81 |
82 | ### Step 3: Preparing to Receive Calls
83 |
84 | In order to start facilitating video calls, you will need a publish and subscribe key. To get your pub/sub keys, you’ll first need to [sign up for a PubNub account](http://www.pubnub.com/get-started/). Once you sign up, you can find your unique PubNub keys in the [PubNub Developer Dashboard](https://admin.pubnub.com). The free Sandbox tier should give you all the bandwidth you need to build and test your WebRTC Application.
85 |
86 | First, lets use jQuery to find our video holder, where other callers faces will go.
87 |
88 | var video_out = document.getElementById("vid-box");
89 |
90 | Now, to implement the login function. This function will set up the phone using the username they provided as a UUID.
91 |
92 | ```
93 | function login(form) {
94 | var phone = window.phone = PHONE({
95 | number : form.username.value || "Anonymous", // listen on username line else Anonymous
96 | publish_key : 'your_pub_key',
97 | subscribe_key : 'your_sub_key',
98 | });
99 | phone.ready(function(){ form.username.style.background="#55ff5b"; });
100 | phone.receive(function(session){
101 | session.connected(function(session) { video_out.appendChild(session.video); });
102 | session.ended(function(session) { video_out.innerHTML=''; });
103 | });
104 | return false; // So the form does not submit.
105 | }
106 | ```
107 |
108 | You can see we use the username as the phone's number, and instantiate PubNub using your own publish and subscribe keys. The next function `phone.ready` allows you to define a callback for when the phone is ready to place a call. I simply change the username input's background to green, but you can tailor this to your needs.
109 |
110 | The `phone.receive` function allows you to define a callback that takes a session for when a session (call) event occurs, whether that be a new call, a call hangup, or for losing service, you attach those event handlers to the sessions in `phone.receive`.
111 |
112 | I defined `session.connected` which is called after receiving a call when you are ready to begin talking. I simple appended the session's video element to our video div.
113 |
114 | Then, I define `session.ended` which is called after invoking `phone.handup`. This is where you place end-call logic. I simply clear the video holder's innerHTML.
115 |
116 | ### Step 4: Making Calls
117 |
118 | We now have a phone ready to receive a call, so it is time to create a `makeCall` function.
119 |
120 | ```
121 | function makeCall(form){
122 | if (!window.phone) alert("Login First!");
123 | else phone.dial(form.number.value);
124 | return false;
125 | }
126 | ```
127 |
128 | If `window.phone` is undefined, we cannot place a call. This will happen if the user did not log in first. If it is, we use the `phone.dial` function which takes a number and an optional list of servers to place a call.
129 |
130 |
131 |
132 | And that is it! You now have a simple WebRTC chatting app, fire up your python server and go test your app on localhost!
133 |
134 | ## Production Quality WebRTC with XirSys
135 |
136 | While PubNub handles all the signaling for you WebRTC application, there are many other server side features that you will likely need to handle the quirks of real-world connectivity. In reality, most devices live behind layers of NAT, proxies, and corporate firewalls. [XirSys](http://xirsys.com/) is a WebRTC hosting company that provides production quality STUN and TURN servers to solve these problems. Sign up on their website to receive your free API key so you can start using using their solutions!
137 |
138 | To use a XirSys server in your application, follow their [Quick Start Guide](http://xirsys.com/guide/) to make a domain. You will need to navigate to [this page](https://dashboard.xirsys.com/domains/list) and create a new domain. This domain will automatically be populated with an application “default” and a room “default” which we will use to get ICE servers.
139 |
140 | ICE Servers can be gathered by placing a request to the XirSys API. __Note: Requires jQuery.__
141 |
142 | ```js
143 | function get_xirsys_servers() {
144 | var servers;
145 | $.ajax({
146 | type: 'POST',
147 | url: 'https://service.xirsys.com/ice',
148 | data: {
149 | room: 'default',
150 | application: 'default',
151 | domain: 'your-domain',
152 | ident: 'your-ident',
153 | secret: 'Your API key, on dashboard',
154 | secure: 1,
155 | },
156 | success: function(res) {
157 | console.log(res);
158 | res = JSON.parse(res);
159 | if (!res.e) servers = res.d.iceServers;
160 | },
161 | async: false
162 | });
163 | return servers;
164 | }
165 | ```
166 |
167 | This will return the servers you can use to start a video chat with production quality dependency. The PubNub phone.dial and controller.dial have an optional argument of servers to use to place a call, so to use your servers, simply call it as follows:
168 |
169 | ```
170 | phone.dial(number, get_xirsys_servers());
171 | ```
172 |
173 | If you are using the PubNub RTC-Controller, you can provide this function at creation time using:
174 |
175 | ```js
176 | var phone = //...
177 | var ctrl = CONTROLLER(phone, get_xirsys_servers);
178 | ```
179 |
180 | All calls will automatically use the provided server function. You’re all ready to go now! Happy chatting!
181 |
182 | ### Want to learn more?
183 |
184 | Good, that never-ending quest for knowledge will get you far in life. Here are some other resources PubNub offers on WebRTC:
185 |
186 | [PubNub WebRTC SDK](https://github.com/stephenlb/webrtc-sdk)
187 |
188 | [What is WebRTC](http://www.pubnub.com/blog/what-is-webrtc/)
189 |
190 | [PubNub WebRTC Demo](http://www.pubnub.com/developers/demos/webrtc/)
191 |
192 | We will be putting out more information and tricks of using WebRTC in the coming weeks so stay tuned!
193 |
--------------------------------------------------------------------------------
/embed.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
33 |
34 |
35 |
36 |
214 |
215 |
216 |
--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {"name":"Liveblogr","tagline":"A Live Blogging application build using Go and PubNub","body":"# LiveBlogr\r\n\r\nA Live Blogging application build using Go and PubNub\r\n\r\n## Built With\r\n\r\n- PubNub\r\n- Golang\r\n- Google App Engine\r\n- Imgur API\r\n\r\n## Sign up now!\r\n\r\nVisit the site and see progress at [liveblogr.appspot.com](liveblogr.appspot.com)!","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
--------------------------------------------------------------------------------
/stream.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | PubRTC + Mobile
5 |
6 |
7 |
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 0
36 |
37 |
38 |
39 |
55 |
56 |
57 |
73 |
74 |
75 | Embed Style:
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
To Use:
84 |
Type a channel to stream to and click Stream.
85 |
In a separate browser window, join the steam you created.
71 |
72 | ### Step 2: The JavaScript Imports
73 |
74 | There are three libraries that you will need to include to make WebRTC operations much easier. The first thing you should include is [jQuery](https://jquery.com/) to make modifying DOM elements a breeze. Then, you will need the PubNub JavaScript SDK to facilitate the WebRTC signaling. Finally, include the PubNub WebRTC SDK which makes placing phone calls as simple as calling the `dial(number)` function.
75 |
76 |
77 |
78 |
79 |
80 | Now we are ready to write our calling functions for `login` and `makeCall`!
81 |
82 | ### Step 3: Preparing to Receive Calls
83 |
84 | In order to start facilitating video calls, you will need a publish and subscribe key. To get your pub/sub keys, you’ll first need to [sign up for a PubNub account](http://www.pubnub.com/get-started/). Once you sign up, you can find your unique PubNub keys in the [PubNub Developer Dashboard](https://admin.pubnub.com). The free Sandbox tier should give you all the bandwidth you need to build and test your WebRTC Application.
85 |
86 | First, lets use jQuery to find our video holder, where other callers faces will go.
87 |
88 | var video_out = document.getElementById("vid-box");
89 |
90 | Now, to implement the login function. This function will set up the phone using the username they provided as a UUID.
91 |
92 | ```
93 | function login(form) {
94 | var phone = window.phone = PHONE({
95 | number : form.username.value || "Anonymous", // listen on username line else Anonymous
96 | publish_key : 'your_pub_key',
97 | subscribe_key : 'your_sub_key',
98 | });
99 | phone.ready(function(){ form.username.style.background="#55ff5b"; });
100 | phone.receive(function(session){
101 | session.connected(function(session) { video_out.appendChild(session.video); });
102 | session.ended(function(session) { video_out.innerHTML=''; });
103 | });
104 | return false; // So the form does not submit.
105 | }
106 | ```
107 |
108 | You can see we use the username as the phone's number, and instantiate PubNub using your own publish and subscribe keys. The next function `phone.ready` allows you to define a callback for when the phone is ready to place a call. I simply change the username input's background to green, but you can tailor this to your needs.
109 |
110 | The `phone.receive` function allows you to define a callback that takes a session for when a session (call) event occurs, whether that be a new call, a call hangup, or for losing service, you attach those event handlers to the sessions in `phone.receive`.
111 |
112 | I defined `session.connected` which is called after receiving a call when you are ready to begin talking. I simple appended the session's video element to our video div.
113 |
114 | Then, I define `session.ended` which is called after invoking `phone.handup`. This is where you place end-call logic. I simply clear the video holder's innerHTML.
115 |
116 | ### Step 4: Making Calls
117 |
118 | We now have a phone ready to receive a call, so it is time to create a `makeCall` function.
119 |
120 | ```
121 | function makeCall(form){
122 | if (!window.phone) alert("Login First!");
123 | else phone.dial(form.number.value);
124 | return false;
125 | }
126 | ```
127 |
128 | If `window.phone` is undefined, we cannot place a call. This will happen if the user did not log in first. If it is, we use the `phone.dial` function which takes a number and an optional list of servers to place a call.
129 |
130 | 
131 |
132 | And that is it! You now have a simple WebRTC chatting app, fire up your python server and go test your app on localhost!
133 |
134 | ## Production Quality WebRTC with XirSys
135 |
136 | While PubNub handles all the signaling for you WebRTC application, there are many other server side features that you will likely need to handle the quirks of real-world connectivity. In reality, most devices live behind layers of NAT, proxies, and corporate firewalls. [XirSys](http://xirsys.com/) is a WebRTC hosting company that provides production quality STUN and TURN servers to solve these problems. Sign up on their website to receive your free API key so you can start using using their solutions!
137 |
138 | To use a XirSys server in your application, follow their [Quick Start Guide](http://xirsys.com/guide/) to make a domain. You will need to navigate to [this page](https://dashboard.xirsys.com/domains/list) and create a new domain. This domain will automatically be populated with an application “default” and a room “default” which we will use to get ICE servers.
139 |
140 | ICE Servers can be gathered by placing a request to the XirSys API. __Note: Requires jQuery.__
141 |
142 | ```js
143 | function get_xirsys_servers() {
144 | var servers;
145 | $.ajax({
146 | type: 'POST',
147 | url: 'https://service.xirsys.com/ice',
148 | data: {
149 | room: 'default',
150 | application: 'default',
151 | domain: 'your-domain',
152 | ident: 'your-ident',
153 | secret: 'Your API key, on dashboard',
154 | secure: 1,
155 | },
156 | success: function(res) {
157 | console.log(res);
158 | res = JSON.parse(res);
159 | if (!res.e) servers = res.d.iceServers;
160 | },
161 | async: false
162 | });
163 | return servers;
164 | }
165 | ```
166 |
167 | This will return the servers you can use to start a video chat with production quality dependency. The PubNub phone.dial and controller.dial have an optional argument of servers to use to place a call, so to use your servers, simply call it as follows:
168 |
169 | ```
170 | phone.dial(number, get_xirsys_servers());
171 | ```
172 |
173 | If you are using the PubNub RTC-Controller, you can provide this function at creation time using:
174 |
175 | ```js
176 | var phone = //...
177 | var ctrl = CONTROLLER(phone, get_xirsys_servers);
178 | ```
179 |
180 | All calls will automatically use the provided server function. You’re all ready to go now! Happy chatting!
181 |
182 | ### Want to learn more?
183 |
184 | Good, that never-ending quest for knowledge will get you far in life. Here are some other resources PubNub offers on WebRTC:
185 |
186 | [PubNub WebRTC SDK](https://github.com/stephenlb/webrtc-sdk)
187 |
188 | [What is WebRTC](http://www.pubnub.com/blog/what-is-webrtc/)
189 |
190 | [PubNub WebRTC Demo](http://www.pubnub.com/developers/demos/webrtc/)
191 |
192 | We will be putting out more information and tricks of using WebRTC in the coming weeks so stay tuned!
193 |
--------------------------------------------------------------------------------
/embed.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
33 |
34 |
35 |
36 | 
0