-
Notifications
You must be signed in to change notification settings - Fork 9
/
tutorial-rtc-video-chat.html
190 lines (166 loc) · 15.2 KB
/
tutorial-rtc-video-chat.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>rtc.io</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- responsive -->
<link rel="stylesheet" media="screen and (max-width: 960px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 710px)" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="fonts/source-sans/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/code.css">
</head>
<body>
<a class="scroll-point pt-top" name="top"></a>
<header>
<a href="https://github.com/rtc-io"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<a class="scroll-point pt-top" name="top"></a>
<div class="site">
<div class="mascot">
<img src="images/artsio.png">
</div>
<div class="logo" data-subtext="OpenSource WebRTC">
<a href="index.html">rtc.io</a>
</div>
<nav>
<ul>
<li><a href="index.html">About</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="modules.html">Modules</a></li>
</ul>
</nav>
</div>
<div class="shadow"></div>
</header>
<div class="main" role="content"><h1 id="video-chat-with-shared-text-area">Video chat with shared text area</h1>
<p>This demo shows how to use the <a href="https://github.com/rtc-io/rtc">rtc</a> module to start a shared session, render the local and remote users' video streams, and use a data channel to create a shared text area for users.</p>
<p>Include the bundled rtc module in your HTML page (get the latest build from <a href="https://github.com/rtc-io/rtc/tree/master/dist">https://github.com/rtc-io/rtc/tree/master/dist</a>). The rtc module can also be loaded using require.js.</p>
<div class="highlight"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"path/to/rtc.js"</span><span class="nt">></script></span>
</pre></div>
<p>First we will need to define the options to pass into RTC. A room and a signalling server are required - you can use our hosted signalling server <code>//switchboard.rtc.io</code> for testing purposes. The <a href="module-rtc-switchboard.html">rtc-switchboard</a> module is also available to deploy on your own servers.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">rtcOpts</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">room</span><span class="o">:</span> <span class="s1">'test-room'</span><span class="p">,</span>
<span class="nx">signaller</span><span class="o">:</span> <span class="s1">'https://switchboard.rtc.io'</span>
<span class="p">};</span>
</pre></div>
<p>Now we can call <code>RTC</code> to start a session. This will automatically create the local and remote video streams, which we will add to our page later.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">rtc</span> <span class="o">=</span> <span class="nx">RTC</span><span class="p">(</span><span class="nx">rtcOpts</span><span class="p">);</span>
</pre></div>
<p>We'll need references to the DOM elements that we want to add our video streams to.</p>
<div class="highlight"><pre><span class="c1">// A div element to show our local video stream</span>
<span class="kd">var</span> <span class="nx">localVideo</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'l-video'</span><span class="p">);</span>
<span class="c1">// A div element to show our remote video streams</span>
<span class="kd">var</span> <span class="nx">remoteVideo</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'r-video'</span><span class="p">);</span>
</pre></div>
<p>Then we can append the rendered video streams that RTC has created.</p>
<div class="highlight"><pre><span class="c1">// Display local and remote video streams</span>
<span class="nx">localVideo</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">rtc</span><span class="p">.</span><span class="nx">local</span><span class="p">);</span>
<span class="nx">remoteVideo</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">rtc</span><span class="p">.</span><span class="nx">remote</span><span class="p">);</span>
</pre></div>
<p>We'll also need a reference to a contenteditable element for our users to share text with each other.</p>
<div class="highlight"><pre><span class="c1">// A contenteditable element to show our messages</span>
<span class="kd">var</span> <span class="nx">messageWindow</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'messages'</span><span class="p">);</span>
</pre></div>
<p>Before we can start sharing text via a data channel we need to wait for the signalling server to create our session. The rtc module fires a <code>ready</code> event when our session is ready to work with.</p>
<div class="highlight"><pre><span class="c1">// Detect when RTC has established a session</span>
<span class="nx">rtc</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="nx">init</span><span class="p">);</span>
</pre></div>
<p>Once a session is established we can create a data channel and listen for it's <code>opened</code> event.</p>
<div class="highlight"><pre><span class="c1">// Start working with the established session</span>
<span class="kd">function</span> <span class="nx">init</span><span class="p">(</span><span class="nx">session</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">createDataChannel</span><span class="p">(</span><span class="s1">'chat'</span><span class="p">);</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'channel:opened:chat'</span><span class="p">,</span> <span class="nx">bindDataChannelEvents</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
<p>Finally, bind the data channel events so that our users can update the shared text box.</p>
<div class="highlight"><pre><span class="c1">// Bind to events happening on the data channel</span>
<span class="kd">function</span> <span class="nx">bindDataChannelEvents</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">channel</span><span class="p">,</span> <span class="nx">attributes</span><span class="p">,</span> <span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Receive message</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">messageWindow</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// Send message</span>
<span class="nx">messageWindow</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
</pre></div>
<p>Here's the full script:</p>
<div class="highlight"><pre><span class="c1">// Set RTC options.</span>
<span class="kd">var</span> <span class="nx">rtcOpts</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">room</span><span class="o">:</span> <span class="s1">'test-room'</span><span class="p">,</span>
<span class="nx">signaller</span><span class="o">:</span> <span class="s1">'https://switchboard.rtc.io'</span>
<span class="p">};</span>
<span class="c1">// call RTC module</span>
<span class="kd">var</span> <span class="nx">rtc</span> <span class="o">=</span> <span class="nx">RTC</span><span class="p">(</span><span class="nx">rtcOpts</span><span class="p">);</span>
<span class="c1">// A div element to show our local video stream</span>
<span class="kd">var</span> <span class="nx">localVideo</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'l-video'</span><span class="p">);</span>
<span class="c1">// A div element to show our remote video streams</span>
<span class="kd">var</span> <span class="nx">remoteVideo</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'r-video'</span><span class="p">);</span>
<span class="c1">// A contenteditable element to show our messages</span>
<span class="kd">var</span> <span class="nx">messageWindow</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'messages'</span><span class="p">);</span>
<span class="c1">// Bind to events happening on the data channel</span>
<span class="kd">function</span> <span class="nx">bindDataChannelEvents</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">channel</span><span class="p">,</span> <span class="nx">attributes</span><span class="p">,</span> <span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Receive message</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">messageWindow</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// Send message</span>
<span class="nx">messageWindow</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// Start working with the established session</span>
<span class="kd">function</span> <span class="nx">init</span><span class="p">(</span><span class="nx">session</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">createDataChannel</span><span class="p">(</span><span class="s1">'chat'</span><span class="p">);</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'channel:opened:chat'</span><span class="p">,</span> <span class="nx">bindDataChannelEvents</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Display local and remote video streams</span>
<span class="nx">localVideo</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">rtc</span><span class="p">.</span><span class="nx">local</span><span class="p">);</span>
<span class="nx">remoteVideo</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">rtc</span><span class="p">.</span><span class="nx">remote</span><span class="p">);</span>
<span class="c1">// Detect when RTC has established a session</span>
<span class="nx">rtc</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="nx">init</span><span class="p">);</span>
</pre></div>
<p>And here's the full HTML page to go with it:</p>
<div class="highlight"><pre><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><style></span>
<span class="nf">#messages</span> <span class="p">{</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
<span class="k">min-height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../rtc.min.js"</span><span class="nt">></script></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">contenteditable</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"l-video"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"r-video"</span><span class="nt">></div></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"rtc-video-chat.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
</pre></div>
</div>
<footer>
<p>
<a href="http://nicta.com.au">
<img src="images/nicta-logo.gif" alt="NICTA logo">
</a>© NICTA 2013 - 2014
</p>
<p class="license">Project source code is licensed under the <a href="https://github.com/rtc-io/rtc/blob/master/LICENSE">Apache 2.0</a>.</p>
<a class="closing" href="#top"></a>
</footer>
</body>
<script src="js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-26567546-2', 'rtc.io');
ga('send', 'pageview');
</script>
</html>