index.html 48 KB

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