index.html 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767
  1. <head>
  2. <title>PeerJS Documentation</title>
  3. <meta name="viewport" content="width=device-width, maximum-scale=1">
  4. <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
  5. <link href="/css/docs.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="/js/jquery.min.js"></script>
  7. <script type="text/javascript" src="/js/docs.js"></script>
  8. </head>
  9. <body>
  10. <section class="start">
  11. <h1>
  12. <a href="/">PeerJS</a>
  13. <span class="title">docs</span>
  14. </h1>
  15. <p>
  16. <br>PeerJS simplifies peer-to-peer data, video, and audio calls.</p>
  17. <p>This guide will show you the basic concepts of the PeerJS API. If you learn better from seeing a working app,
  18. <a href="/examples">see the examples</a> page.</P>
  19. <h2>Setup</h2>
  20. <h3>1. Include the Javascript client</h3>
  21. <p>Add the PeerJS client library to your webpage.</p>
  22. <pre>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"&gt;&lt;/script&gt;</pre>
  23. <p>If you prefer, you can host it yourself:
  24. <a download href="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js">peer.min.js</a>, or
  25. <a href="https://github.com/peers/peerjs">fork us on Github</a>.</p>
  26. <h3>2. Create the Peer object</h3>
  27. <p>The Peer object is where we create and receive connections.</p>
  28. <pre>var peer = new Peer({key: 'lwjd5qra8257b9'});</pre>
  29. <p>The 'key' we're passing in to the Peer constructor is a PeerServer cloud API key. You can use ours for now, but
  30. you should
  31. <a href="https://peerjs.com/peerserver">sign up for your own free key</a>. PeerJS uses PeerServer for session
  32. metadata and candidate signaling. You can also
  33. <a href="https://github.com/peers/peerjs-server">run your own PeerServer</a> if you don't like the cloud.</p>
  34. <p>We're now ready to start making connections!</p>
  35. <h2>Usage</h2>
  36. <p>Every Peer object is assigned a random, unique ID when it's created.</p>
  37. <pre>peer.on('open', function(id) {
  38. console.log('My peer ID is: ' + id);
  39. });</pre>
  40. <p>When we want to connect to another peer, we'll need to know their peer id. You're in charge of communicating the
  41. peer
  42. IDs between users of your site. Optionally, you can pass in your own IDs to the
  43. <a href="#peer">
  44. <code>Peer</code> constructor
  45. </a>.</p>
  46. <p>Read the
  47. <a href="#peer">Peer API reference</a> for complete information on its
  48. <a href="#peer-options">options</a>, methods,
  49. <a href="#peeron">events</a>, and
  50. <a href="#peeron-error">error handling</a>.</p>
  51. <h3>Data connections</h3>
  52. <p>Start a data connection by calling
  53. <code>peer.connect</code> with the peer ID of the destination peer. Anytime another peer attempts to connect to
  54. your peer ID, you'll receive
  55. a
  56. <code>connection</code> event. </p>
  57. <div class="two-col">
  58. <div class="col col-header">Start connection</div>
  59. <div class="col col-header">Receive connection</div>
  60. <div class="col">
  61. <pre>var conn = peer.connect('dest-peer-id');</pre>
  62. </div>
  63. <div class="col">
  64. <pre>peer.on('connection', function(conn) { ... });</pre>
  65. </div>
  66. <div class="clear"></div>
  67. </div>
  68. <p>
  69. <code>peer.connect</code> and the callback of the
  70. <code>connection</code> event will both provide a
  71. <code>DataConnection</code> object. This object will allow you to send and receive data:</p>
  72. <pre>conn.on('open', function() {
  73. // Receive messages
  74. conn.on('data', function(data) {
  75. console.log('Received', data);
  76. });
  77. // Send messages
  78. conn.send('Hello!');
  79. });</pre>
  80. <p>Read the
  81. <a href="#dataconnection">DataConnection API reference</a> for complete details on its methods and events.</p>
  82. <h3>Video/audio calls</h3>
  83. <p>Call another peer by calling
  84. <code>peer.call</code> with the peer ID of the destination peer. When a peer calls you, the
  85. <code>call</code> event is emitted.</p>
  86. <p>Unlike data connections, when receiving a
  87. <code>call</code> event, the call must be answered or no connection is established.</p>
  88. <div class="two-col">
  89. <div class="col col-header">Start call</div>
  90. <div class="col col-header">Answer call</div>
  91. <div class="col">
  92. <pre>// Call a peer, providing our mediaStream
  93. var call = peer.call('dest-peer-id',
  94. mediaStream);
  95. </pre>
  96. </div>
  97. <div class="col">
  98. <pre>peer.on('call', function(call) {
  99. // Answer the call, providing our mediaStream
  100. call.answer(mediaStream);
  101. });</pre>
  102. </div>
  103. <div class="clear"></div>
  104. </div>
  105. <p>When calling or answering a call, a MediaStream should be provided. The MediaStream represents the local video
  106. (webcam)
  107. or audio stream and can be obtained with some (browser-specific) version of
  108. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia">
  109. <code>navigator.getUserMedia</code>
  110. </a>. When answering a call, the MediaStream is optional and if none is provided then a one-way call is
  111. established.
  112. Once the call is established, its
  113. <code>open</code> property is set to true.</p>
  114. <p>
  115. <code>peer.call</code> and the callback of the
  116. <code>call</code> event provide a MediaConnection object. The MediaConnection object itself emits a
  117. <code>stream</code> event whose callback includes the video/audio stream of the other peer.</p>
  118. <pre>call.on('stream', function(stream) {
  119. // `stream` is the MediaStream of the remote peer.
  120. // Here you'd add it to an HTML video/canvas element.
  121. });</pre>
  122. <p>Read the
  123. <a href="#mediaconnection">MediaConnection API reference</a> for complete details on its methods and events.</p>
  124. <h2>Common questions</h2>
  125. <h3>What kind of data can I send?</h3>
  126. <p>PeerJS has the
  127. <a href="https://github.com/binaryjs/js-binarypack">BinaryPack</a>
  128. serialization format built-in. This means you can send any JSON type as well as binary Blobs and ArrayBuffers.
  129. Simply send
  130. arbitrary data and you'll get it out the other side:</p>
  131. <pre>
  132. conn.send({
  133. strings: 'hi!',
  134. numbers: 150,
  135. arrays: [1,2,3],
  136. evenBinary: new Blob([1,2,3]),
  137. andMore: {bool: true}
  138. });</pre>
  139. <h3>Are there any caveats?</h3>
  140. <p>A small percentage of users are behind symmetric NATs. When two symmetric NAT users try to connect to each other,
  141. NAT
  142. traversal is impossible and no connection can be made. A workaround is to proxy through the connection through a
  143. TURN
  144. server. The PeerServer cloud service does not provide a TURN server. You'll have to find your own. You can pass a
  145. TURN
  146. server into the
  147. <code>Peer</code> object options. This will allow your PeerJS app to work seamlessly for this situation</p>
  148. <h3>How do I use a TURN server?</h3>
  149. <p>When creating your Peer object, pass in the ICE servers as the config key of the options hash.</p>
  150. <pre>
  151. var peer = new Peer({
  152. config: {'iceServers': [
  153. { url: 'stun:stun.l.google.com:19302' },
  154. { url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo' }
  155. ]} /* Sample servers, please use appropriate ones */
  156. });
  157. </pre>
  158. <h3>What is the current state of browser compatibility?</h3>
  159. <p>We keep an frequently-updated catalogue of WebRTC compatibility information and caveats
  160. <a href="/status">here</a>.</p>
  161. <h3>What if my peer has not yet connected to the server when I attempt to connect to it?</h3>
  162. <p>When you try to connect to a peer, PeerServer will hold a connection offer for up to 5 seconds before rejecting
  163. it. This
  164. is useful if you want to reconnect to a peer as it disconnects and reconnects rapidly between web pages.</p>
  165. <h3>Why am I unable to connect?</h3>
  166. <p>You could be behind a symmetric NAT, in which case you'll need to set up a TURN server.</p>
  167. <p>Another possible issue is your network blocking port 443, which the PeerServer cloud runs on. In this you must
  168. use your
  169. own PeerServer running on an appropriate port instead of the cloud service.</p>
  170. <h3>What about latency/bandwidth?</h3>
  171. <p>Data sent between the two peers do not touch any other servers, so the connection speed is limited only by the
  172. upload
  173. and download rates of the two peers. This also means you don't have the additional latency of an intermediary
  174. server.</p>
  175. <p>The latency to establish a connection can be split into two components: the brokering of data and the
  176. identification
  177. of clients. PeerJS has been designed to minimize the time you spend in these two areas. For brokering, data is
  178. sent
  179. through an XHR streaming request before a WebSocket connection is established, then through WebSockets. For client
  180. identification, we provide you the ability to pass in your own peer IDs, thus eliminating the RTT for retrieving
  181. an
  182. ID from the server.</p>
  183. <h3>More questions?</h3>
  184. <p>
  185. <a href="https://groups.google.com/forum/?fromgroups#!forum/peerjs">Discuss PeerJS on our Google Group.</a>
  186. <br>
  187. <br>
  188. </p>
  189. </section>
  190. <header class="left">
  191. <h2>API Reference
  192. <a class="hide icon">&laquo;</a>
  193. <a class="show icon">&raquo;</a>
  194. </h2>
  195. </header>
  196. <header class="right">
  197. <h2>Getting Started</h2>
  198. </header>
  199. <section class="api">
  200. <div class="toplevel " id="peer"><span class="name"><a href="#peer">Peer</a><span
  201. class="tag type constructor">constructor</span><span class="snippet">var peer = new Peer([id],
  202. [options]);</span></span>
  203. <p class="description">A peer can connect to other peers and listen for connections.</p>
  204. <div class="children">
  205. <div class="child " id="peer-id"><span class="name"><a href="#peer-id"><span class="optional"><span
  206. class="bracket">[</span>id<span class="bracket">]</span></span></a><span
  207. class="tag type string">string</span></span>
  208. <p class="description">Other peers can connect to this peer using the provided ID. If no ID is given, one will
  209. be generated by the brokering server. The ID must start and end with an alphanumeric character (lower or
  210. upper case character or a digit). In the middle of the ID spaces, dashes (-) and underscores (_) are
  211. allowed.<span class='warn'>It's not recommended that you use this ID to identify peers, as it's meant to be
  212. used for brokering connections only. You're recommended to set the <a
  213. href='#peerconnect-options'><code>metadata</code></a> option to send other identifying
  214. information.</span></p>
  215. </div>
  216. <div class="child " id="peer-options"><span class="name"><a href="#peer-options"><span class="optional"><span
  217. class="bracket">[</span>options<span class="bracket">]</span></span></a><span
  218. class="tag type object">object</span></span>
  219. <div class="children">
  220. <div class="child " id="peer-options-key"><span class="name"><a href="#peer-options-key">key</a><span
  221. class="tag type string">string</span></span>
  222. <p class="description">API key for the cloud PeerServer. This is not used for servers other than
  223. <code>0.peerjs.com</code>.<span class='warn'>PeerServer cloud runs on port 443. Please ensure it is not
  224. blocked or consider running your own PeerServer instead.</span></p>
  225. </div>
  226. <div class="child " id="peer-options-host"><span class="name"><a href="#peer-options-host">host</a><span
  227. class="tag type string">string</span></span>
  228. <p class="description">Server host. Defaults to <code>0.peerjs.com</code>. Also accepts <code>'/'</code>
  229. to signify relative hostname.</p>
  230. </div>
  231. <div class="child " id="peer-options-port"><span class="name"><a href="#peer-options-port">port</a><span
  232. class="tag type number">number</span></span>
  233. <p class="description">Server port. Defaults to <code>443</code>.</p>
  234. </div>
  235. <div class="child " id="peer-options-pinginterval"><span class="name"><a
  236. href="#peer-options-pinginterval">pingInterval</a><span class="tag type number">number</span></span>
  237. <p class="description">Ping interval in ms. Defaults to <code>5000</code>.</p>
  238. </div>
  239. <div class="child " id="peer-options-path"><span class="name"><a href="#peer-options-path">path</a><span
  240. class="tag type string">string</span></span>
  241. <p class="description">The path where your self-hosted PeerServer is running. Defaults to
  242. <code>'/'</code>.</p>
  243. </div>
  244. <div class="child beta_030 " id="peer-options-secure"><span class="name"><a
  245. href="#peer-options-secure">secure</a><span class="tag type boolean">boolean</span><span
  246. class="tag beta_030">beta (0.3.0)</span></span>
  247. <p class="description"><code>true</code> if you're using SSL.<span class='tip'>Note that our cloud-hosted
  248. server and assets may not support SSL.</span></p>
  249. </div>
  250. <div class="child " id="peer-options-config"><span class="name"><a
  251. href="#peer-options-config">config</a><span class="tag type object">object</span></span>
  252. <p class="description">Configuration hash passed to RTCPeerConnection. This hash contains any custom
  253. ICE/TURN server configuration. Defaults to
  254. <code>{ 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }], 'sdpSemantics': 'unified-plan' }</code>
  255. </p>
  256. </div>
  257. <div class="child beta_030 " id="peer-options-debug"><span class="name"><a
  258. href="#peer-options-debug">debug</a><span class="tag type number">number</span><span
  259. class="tag beta_030">beta (0.3.0)</span></span>
  260. <p class="description">Prints log messages depending on the debug level passed in. Defaults to
  261. <code>0</code>.</p>
  262. <div class="children">
  263. <div class="child " id="peer-options-debug-0"><span class="name"><a
  264. href="#peer-options-debug-0">0</a></span>
  265. <p class="description">Prints no logs.</p>
  266. </div>
  267. <div class="child " id="peer-options-debug-1"><span class="name"><a
  268. href="#peer-options-debug-1">1</a></span>
  269. <p class="description">Prints only errors.</p>
  270. </div>
  271. <div class="child " id="peer-options-debug-2"><span class="name"><a
  272. href="#peer-options-debug-2">2</a></span>
  273. <p class="description">Prints errors and warnings.</p>
  274. </div>
  275. <div class="child " id="peer-options-debug-3"><span class="name"><a
  276. href="#peer-options-debug-3">3</a></span>
  277. <p class="description">Prints all logs.</p>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <div class="toplevel " id="peerconnect"><span class="name"><a href="#peerconnect">peer.connect</a><span
  286. class="tag type method">method</span><span class="snippet">var <a href='#dataconnection'>dataConnection</a> =
  287. peer.connect(id, [options]);</span></span>
  288. <p class="description">Connects to the remote peer specified by <code>id</code> and returns a data connection. Be
  289. sure to listen on the <a href='#peeron-error'><code>error</code></a> event in case the connection fails.</p>
  290. <div class="children">
  291. <div class="child " id="peerconnect-id"><span class="name"><a href="#peerconnect-id">id</a><span
  292. class="tag type string">string</span></span>
  293. <p class="description">The brokering ID of the remote peer (their <a href='#peerid'><code>peer.id</code></a>).
  294. </p>
  295. </div>
  296. <div class="child " id="peerconnect-options"><span class="name"><a href="#peerconnect-options"><span
  297. class="optional"><span class="bracket">[</span>options<span class="bracket">]</span></span></a><span
  298. class="tag type object">object</span></span>
  299. <div class="children">
  300. <div class="child " id="peerconnect-options-label"><span class="name"><a
  301. href="#peerconnect-options-label">label</a><span class="tag type string">string</span></span>
  302. <p class="description">A unique label by which you want to identify this data connection. If left
  303. unspecified, a label will be generated at random. Can be accessed with <a
  304. href='#dataconnection-label'><code>dataConnection.label</code></a>.</p>
  305. </div>
  306. <div class="child " id="peerconnect-options-metadata"><span class="name"><a
  307. href="#peerconnect-options-metadata">metadata</a></span>
  308. <p class="description">Metadata associated with the connection, passed in by whoever initiated the
  309. connection. Can be accessed with <a
  310. href='#dataconnection-metadata'><code>dataConnection.metadata</code></a>. Can be any serializable
  311. type.</p>
  312. </div>
  313. <div class="child " id="peerconnect-options-serialization"><span class="name"><a
  314. href="#peerconnect-options-serialization">serialization</a><span
  315. class="tag type string">string</span></span>
  316. <p class="description">Can be <code>binary</code> (default), <code>binary-utf8</code>, <code>json</code>,
  317. or <code>none</code>. Can be accessed with <a
  318. href='#dataconnection-serialization'><code>dataConnection.serialization</code></a>.<span
  319. class='tip'><code>binary-utf8</code> will take a performance hit because of the way UTF8 strings are
  320. packed into binary format.</span></p>
  321. </div>
  322. <div class="child " id="peerconnect-options-reliable"><span class="name"><a
  323. href="#peerconnect-options-reliable">reliable</a><span class="tag type boolean">boolean</span></span>
  324. <p class="description">Whether the underlying data channels should be reliable (e.g. for large file
  325. transfers) or not (e.g. for gaming or streaming). Defaults to <code>false</code>.<span
  326. class='warn'>Setting reliable to true will use a shim for incompatible browsers (Chrome 30 and below
  327. only) and thus may not offer full performance.</span></p>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. <div class="toplevel beta_030 " id="peercall"><span class="name"><a href="#peercall">peer.call</a><span
  334. class="tag type method">method</span><span class="tag beta_030">beta (0.3.0)</span><span class="snippet">var
  335. <a href='#mediaconnection'>mediaConnection</a> = peer.call(id, stream, [options]);</span></span>
  336. <p class="description">Calls the remote peer specified by <code>id</code> and returns a media connection. Be sure
  337. to listen on the <a href='#peeron-error'><code>error</code></a> event in case the connection fails.</p>
  338. <div class="children">
  339. <div class="child " id="peercall-id"><span class="name"><a href="#peercall-id">id</a><span
  340. class="tag type string">string</span></span>
  341. <p class="description">The brokering ID of the remote peer (their <a href='#peerid'><code>peer.id</code></a>).
  342. </p>
  343. </div>
  344. <div class="child " id="peercall-stream"><span class="name"><a href="#peercall-stream">stream</a><span
  345. class="tag type MediaStream">MediaStream</span></span>
  346. <p class="description">The caller's media stream</p>
  347. </div>
  348. <div class="child " id="peercall-options"><span class="name"><a href="#peercall-options"><span
  349. class="optional"><span class="bracket">[</span>options<span class="bracket">]</span></span></a><span
  350. class="tag type object">object</span></span>
  351. <div class="children">
  352. <div class="child " id="peercall-options-metadata"><span class="name"><a
  353. href="#peercall-options-metadata">metadata</a></span>
  354. <p class="description">Metadata associated with the connection, passed in by whoever initiated the
  355. connection. Can be accessed with <a
  356. href='#dataconnection-metadata'><code>dataConnection.metadata</code></a>. Can be any serializable
  357. type.</p>
  358. </div>
  359. <div class="child " id="peercall-options-sdptransform"><span class="name"><a
  360. href="#peercall-options-sdptransform">sdpTransform</a><span
  361. class="tag type method">method</span></span>
  362. <p class="description">Function which runs before create offer to modify sdp offer message.</p>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. </div>
  368. <div class="toplevel " id="peeron"><span class="name"><a href="#peeron">peer.on</a><span
  369. class="tag type method">method</span><span class="snippet">peer.on(event, callback);</span></span>
  370. <p class="description">Set listeners for peer events.</p>
  371. <div class="children">
  372. <div class="child " id="peeron-open"><span class="name"><a href="#peeron-open">'open'</a><span
  373. class="tag type event">event</span><span class="snippet">peer.on('open', function(id) { ...
  374. });</span></span>
  375. <p class="description">Emitted when a connection to the PeerServer is established. You may use the peer before
  376. this is emitted, but messages to the server will be queued. <code>id</code> is the brokering ID of the peer
  377. (which was either provided in the constructor or assigned by the server).<span class='tip'>You should not
  378. wait for this event before connecting to other peers if connection speed is important.</span></p>
  379. </div>
  380. <div class="child " id="peeron-connection"><span class="name"><a href="#peeron-connection">'connection'</a><span
  381. class="tag type event">event</span><span class="snippet">peer.on('connection', function(<a
  382. href='#dataconnection'>dataConnection</a>) { ... });</span></span>
  383. <p class="description">Emitted when a new data connection is established from a remote peer.</p>
  384. </div>
  385. <div class="child beta_030 " id="peeron-call"><span class="name"><a href="#peeron-call">'call'</a><span
  386. class="tag type event">event</span><span class="tag beta_030">beta (0.3.0)</span><span
  387. class="snippet">peer.on('call', function(<a href='#mediaconnection'>mediaConnection</a>) { ...
  388. });</span></span>
  389. <p class="description">Emitted when a remote peer attempts to call you. The emitted
  390. <code>mediaConnection</code> is not yet active; you must first answer the call (<a
  391. href='#mediaconnection-answer'><code>mediaConnection.answer([stream]);</code></a>). Then, you can listen
  392. for the <a href='#mediaconnection-on'><code>stream</code></a> event.</p>
  393. </div>
  394. <div class="child " id="peeron-close"><span class="name"><a href="#peeron-close">'close'</a><span
  395. class="tag type event">event</span><span class="snippet">peer.on('close', function() { ...
  396. });</span></span>
  397. <p class="description">Emitted when the peer is <a href='#peerdestroy'>destroyed</a> and can no longer accept
  398. or create any new connections. At this time, the peer's connections will all be closed. <span class='tip'>To
  399. be extra certain that peers clean up correctly, we recommend calling <code>peer.destroy()</code> on a peer
  400. when it is no longer needed.</span></p>
  401. </div>
  402. <div class="child " id="peeron-disconnected"><span class="name"><a
  403. href="#peeron-disconnected">'disconnected'</a><span class="tag type event">event</span><span
  404. class="snippet">peer.on('disconnected', function() { ... });</span></span>
  405. <p class="description">Emitted when the peer is disconnected from the signalling server, either <a
  406. href='#peerdisconnect'>manually</a> or because the connection to the signalling server was lost. When a
  407. peer is disconnected, its existing connections will stay alive, but the peer cannot accept or create any new
  408. connections. You can reconnect to the server by calling <a
  409. href='#peerreconnect'><code>peer.reconnect()</code></a>.</p>
  410. </div>
  411. <div class="child " id="peeron-error"><span class="name"><a href="#peeron-error">'error'</a><span
  412. class="tag type event">event</span><span class="snippet">peer.on('error', function(err) { ...
  413. });</span></span>
  414. <p class="description">Errors on the peer are <strong>almost always fatal</strong> and will destroy the peer.
  415. Errors from the underlying socket and PeerConnections are forwarded here.<br><br>These come in the following
  416. <code>err.type</code> flavors:</p>
  417. <div class="children">
  418. <div class="child fatal " id="peeron-error-browser-incompatible"><span class="name"><a
  419. href="#peeron-error-browser-incompatible">'browser-incompatible'</a><span
  420. class="tag type Error">Error</span><span class="tag fatal">fatal</span></span>
  421. <p class="description">The client's browser does not support some or all WebRTC features that you are
  422. trying to use.</p>
  423. </div>
  424. <div class="child " id="peeron-error-disconnected"><span class="name"><a
  425. href="#peeron-error-disconnected">'disconnected'</a><span class="tag type Error">Error</span></span>
  426. <p class="description">You've already disconnected this peer from the server and can no longer make any
  427. new connections on it.</p>
  428. </div>
  429. <div class="child fatal " id="peeron-error-invalid-id"><span class="name"><a
  430. href="#peeron-error-invalid-id">'invalid-id'</a><span class="tag type Error">Error</span><span
  431. class="tag fatal">fatal</span></span>
  432. <p class="description">The ID passed into the Peer constructor contains illegal characters.</p>
  433. </div>
  434. <div class="child fatal " id="peeron-error-invalid-key"><span class="name"><a
  435. href="#peeron-error-invalid-key">'invalid-key'</a><span class="tag type Error">Error</span><span
  436. class="tag fatal">fatal</span></span>
  437. <p class="description">The API key passed into the Peer constructor contains illegal characters or is not
  438. in the system (cloud server only).</p>
  439. </div>
  440. <div class="child " id="peeron-error-network"><span class="name"><a
  441. href="#peeron-error-network">'network'</a><span class="tag type Error">Error</span></span>
  442. <p class="description">Lost or cannot establish a connection to the signalling server.</p>
  443. </div>
  444. <div class="child " id="peeron-error-peer-unavailable"><span class="name"><a
  445. href="#peeron-error-peer-unavailable">'peer-unavailable'</a><span
  446. class="tag type Error">Error</span></span>
  447. <p class="description">The peer you're trying to connect to does not exist.</p>
  448. </div>
  449. <div class="child fatal " id="peeron-error-ssl-unavailable"><span class="name"><a
  450. href="#peeron-error-ssl-unavailable">'ssl-unavailable'</a><span
  451. class="tag type Error">Error</span><span class="tag fatal">fatal</span></span>
  452. <p class="description">PeerJS is being used securely, but the cloud server does not support SSL. Use a
  453. custom PeerServer.</p>
  454. </div>
  455. <div class="child fatal " id="peeron-error-server-error"><span class="name"><a
  456. href="#peeron-error-server-error">'server-error'</a><span class="tag type Error">Error</span><span
  457. class="tag fatal">fatal</span></span>
  458. <p class="description">Unable to reach the server.</p>
  459. </div>
  460. <div class="child fatal " id="peeron-error-socket-error"><span class="name"><a
  461. href="#peeron-error-socket-error">'socket-error'</a><span class="tag type Error">Error</span><span
  462. class="tag fatal">fatal</span></span>
  463. <p class="description">An error from the underlying socket.</p>
  464. </div>
  465. <div class="child fatal " id="peeron-error-socket-closed"><span class="name"><a
  466. href="#peeron-error-socket-closed">'socket-closed'</a><span class="tag type Error">Error</span><span
  467. class="tag fatal">fatal</span></span>
  468. <p class="description">The underlying socket closed unexpectedly.</p>
  469. </div>
  470. <div class="child sometimes_fatal " id="peeron-error-unavailable-id"><span class="name"><a
  471. href="#peeron-error-unavailable-id">'unavailable-id'</a><span class="tag type Error">Error</span><span
  472. class="tag sometimes_fatal">sometimes fatal</span></span>
  473. <p class="description">The ID passed into the Peer constructor is already taken.<span class='warn'>This
  474. error is not fatal if your peer has open peer-to-peer connections. This can happen if you attempt to
  475. <a href='#peerreconnect'>reconnect</a> a peer that has been <a href='#peerdisconnect'>disconnected
  476. from the server</a>, but its old ID has now been taken.</span></p>
  477. </div>
  478. <div class="child " id="peeron-error-webrtc"><span class="name"><a
  479. href="#peeron-error-webrtc">'webrtc'</a><span class="tag type Error">Error</span></span>
  480. <p class="description">Native WebRTC errors.</p>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. <div class="toplevel " id="peerdisconnect"><span class="name"><a href="#peerdisconnect">peer.disconnect</a><span
  487. class="tag type method">method</span><span class="snippet">peer.disconnect();</span></span>
  488. <p class="description">Close the connection to the server, leaving all existing data and media connections intact.
  489. <a href='#peerdisconnected'><code>peer.disconnected</code></a> will be set to <code>true</code> and the <a
  490. href='#peeron-disconnected'><code>disconnected</code></a> event will fire.<span class='warn'>This cannot be
  491. undone; the respective peer object will no longer be able to create or receive any connections and its ID will
  492. be forfeited on the (cloud) server.</span></p>
  493. </div>
  494. <div class="toplevel " id="peerreconnect"><span class="name"><a href="#peerreconnect">peer.reconnect</a><span
  495. class="tag type method">method</span><span class="snippet">peer.reconnect();</span></span>
  496. <p class="description">Attempt to reconnect to the server with the peer's old ID. Only <a
  497. href='#peerdisconnect'>disconnected peers</a> can be reconnected. Destroyed peers cannot be reconnected. If
  498. the connection fails (as an example, if the peer's old ID is now taken), the peer's existing connections will
  499. not close, but any associated errors events will fire.</p>
  500. </div>
  501. <div class="toplevel " id="peerdestroy"><span class="name"><a href="#peerdestroy">peer.destroy</a><span
  502. class="tag type method">method</span><span class="snippet">peer.destroy();</span></span>
  503. <p class="description">Close the connection to the server and terminate all existing connections. <a
  504. href='#peerdestroyed'><code>peer.destroyed</code></a> will be set to <code>true</code>.<span class='warn'>This
  505. cannot be undone; the respective peer object will no longer be able to create or receive any connections, its
  506. ID will be forfeited on the (cloud) server, and all of its data and media connections will be closed.</span>
  507. </p>
  508. </div>
  509. <div class="toplevel " id="peerid"><span class="name"><a href="#peerid">peer.id</a><span
  510. class="tag type string">string</span></span>
  511. <p class="description">The brokering ID of this peer. If no ID was specified in <a href='#peer'>the
  512. constructor</a>, this will be <code>undefined</code> until the <a href='#peeron-open'><code>open</code></a>
  513. event is emitted.</p>
  514. </div>
  515. <div class="toplevel " id="peerconnections"><span class="name"><a href="#peerconnections">peer.connections</a><span
  516. class="tag type object">object</span></span>
  517. <p class="description">A hash of all connections associated with this peer, keyed by the remote peer's ID.<span
  518. class='tip'>We recommend keeping track of connections yourself rather than relying on this hash.</span></p>
  519. </div>
  520. <div class="toplevel " id="peerdisconnected"><span class="name"><a
  521. href="#peerdisconnected">peer.disconnected</a><span class="tag type boolean">boolean</span></span>
  522. <p class="description"><code>false</code> if there is an active connection to the PeerServer.</p>
  523. </div>
  524. <div class="toplevel " id="peerdestroyed"><span class="name"><a href="#peerdestroyed">peer.destroyed</a><span
  525. class="tag type boolean">boolean</span></span>
  526. <p class="description"><code>true</code> if this peer and all of its connections can no longer be used.</p>
  527. </div>
  528. <div class="toplevel " id="dataconnection"><span class="name"><a href="#dataconnection">DataConnection</a><span
  529. class="tag type class">class</span></span>
  530. <p class="description">Wraps WebRTC's DataChannel. To get one, use <a
  531. href='#peerconnect'><code>peer.connect</code></a> or listen for the <a
  532. href='#peeron-connect'><code>connect</code></a> event.</p>
  533. <div class="children">
  534. <div class="child " id="dataconnection-send"><span class="name"><a href="#dataconnection-send">.send</a><span
  535. class="tag type method">method</span><span class="snippet">dataConnection.send(data);</span></span>
  536. <p class="description"><code>data</code> is serialized by BinaryPack by default and sent to the remote peer.
  537. </p>
  538. <div class="children">
  539. <div class="child " id="dataconnection-send-data"><span class="name"><a
  540. href="#dataconnection-send-data">data</a></span>
  541. <p class="description">You can send any type of data, including objects, strings, and blobs.</p>
  542. </div>
  543. </div>
  544. </div>
  545. <div class="child " id="dataconnection-close"><span class="name"><a href="#dataconnection-close">.close</a><span
  546. class="tag type method">method</span><span class="snippet">dataConnection.close();</span></span>
  547. <p class="description">Closes the data connection gracefully, cleaning up underlying DataChannels and
  548. PeerConnections.</p>
  549. </div>
  550. <div class="child " id="dataconnection-on"><span class="name"><a href="#dataconnection-on">.on</a><span
  551. class="tag type method">method</span><span class="snippet">dataConnection.on(event,
  552. callback);</span></span>
  553. <p class="description">Set listeners for data connection events.</p>
  554. <div class="children">
  555. <div class="child " id="dataconnection-on-data"><span class="name"><a
  556. href="#dataconnection-on-data">'data'</a><span class="tag type event">event</span><span
  557. class="snippet">dataConnection.on('data', function(data) { ... });</span></span>
  558. <p class="description">Emitted when data is received from the remote peer.</p>
  559. </div>
  560. <div class="child " id="dataconnection-on-open"><span class="name"><a
  561. href="#dataconnection-on-open">'open'</a><span class="tag type event">event</span><span
  562. class="snippet">dataConnection.on('open', function() { ... });</span></span>
  563. <p class="description">Emitted when the connection is established and ready-to-use.</p>
  564. </div>
  565. <div class="child " id="dataconnection-on-close"><span class="name"><a
  566. href="#dataconnection-on-close">'close'</a><span class="tag type event">event</span><span
  567. class="snippet">dataConnection.on('close', function() { ... });</span></span>
  568. <p class="description">Emitted when either you or the remote peer closes the data connection.<span
  569. class='warn'>Firefox does not yet support this event.</span></p>
  570. </div>
  571. <div class="child " id="dataconnection-on-error"><span class="name"><a
  572. href="#dataconnection-on-error">'error'</a><span class="tag type event">event</span><span
  573. class="snippet">dataConnection.on('error', function(err) { ... });</span></span></div>
  574. </div>
  575. </div>
  576. <div class="child " id="dataconnection-datachannel"><span class="name"><a
  577. href="#dataconnection-datachannel">.dataChannel</a><span class="tag type object">object</span></span>
  578. <p class="description">A reference to the RTCDataChannel object associated with the connection.</p>
  579. </div>
  580. <div class="child " id="dataconnection-label"><span class="name"><a href="#dataconnection-label">.label</a><span
  581. class="tag type string">string</span></span>
  582. <p class="description">The optional label passed in or assigned by PeerJS when the connection was initiated.
  583. </p>
  584. </div>
  585. <div class="child " id="dataconnection-metadata"><span class="name"><a
  586. href="#dataconnection-metadata">.metadata</a></span>
  587. <p class="description">Any type of metadata associated with the connection, passed in by whoever initiated the
  588. connection.</p>
  589. </div>
  590. <div class="child " id="dataconnection-open"><span class="name"><a href="#dataconnection-open">.open</a><span
  591. class="tag type boolean">boolean</span></span>
  592. <p class="description">This is true if the connection is open and ready for read/write.</p>
  593. </div>
  594. <div class="child " id="dataconnection-peerconnection"><span class="name"><a
  595. href="#dataconnection-peerconnection">.peerConnection</a><span
  596. class="tag type object">object</span></span>
  597. <p class="description">A reference to the RTCPeerConnection object associated with the connection.</p>
  598. </div>
  599. <div class="child " id="dataconnection-peer"><span class="name"><a href="#dataconnection-peer">.peer</a><span
  600. class="tag type string">string</span></span>
  601. <p class="description">The ID of the peer on the other end of this connection.</p>
  602. </div>
  603. <div class="child " id="dataconnection-reliable"><span class="name"><a
  604. href="#dataconnection-reliable">.reliable</a><span class="tag type boolean">boolean</span></span>
  605. <p class="description">Whether the underlying data channels are reliable; defined when the connection was
  606. initiated.</p>
  607. </div>
  608. <div class="child " id="dataconnection-serialization"><span class="name"><a
  609. href="#dataconnection-serialization">.serialization</a><span class="tag type string">string</span></span>
  610. <p class="description">The serialization format of the data sent over the connection. Can be
  611. <code>binary</code> (default), <code>binary-utf8</code>, <code>json</code>, or <code>none</code>.</p>
  612. </div>
  613. <div class="child " id="dataconnection-type"><span class="name"><a href="#dataconnection-type">.type</a><span
  614. class="tag type string">string</span></span>
  615. <p class="description">For data connections, this is always <code>'data'</code>.</p>
  616. </div>
  617. <div class="child " id="dataconnection-buffersize"><span class="name"><a
  618. href="#dataconnection-buffersize">.bufferSize</a><span class="tag type number">number</span></span>
  619. <p class="description">The number of messages queued to be sent once the browser buffer is no longer full.</p>
  620. </div>
  621. </div>
  622. </div>
  623. <div class="toplevel beta_030 " id="mediaconnection"><span class="name"><a
  624. href="#mediaconnection">MediaConnection</a><span class="tag type class">class</span><span
  625. class="tag beta_030">beta (0.3.0)</span></span>
  626. <p class="description">Wraps WebRTC's media streams. To get one, use <a
  627. href='#peercall'><code>peer.call</code></a> or listen for the <a href='#peeron-call'><code>call</code></a>
  628. event.</p>
  629. <div class="children">
  630. <div class="child " id="mediaconnection-answer"><span class="name"><a
  631. href="#mediaconnection-answer">.answer</a><span class="tag type method">method</span><span
  632. class="snippet">mediaConnection.answer([stream],[options]);</span></span>
  633. <p class="description">When recieving a <a href='#peeron-call'><code>call</code></a> event on a peer, you can
  634. call <code>.answer</code> on the media connection provided by the callback to accept the call and optionally
  635. send your own media stream.</p>
  636. <div class="children">
  637. <div class="child " id="mediaconnection-answer-stream"><span class="name"><a
  638. href="#mediaconnection-answer-stream"><span class="optional"><span class="bracket">[</span>stream<span
  639. class="bracket">]</span></span></a><span class="tag type MediaStream">MediaStream</span></span>
  640. <p class="description">A WebRTC media stream from <a
  641. href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia'><code>getUserMedia</code></a>.
  642. </p>
  643. </div>
  644. <div class="child " id="mediaconnection-answer-options"><span class="name"><a
  645. href="#mediaconnection-answer-options"><span class="optional"><span
  646. class="bracket">[</span>options<span class="bracket">]</span></span></a><span
  647. class="tag type object">object</span></span>
  648. <div class="children">
  649. <div class="child " id="mediaconnection-answer-options-sdptransform"><span class="name"><a
  650. href="#mediaconnection-answer-options-sdptransform">sdpTransform</a><span
  651. class="tag type method">method</span></span>
  652. <p class="description">Function which runs before create answer to modify sdp answer message.</p>
  653. </div>
  654. </div>
  655. </div>
  656. </div>
  657. </div>
  658. <div class="child " id="mediaconnection-close"><span class="name"><a
  659. href="#mediaconnection-close">.close</a><span class="tag type method">method</span><span
  660. class="snippet">mediaConnection.close();</span></span>
  661. <p class="description">Closes the media connection.</p>
  662. </div>
  663. <div class="child " id="mediaconnection-on"><span class="name"><a href="#mediaconnection-on">.on</a><span
  664. class="tag type method">method</span><span class="snippet">mediaConnection.on(event,
  665. callback);</span></span>
  666. <p class="description">Set listeners for media connection events.</p>
  667. <div class="children">
  668. <div class="child " id="mediaconnection-on-stream"><span class="name"><a
  669. href="#mediaconnection-on-stream">'stream'</a><span class="tag type event">event</span><span
  670. class="snippet">mediaConnection.on('stream', function(stream) { ... });</span></span>
  671. <p class="description">Emitted when a remote peer adds a <code>stream</code>.</p>
  672. </div>
  673. <div class="child " id="mediaconnection-on-close"><span class="name"><a
  674. href="#mediaconnection-on-close">'close'</a><span class="tag type event">event</span><span
  675. class="snippet">mediaConnection.on('close', function() { ... });</span></span>
  676. <p class="description">Emitted when either you or the remote peer closes the media connection. <span
  677. class='warn'>Firefox does not yet support this event.</span></p>
  678. </div>
  679. <div class="child " id="mediaconnection-on-error"><span class="name"><a
  680. href="#mediaconnection-on-error">'error'</a><span class="tag type event">event</span><span
  681. class="snippet">mediaConnection.on('error', function(err) { ... });</span></span></div>
  682. </div>
  683. </div>
  684. <div class="child " id="mediaconnection-open"><span class="name"><a href="#mediaconnection-open">.open</a><span
  685. class="tag type boolean">boolean</span></span>
  686. <p class="description">Whether the media connection is active (e.g. your call has been answered). You can
  687. check this if you want to set a maximum wait time for a one-sided call.</p>
  688. </div>
  689. <div class="child " id="mediaconnection-metadata"><span class="name"><a
  690. href="#mediaconnection-metadata">.metadata</a></span>
  691. <p class="description">Any type of metadata associated with the connection, passed in by whoever initiated the
  692. connection.</p>
  693. </div>
  694. <div class="child " id="mediaconnection-peer"><span class="name"><a href="#mediaconnection-peer">.peer</a><span
  695. class="tag type string">string</span></span>
  696. <p class="description">The ID of the peer on the other end of this connection.</p>
  697. </div>
  698. <div class="child " id="mediaconnection-type"><span class="name"><a href="#mediaconnection-type">.type</a><span
  699. class="tag type string">string</span></span>
  700. <p class="description">For media connections, this is always <code>'media'</code>.</p>
  701. </div>
  702. </div>
  703. </div>
  704. <div class="toplevel utility " id="util"><span class="name"><a href="#util">util</a><span
  705. class="tag type object">object</span><span class="tag utility">utility</span></span>
  706. <p class="description">Provides a variety of helpful utilities.<span class='warn'>Only the utilities documented
  707. here are guaranteed to be present on <code>util</code>. Undocumented utilities can be removed without warning.
  708. We don't consider these to be 'breaking changes.'</span></p>
  709. <div class="children">
  710. <div class="child " id="util-browser"><span class="name"><a href="#util-browser">.browser</a><span
  711. class="tag type string">string</span><span class="snippet">if (util.browser === 'Firefox') { /* OK to peer
  712. with Firefox peers. */ }</span></span>
  713. <p class="description">The current browser. This property can be useful in determining whether or not two
  714. peers can connect. For example, as of now data connections are not yet interoperable between major browsers.
  715. <code>util.browser</code> can currently have the values 'Firefox', 'Chrome', 'Unsupported', or 'Supported'
  716. (unknown WebRTC-compatible browser).</p>
  717. </div>
  718. <div class="child " id="util-supports"><span class="name"><a href="#util-supports">.supports</a><span
  719. class="tag type object">object</span><span class="snippet">if (util.supports.data) { /* OK to start a data
  720. connection. */ }</span></span>
  721. <p class="description">A hash of WebRTC features mapped to booleans that correspond to whether the feature is
  722. supported by the current browser.<span class='warn'>Only the properties documented here are guaranteed to be
  723. present on <code>util.supports</code>.</span></p>
  724. <div class="children">
  725. <div class="child " id="util-supports-audiovideo"><span class="name"><a
  726. href="#util-supports-audiovideo">.audioVideo</a><span class="tag type boolean">boolean</span></span>
  727. <p class="description">True if the current browser supports media streams and PeerConnection.</p>
  728. </div>
  729. <div class="child " id="util-supports-data"><span class="name"><a href="#util-supports-data">.data</a><span
  730. class="tag type boolean">boolean</span></span>
  731. <p class="description">True if the current browser supports DataChannel and PeerConnection.</p>
  732. </div>
  733. <div class="child " id="util-supports-binary"><span class="name"><a
  734. href="#util-supports-binary">.binary</a><span class="tag type boolean">boolean</span></span>
  735. <p class="description">True if the current browser supports binary DataChannels.</p>
  736. </div>
  737. <div class="child " id="util-supports-reliable"><span class="name"><a
  738. href="#util-supports-reliable">.reliable</a><span class="tag type boolean">boolean</span></span>
  739. <p class="description">True if the current browser supports reliable DataChannels.</p>
  740. </div>
  741. </div>
  742. </div>
  743. </div>
  744. </div>
  745. </section>
  746. </body>