-
Notifications
You must be signed in to change notification settings - Fork 9
/
module-rtc.html
171 lines (156 loc) · 11.4 KB
/
module-rtc.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
<!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/rtc"><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="rtc">rtc</h1>
<p>This is a package that will provide you a "one-stop shop" for building WebRTC applications. It aggregates together a variety of packages (primarily from the <a href="https://github.com/rtc-io">rtc.io</a> suite) to deliver a single package for building a WebRTC application.</p>
<p><a href="https://nodei.co/npm/rtc/"><img src="https://nodei.co/npm/rtc.png" alt="NPM"></a></p>
<p><a href="https://travis-ci.org/rtc-io/rtc"><img src="https://img.shields.io/travis/rtc-io/rtc.svg?branch=master" alt="Build Status"></a>
<a href="https://github.com/dominictarr/stability#unstable"><img src="https://img.shields.io/badge/stability-unstable-yellowgreen.svg" alt="unstable"></a>
<a href="https://www.bithound.io/github/rtc-io/rtc"><img src="https://www.bithound.io/github/rtc-io/rtc/badges/score.svg" alt="bitHound Score"></a>
<a href="https://gitter.im/rtc-io/discuss"><img src="https://badges.gitter.im/rtc-io/discuss.png" alt="Gitter chat"></a></p>
<h2 id="getting-started">Getting Started</h2>
<p>Probably the easiest way to get started with <code>RTC</code> is to take it for a testdrive using <a href="http://jsbin.com/dahuka/edit?html,css,js,output">jsbin</a>. This demo uses the minified JS file (and associated sourcemaps for debugging) from:</p>
<p><code>//cdn.jsdelivr.net/rtc/latest/rtc.min.js</code></p>
<p>If you wish to use a specific version, then you can replace <code>latest</code> with the version number (from <code>3.0.1</code> onwards):</p>
<p><code>//cdn.jsdelivr.net/rtc/3.2.3/rtc.min.js</code></p>
<h3 id="package-managers-ftw-">Package Managers FTW!</h3>
<p>I'd recommend using a package manager if you aren't already and here are the relevant instructions for installing <code>RTC</code> from a number of popular options:</p>
<ul>
<li><strong>npm</strong>: <code>npm install rtc --save</code></li>
<li><strong>bower</strong>: <code>bower install rtc-io/rtc</code></li>
</ul>
<h2 id="basic-usage">Basic Usage</h2>
<p>Establish a connection and render local and remote video feeds.</p>
<div class="highlight"><pre><span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>rtc.io simple conferencing<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://yui.yahooapis.com/pure/0.5.0/pure-min.css"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"layout.css"</span><span class="nt">></span>
<span class="nt"></head></span>
<span class="nt"><body</span> <span class="na">onload=</span><span class="s">"RTC()"</span> <span class="na">class=</span><span class="s">"pure-g"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"pure-u-1-5"</span><span class="nt">></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="nt"><div</span> <span class="na">class=</span><span class="s">"pure-u-4-5"</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">"https://cdn.jsdelivr.net/rtc/latest/rtc.min.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</pre></div>
<p>In this example, the <a href="defaultconfig.js">default configuration options</a> are used for configuration, which are displayed below for informational purposes:</p>
<div class="highlight"><pre><span class="c1">// a default configuration that is used by the rtc package</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="c1">// simple constraints for defaults</span>
<span class="nx">constraints</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">video</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">audio</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">},</span>
<span class="c1">// use the public switchboard for signalling</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">// no room is defined by default</span>
<span class="c1">// rtc-quickconnect will autogenerate using a location.hash</span>
<span class="nx">room</span><span class="o">:</span> <span class="kc">undefined</span><span class="p">,</span>
<span class="c1">// specify ice servers or a generator function to create ice servers</span>
<span class="nx">ice</span><span class="o">:</span> <span class="p">[],</span>
<span class="c1">// any data channels that we want to create for the conference</span>
<span class="c1">// by default a chat channel is created, but other channels can be added also</span>
<span class="c1">// additionally options can be supplied to customize the data channel config</span>
<span class="c1">// see: <http://w3c.github.io/webrtc-pc/#idl-def-RTCDataChannelInit></span>
<span class="nx">channels</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">chat</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">},</span>
<span class="c1">// the selector that will be used to identify the localvideo container</span>
<span class="nx">localContainer</span><span class="o">:</span> <span class="s1">'#l-video'</span><span class="p">,</span>
<span class="c1">// the selector that will be used to identify the remotevideo container</span>
<span class="nx">remoteContainer</span><span class="o">:</span> <span class="s1">'#r-video'</span><span class="p">,</span>
<span class="c1">// should we atempt to load any plugins?</span>
<span class="nx">plugins</span><span class="o">:</span> <span class="p">[],</span>
<span class="c1">// common options overrides that are used across rtc.io packages</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{}</span>
<span class="p">};</span>
</pre></div>
<h2 id="diving-deeper">Diving Deeper</h2>
<p>If there is a specific application that you are looking to build with <a href="http://rtc.io/">rtc.io</a> feel free to <a href="https://github.com/rtc-io/rtc/issues/new">open an issue</a> and outline a few of your requirements (video, audio, data, etc) and we can give you some advice. In most cases, the following is a good rule of thumb for working our where you should jump in with rtc.io packages.</p>
<ul>
<li><p>Video and/or audio is crucial to my application and I haven't done a lot of work with <a href="http://browserify.org">browserify</a></p>
<p><em>Use the <code>rtc</code> distribution files from the CDN, and build your app</em></p>
</li>
<li><p>I feel comfortable using browserify, and find it a great way of building apps.</p>
<p><em>Configure your application using npm, and start by including the rtc package (<code>npm install --save rtc</code>). If you need more flexibility than what is offered through this package, take something like <a href="https://github.com/rtc-io/rtc-quickconnect"><code>rtc-quickconnect</code></a> for a spin.</em></p>
</li>
<li><p>I am building something that isn't really media related, and just want to play with data channels.</p>
<p><em>You are going to want to use <a href="https://github.com/rtc-io/rtc-quickconnect"><code>rtc-quickconnect</code></a> and we'd strongly recommend getting comfortable with browserify if you aren't already as it's going to make your life a lot easier.</em></p>
</li>
</ul>
<h2 id="other-simple-demos-tutorials">Other Simple Demos / Tutorials</h2>
<ul>
<li><a href="http://jsbin.com/rimexe/edit?html,js,output">Data Channels Only Demo</a> - if you really don't want to go down the <a href="https://github.com/rtc-io/rtc-quickconnect"><code>rtc-quickconnect</code></a> and browserify road.</li>
</ul>
<h2 id="license-s-">License(s)</h2>
<h3 id="apache-2-0">Apache 2.0</h3>
<p>Copyright 2014-2015 National ICT Australia Limited (NICTA)</p>
<p> Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at</p>
<pre><code> http://www.apache.org/licenses/LICENSE-2.0</code></pre>
<p> Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.</p>
</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>