oleg
/
peerjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753
							<head>
  <title>PeerJS Documentation</title>
  <meta name="viewport" content="width=device-width, maximum-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
  <link href="/css/docs.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/docs.js"></script>
</head>

<body>
  <section class="start">
    <h1>
      <a href="/">PeerJS</a>
      <span class="title">docs</span>
    </h1>
    <p>
      <br>PeerJS simplifies peer-to-peer data, video, and audio calls.</p>
    <p>This guide will show you the basic concepts of the PeerJS API.</p>
    <h2>Setup</h2>
    <h3>1. Include the Javascript client</h3>
    <p>Add the PeerJS client library to your webpage.</p>
    <pre>&lt;script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"&gt;&lt;/script&gt;</pre>
    <p>If you prefer, you can host it yourself:
      <a download href="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js">peerjs.min.js</a>, or
      <a href="https://github.com/peers/peerjs">fork us on Github</a>.</p>
    <h3>2. Create the Peer object</h3>
    <p>The Peer object is where we create and receive connections.</p>
    <pre>var peer = new Peer();</pre>
    <p>PeerJS uses PeerServer for session
      metadata and candidate signaling. You can also
      <a href="https://github.com/peers/peerjs-server">run your own PeerServer</a> if you don't like the cloud.</p>
    <p>We're now ready to start making connections!</p>

    <h2>Usage</h2>
    <p>Every Peer object is assigned a random, unique ID when it's created.</p>
    <pre>peer.on('open', function(id) {
  console.log('My peer ID is: ' + id);
});</pre>
    <p>When we want to connect to another peer, we'll need to know their peer id. You're in charge of communicating the
      peer
      IDs between users of your site. Optionally, you can pass in your own IDs to the
      <a href="#peer">
        <code>Peer</code> constructor
      </a>.</p>

    <p>Read the
      <a href="#peer">Peer API reference</a> for complete information on its
      <a href="#peer-options">options</a>, methods,
      <a href="#peeron">events</a>, and
      <a href="#peeron-error">error handling</a>.</p>

    <h3>Data connections</h3>
    <p>Start a data connection by calling
      <code>peer.connect</code> with the peer ID of the destination peer. Anytime another peer attempts to connect to
      your peer ID, you'll receive
      a
      <code>connection</code> event. </p>
    <div class="two-col">
      <div class="col col-header">Start connection</div>
      <div class="col col-header">Receive connection</div>
      <div class="col">
        <pre>var conn = peer.connect('dest-peer-id');</pre>
      </div>
      <div class="col">
        <pre>peer.on('connection', function(conn) { ... });</pre>
      </div>
      <div class="clear"></div>
    </div>
    <p>
      <code>peer.connect</code> and the callback of the
      <code>connection</code> event will both provide a
      <code>DataConnection</code> object. This object will allow you to send and receive data:</p>
    <pre>conn.on('open', function() {
  // Receive messages
  conn.on('data', function(data) {
    console.log('Received', data);
  });

  // Send messages
  conn.send('Hello!');
});</pre>
    <p>Read the
      <a href="#dataconnection">DataConnection API reference</a> for complete details on its methods and events.</p>
    <h3>Video/audio calls</h3>
    <p>Call another peer by calling
      <code>peer.call</code> with the peer ID of the destination peer. When a peer calls you, the
      <code>call</code> event is emitted.</p>
    <p>Unlike data connections, when receiving a
      <code>call</code> event, the call must be answered or no connection is established.</p>
    <div class="two-col">
      <div class="col col-header">Start call</div>
      <div class="col col-header">Answer call</div>
      <div class="col">
        <pre>// Call a peer, providing our mediaStream
var call = peer.call('dest-peer-id',
  mediaStream);

</pre>
      </div>
      <div class="col">
        <pre>peer.on('call', function(call) {
  // Answer the call, providing our mediaStream
  call.answer(mediaStream);
});</pre>
      </div>
      <div class="clear"></div>
    </div>
    <p>When calling or answering a call, a MediaStream should be provided. The MediaStream represents the local video
      (webcam)
      or audio stream and can be obtained with some (browser-specific) version of
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia">
        <code>navigator.getUserMedia</code>
      </a>. When answering a call, the MediaStream is optional and if none is provided then a one-way call is
      established.
      Once the call is established, its
      <code>open</code> property is set to true.</p>
    <p>
      <code>peer.call</code> and the callback of the
      <code>call</code> event provide a MediaConnection object. The MediaConnection object itself emits a
      <code>stream</code> event whose callback includes the video/audio stream of the other peer.</p>
    <pre>call.on('stream', function(stream) {
  // `stream` is the MediaStream of the remote peer.
  // Here you'd add it to an HTML video/canvas element.
});</pre>
    <p>Read the
      <a href="#mediaconnection">MediaConnection API reference</a> for complete details on its methods and events.</p>

    <h2>Common questions</h2>

    <h3>What kind of data can I send?</h3>

    <p>PeerJS has the
      <a href="https://github.com/binaryjs/js-binarypack">BinaryPack</a>
      serialization format built-in. This means you can send any JSON type as well as binary Blobs and ArrayBuffers.
      Simply send
      arbitrary data and you'll get it out the other side:</p>
    <pre>
conn.send({
  strings: 'hi!',
  numbers: 150,
  arrays: [1,2,3],
  evenBinary: new Blob([1,2,3]),
  andMore: {bool: true}
});</pre>

    <h3>Are there any caveats?</h3>

    <p>A small percentage of users are behind symmetric NATs. When two symmetric NAT users try to connect to each other,
      NAT
      traversal is impossible and no connection can be made. A workaround is to proxy through the connection through a
      TURN
      server. The PeerServer cloud service provides a free TURN server. This will allow your PeerJS app to work
      seamlessly for this situation</p>
    <h3>How do I use a TURN server?</h3>
    <p>When creating your Peer object, pass in the ICE servers as the config key of the options hash.</p>
    <pre>
var peer = new Peer({
  config: {'iceServers': [
    { url: 'stun:stun.l.google.com:19302' },
    { url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo' }
  ]} /* Sample servers, please use appropriate ones */
});
</pre>
    <h3>What if my peer has not yet connected to the server when I attempt to connect to it?</h3>

    <p>When you try to connect to a peer, PeerServer will hold a connection offer for up to 5 seconds before rejecting
      it. This
      is useful if you want to reconnect to a peer as it disconnects and reconnects rapidly between web pages.</p>

    <h3>Why am I unable to connect?</h3>
    <p>You could be behind a symmetric NAT, in which case you'll need to set up a TURN server.</p>
    <p>Another possible issue is your network blocking port 443, which the PeerServer cloud runs on. In this you must
      use your
      own PeerServer running on an appropriate port instead of the cloud service.</p>

    <h3>What about latency/bandwidth?</h3>

    <p>Data sent between the two peers do not touch any other servers, so the connection speed is limited only by the
      upload
      and download rates of the two peers. This also means you don't have the additional latency of an intermediary
      server.</p>
    <p>The latency to establish a connection can be split into two components: the brokering of data and the
      identification
      of clients. PeerJS has been designed to minimize the time you spend in these two areas. For brokering, data is
      sent
      through an XHR streaming request before a WebSocket connection is established, then through WebSockets. For client
      identification, we provide you the ability to pass in your own peer IDs, thus eliminating the RTT for retrieving
      an
      ID from the server.</p>

    <h3>More questions?</h3>
    <p>
      <a href="https://t.me/joinchat/ENhPuhTvhm8WlIxTjQf7Og">Discuss PeerJS on our Telegram channel.</a>
      <br>
      <br>
    </p>
  </section>

  <header class="left">
    <h2>API Reference
      <a class="hide icon">&laquo;</a>
      <a class="show icon">&raquo;</a>
    </h2>
  </header>
  <header class="right">
    <h2>Getting Started</h2>
  </header>

  <section class="api">
    <div class="toplevel " id="peer"><span class="name"><a href="#peer">Peer</a><span
          class="tag type constructor">constructor</span><span class="snippet">const peer = new Peer([id],
          [options]);</span></span>
      <p class="description">A peer can connect to other peers and listen for connections.</p>
      <div class="children">
        <div class="child " id="peer-id"><span class="name"><a href="#peer-id"><span class="optional"><span
                  class="bracket">[</span>id<span class="bracket">]</span></span></a><span
              class="tag type string">string</span></span>
          <p class="description">Other peers can connect to this peer using the provided ID. If no ID is given, one will
            be generated by the brokering server. The ID must start and end with an alphanumeric character (lower or
            upper case character or a digit). In the middle of the ID spaces, dashes (-) and underscores (_) are
            allowed.<span class='warn'>It's not recommended that you use this ID to identify peers, as it's meant to be
              used for brokering connections only. You're recommended to set the <a
                href='#peerconnect-options'><code>metadata</code></a> option to send other identifying
              information.</span></p>
        </div>
        <div class="child " id="peer-options"><span class="name"><a href="#peer-options"><span class="optional"><span
                  class="bracket">[</span>options<span class="bracket">]</span></span></a><span
              class="tag type object">object</span></span>
          <div class="children">
            <div class="child " id="peer-options-key"><span class="name"><a href="#peer-options-key">key</a><span
                  class="tag type string">string</span></span>
              <p class="description">API key for the cloud PeerServer. This is not used for servers other than
                <code>0.peerjs.com</code>.<span class='warn'>PeerServer cloud runs on port 443. Please ensure it is not
                  blocked or consider running your own PeerServer instead.</span></p>
            </div>
            <div class="child " id="peer-options-host"><span class="name"><a href="#peer-options-host">host</a><span
                  class="tag type string">string</span></span>
              <p class="description">Server host. Defaults to <code>0.peerjs.com</code>. Also accepts <code>'/'</code>
                to signify relative hostname.</p>
            </div>
            <div class="child " id="peer-options-port"><span class="name"><a href="#peer-options-port">port</a><span
                  class="tag type number">number</span></span>
              <p class="description">Server port. Defaults to <code>443</code>.</p>
            </div>
            <div class="child " id="peer-options-pinginterval"><span class="name"><a
                  href="#peer-options-pinginterval">pingInterval</a><span class="tag type number">number</span></span>
              <p class="description">Ping interval in ms. Defaults to <code>5000</code>.</p>
            </div>
            <div class="child " id="peer-options-path"><span class="name"><a href="#peer-options-path">path</a><span
                  class="tag type string">string</span></span>
              <p class="description">The path where your self-hosted PeerServer is running. Defaults to
                <code>'/'</code>.</p>
            </div>
            <div class="child " id="peer-options-secure"><span class="name"><a
                  href="#peer-options-secure">secure</a><span class="tag type boolean">boolean</span></span>
              <p class="description"><code>true</code> if you're using SSL.<span class='tip'>Note that our cloud-hosted
                  server and assets may not support SSL.</span></p>
            </div>
            <div class="child " id="peer-options-config"><span class="name"><a
                  href="#peer-options-config">config</a><span class="tag type object">object</span></span>
              <p class="description">Configuration hash passed to RTCPeerConnection. This hash contains any custom
                ICE/TURN server configuration. Defaults to
                <code>{ 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }, { 'urls': 'turn:0.peerjs.com:3478', username: 'peerjs', credential: 'peerjsp' }], 'sdpSemantics': 'unified-plan' }</code>
              </p>
            </div>
            <div class="child " id="peer-options-debug"><span class="name"><a href="#peer-options-debug">debug</a><span
                  class="tag type number">number</span></span>
              <p class="description">Prints log messages depending on the debug level passed in. Defaults to
                <code>0</code>.</p>
              <div class="children">
                <div class="child " id="peer-options-debug-0"><span class="name"><a
                      href="#peer-options-debug-0">0</a></span>
                  <p class="description">Prints no logs.</p>
                </div>
                <div class="child " id="peer-options-debug-1"><span class="name"><a
                      href="#peer-options-debug-1">1</a></span>
                  <p class="description">Prints only errors.</p>
                </div>
                <div class="child " id="peer-options-debug-2"><span class="name"><a
                      href="#peer-options-debug-2">2</a></span>
                  <p class="description">Prints errors and warnings.</p>
                </div>
                <div class="child " id="peer-options-debug-3"><span class="name"><a
                      href="#peer-options-debug-3">3</a></span>
                  <p class="description">Prints all logs.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toplevel " id="peerconnect"><span class="name"><a href="#peerconnect">peer.connect</a><span
          class="tag type method">method</span><span class="snippet">const <a href='#dataconnection'>dataConnection</a>
          = peer.connect(id, [options]);</span></span>
      <p class="description">Connects to the remote peer specified by <code>id</code> and returns a data connection. Be
        sure to listen on the <a href='#peeron-error'><code>error</code></a> event in case the connection fails.</p>
      <div class="children">
        <div class="child " id="peerconnect-id"><span class="name"><a href="#peerconnect-id">id</a><span
              class="tag type string">string</span></span>
          <p class="description">The brokering ID of the remote peer (their <a href='#peerid'><code>peer.id</code></a>).
          </p>
        </div>
        <div class="child " id="peerconnect-options"><span class="name"><a href="#peerconnect-options"><span
                class="optional"><span class="bracket">[</span>options<span class="bracket">]</span></span></a><span
              class="tag type object">object</span></span>
          <div class="children">
            <div class="child " id="peerconnect-options-label"><span class="name"><a
                  href="#peerconnect-options-label">label</a><span class="tag type string">string</span></span>
              <p class="description">A unique label by which you want to identify this data connection. If left
                unspecified, a label will be generated at random. Can be accessed with <a
                  href='#dataconnection-label'><code>dataConnection.label</code></a>.</p>
            </div>
            <div class="child " id="peerconnect-options-metadata"><span class="name"><a
                  href="#peerconnect-options-metadata">metadata</a></span>
              <p class="description">Metadata associated with the connection, passed in by whoever initiated the
                connection. Can be accessed with <a
                  href='#dataconnection-metadata'><code>dataConnection.metadata</code></a>. Can be any serializable
                type.</p>
            </div>
            <div class="child " id="peerconnect-options-serialization"><span class="name"><a
                  href="#peerconnect-options-serialization">serialization</a><span
                  class="tag type string">string</span></span>
              <p class="description">Can be <code>binary</code> (default), <code>binary-utf8</code>, <code>json</code>,
                or <code>none</code>. Can be accessed with <a
                  href='#dataconnection-serialization'><code>dataConnection.serialization</code></a>.<span
                  class='tip'><code>binary-utf8</code> will take a performance hit because of the way UTF8 strings are
                  packed into binary format.</span></p>
            </div>
            <div class="child " id="peerconnect-options-reliable"><span class="name"><a
                  href="#peerconnect-options-reliable">reliable</a><span class="tag type boolean">boolean</span></span>
              <p class="description">Whether the underlying data channels should be reliable (e.g. for large file
                transfers) or not (e.g. for gaming or streaming). Defaults to <code>false</code>.<span
                  class='warn'>Setting reliable to true will use a shim for incompatible browsers (Chrome 30 and below
                  only) and thus may not offer full performance.</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toplevel " id="peercall"><span class="name"><a href="#peercall">peer.call</a><span
          class="tag type method">method</span><span class="snippet">const <a
            href='#mediaconnection'>mediaConnection</a> = peer.call(id, stream, [options]);</span></span>
      <p class="description">Calls the remote peer specified by <code>id</code> and returns a media connection. Be sure
        to listen on the <a href='#peeron-error'><code>error</code></a> event in case the connection fails.</p>
      <div class="children">
        <div class="child " id="peercall-id"><span class="name"><a href="#peercall-id">id</a><span
              class="tag type string">string</span></span>
          <p class="description">The brokering ID of the remote peer (their <a href='#peerid'><code>peer.id</code></a>).
          </p>
        </div>
        <div class="child " id="peercall-stream"><span class="name"><a href="#peercall-stream">stream</a><span
              class="tag type MediaStream">MediaStream</span></span>
          <p class="description">The caller's media stream</p>
        </div>
        <div class="child " id="peercall-options"><span class="name"><a href="#peercall-options"><span
                class="optional"><span class="bracket">[</span>options<span class="bracket">]</span></span></a><span
              class="tag type object">object</span></span>
          <div class="children">
            <div class="child " id="peercall-options-metadata"><span class="name"><a
                  href="#peercall-options-metadata">metadata</a></span>
              <p class="description">Metadata associated with the connection, passed in by whoever initiated the
                connection. Can be accessed with <a
                  href='#mediaconnection-metadata'><code>mediaConnection.metadata</code></a>. Can be any serializable
                type.</p>
            </div>
            <div class="child " id="peercall-options-sdptransform"><span class="name"><a
                  href="#peercall-options-sdptransform">sdpTransform</a><span
                  class="tag type method">method</span></span>
              <p class="description">Function which runs before create offer to modify sdp offer message.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toplevel " id="peeron"><span class="name"><a href="#peeron">peer.on</a><span
          class="tag type method">method</span><span class="snippet">peer.on(event, callback);</span></span>
      <p class="description">Set listeners for peer events.</p>
      <div class="children">
        <div class="child " id="peeron-open"><span class="name"><a href="#peeron-open">'open'</a><span
              class="tag type event">event</span><span class="snippet">peer.on('open', function(id) { ...
              });</span></span>
          <p class="description">Emitted when a connection to the PeerServer is established. You may use the peer before
            this is emitted, but messages to the server will be queued. <code>id</code> is the brokering ID of the peer
            (which was either provided in the constructor or assigned by the server).<span class='tip'>You should not
              wait for this event before connecting to other peers if connection speed is important.</span></p>
        </div>
        <div class="child " id="peeron-connection"><span class="name"><a href="#peeron-connection">'connection'</a><span
              class="tag type event">event</span><span class="snippet">peer.on('connection', function(<a
                href='#dataconnection'>dataConnection</a>) { ... });</span></span>
          <p class="description">Emitted when a new data connection is established from a remote peer.</p>
        </div>
        <div class="child " id="peeron-call"><span class="name"><a href="#peeron-call">'call'</a><span
              class="tag type event">event</span><span class="snippet">peer.on('call', function(<a
                href='#mediaconnection'>mediaConnection</a>) { ... });</span></span>
          <p class="description">Emitted when a remote peer attempts to call you. The emitted
            <code>mediaConnection</code> is not yet active; you must first answer the call (<a
              href='#mediaconnection-answer'><code>mediaConnection.answer([stream]);</code></a>). Then, you can listen
            for the <a href='#mediaconnection-on'><code>stream</code></a> event.</p>
        </div>
        <div class="child " id="peeron-close"><span class="name"><a href="#peeron-close">'close'</a><span
              class="tag type event">event</span><span class="snippet">peer.on('close', function() { ...
              });</span></span>
          <p class="description">Emitted when the peer is <a href='#peerdestroy'>destroyed</a> and can no longer accept
            or create any new connections. At this time, the peer's connections will all be closed. <span class='tip'>To
              be extra certain that peers clean up correctly, we recommend calling <code>peer.destroy()</code> on a peer
              when it is no longer needed.</span></p>
        </div>
        <div class="child " id="peeron-disconnected"><span class="name"><a
              href="#peeron-disconnected">'disconnected'</a><span class="tag type event">event</span><span
              class="snippet">peer.on('disconnected', function() { ... });</span></span>
          <p class="description">Emitted when the peer is disconnected from the signalling server, either <a
              href='#peerdisconnect'>manually</a> or because the connection to the signalling server was lost. When a
            peer is disconnected, its existing connections will stay alive, but the peer cannot accept or create any new
            connections. You can reconnect to the server by calling <a
              href='#peerreconnect'><code>peer.reconnect()</code></a>.</p>
        </div>
        <div class="child " id="peeron-error"><span class="name"><a href="#peeron-error">'error'</a><span
              class="tag type event">event</span><span class="snippet">peer.on('error', function(err) { ...
              });</span></span>
          <p class="description">Errors on the peer are <strong>almost always fatal</strong> and will destroy the peer.
            Errors from the underlying socket and PeerConnections are forwarded here.<br><br>These come in the following
            <code>err.type</code> flavors:</p>
          <div class="children">
            <div class="child fatal " id="peeron-error-browser-incompatible"><span class="name"><a
                  href="#peeron-error-browser-incompatible">'browser-incompatible'</a><span
                  class="tag type Error">Error</span><span class="tag fatal">fatal</span></span>
              <p class="description">The client's browser does not support some or all WebRTC features that you are
                trying to use.</p>
            </div>
            <div class="child " id="peeron-error-disconnected"><span class="name"><a
                  href="#peeron-error-disconnected">'disconnected'</a><span class="tag type Error">Error</span></span>
              <p class="description">You've already disconnected this peer from the server and can no longer make any
                new connections on it.</p>
            </div>
            <div class="child fatal " id="peeron-error-invalid-id"><span class="name"><a
                  href="#peeron-error-invalid-id">'invalid-id'</a><span class="tag type Error">Error</span><span
                  class="tag fatal">fatal</span></span>
              <p class="description">The ID passed into the Peer constructor contains illegal characters.</p>
            </div>
            <div class="child fatal " id="peeron-error-invalid-key"><span class="name"><a
                  href="#peeron-error-invalid-key">'invalid-key'</a><span class="tag type Error">Error</span><span
                  class="tag fatal">fatal</span></span>
              <p class="description">The API key passed into the Peer constructor contains illegal characters or is not
                in the system (cloud server only).</p>
            </div>
            <div class="child " id="peeron-error-network"><span class="name"><a
                  href="#peeron-error-network">'network'</a><span class="tag type Error">Error</span></span>
              <p class="description">Lost or cannot establish a connection to the signalling server.</p>
            </div>
            <div class="child " id="peeron-error-peer-unavailable"><span class="name"><a
                  href="#peeron-error-peer-unavailable">'peer-unavailable'</a><span
                  class="tag type Error">Error</span></span>
              <p class="description">The peer you're trying to connect to does not exist.</p>
            </div>
            <div class="child fatal " id="peeron-error-ssl-unavailable"><span class="name"><a
                  href="#peeron-error-ssl-unavailable">'ssl-unavailable'</a><span
                  class="tag type Error">Error</span><span class="tag fatal">fatal</span></span>
              <p class="description">PeerJS is being used securely, but the cloud server does not support SSL. Use a
                custom PeerServer.</p>
            </div>
            <div class="child fatal " id="peeron-error-server-error"><span class="name"><a
                  href="#peeron-error-server-error">'server-error'</a><span class="tag type Error">Error</span><span
                  class="tag fatal">fatal</span></span>
              <p class="description">Unable to reach the server.</p>
            </div>
            <div class="child fatal " id="peeron-error-socket-error"><span class="name"><a
                  href="#peeron-error-socket-error">'socket-error'</a><span class="tag type Error">Error</span><span
                  class="tag fatal">fatal</span></span>
              <p class="description">An error from the underlying socket.</p>
            </div>
            <div class="child fatal " id="peeron-error-socket-closed"><span class="name"><a
                  href="#peeron-error-socket-closed">'socket-closed'</a><span class="tag type Error">Error</span><span
                  class="tag fatal">fatal</span></span>
              <p class="description">The underlying socket closed unexpectedly.</p>
            </div>
            <div class="child sometimes_fatal " id="peeron-error-unavailable-id"><span class="name"><a
                  href="#peeron-error-unavailable-id">'unavailable-id'</a><span class="tag type Error">Error</span><span
                  class="tag sometimes_fatal">sometimes fatal</span></span>
              <p class="description">The ID passed into the Peer constructor is already taken.<span class='warn'>This
                  error is not fatal if your peer has open peer-to-peer connections. This can happen if you attempt to
                  <a href='#peerreconnect'>reconnect</a> a peer that has been <a href='#peerdisconnect'>disconnected
                    from the server</a>, but its old ID has now been taken.</span></p>
            </div>
            <div class="child " id="peeron-error-webrtc"><span class="name"><a
                  href="#peeron-error-webrtc">'webrtc'</a><span class="tag type Error">Error</span></span>
              <p class="description">Native WebRTC errors.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toplevel " id="peerdisconnect"><span class="name"><a href="#peerdisconnect">peer.disconnect</a><span
          class="tag type method">method</span><span class="snippet">peer.disconnect();</span></span>
      <p class="description">Close the connection to the server, leaving all existing data and media connections intact.
        <a href='#peerdisconnected'><code>peer.disconnected</code></a> will be set to <code>true</code> and the <a
          href='#peeron-disconnected'><code>disconnected</code></a> event will fire.<span class='warn'>This cannot be
          undone; the respective peer object will no longer be able to create or receive any connections and its ID will
          be forfeited on the (cloud) server.</span></p>
    </div>
    <div class="toplevel " id="peerreconnect"><span class="name"><a href="#peerreconnect">peer.reconnect</a><span
          class="tag type method">method</span><span class="snippet">peer.reconnect();</span></span>
      <p class="description">Attempt to reconnect to the server with the peer's old ID. Only <a
          href='#peerdisconnect'>disconnected peers</a> can be reconnected. Destroyed peers cannot be reconnected. If
        the connection fails (as an example, if the peer's old ID is now taken), the peer's existing connections will
        not close, but any associated errors events will fire.</p>
    </div>
    <div class="toplevel " id="peerdestroy"><span class="name"><a href="#peerdestroy">peer.destroy</a><span
          class="tag type method">method</span><span class="snippet">peer.destroy();</span></span>
      <p class="description">Close the connection to the server and terminate all existing connections. <a
          href='#peerdestroyed'><code>peer.destroyed</code></a> will be set to <code>true</code>.<span class='warn'>This
          cannot be undone; the respective peer object will no longer be able to create or receive any connections, its
          ID will be forfeited on the (cloud) server, and all of its data and media connections will be closed.</span>
      </p>
    </div>
    <div class="toplevel " id="peerid"><span class="name"><a href="#peerid">peer.id</a><span
          class="tag type string">string</span></span>
      <p class="description">The brokering ID of this peer. If no ID was specified in <a href='#peer'>the
          constructor</a>, this will be <code>undefined</code> until the <a href='#peeron-open'><code>open</code></a>
        event is emitted.</p>
    </div>
    <div class="toplevel " id="peerconnections"><span class="name"><a href="#peerconnections">peer.connections</a><span
          class="tag type object">object</span></span>
      <p class="description">A hash of all connections associated with this peer, keyed by the remote peer's ID.<span
          class='tip'>We recommend keeping track of connections yourself rather than relying on this hash.</span></p>
    </div>
    <div class="toplevel " id="peerdisconnected"><span class="name"><a
          href="#peerdisconnected">peer.disconnected</a><span class="tag type boolean">boolean</span></span>
      <p class="description"><code>false</code> if there is an active connection to the PeerServer.</p>
    </div>
    <div class="toplevel " id="peerdestroyed"><span class="name"><a href="#peerdestroyed">peer.destroyed</a><span
          class="tag type boolean">boolean</span></span>
      <p class="description"><code>true</code> if this peer and all of its connections can no longer be used.</p>
    </div>
    <div class="toplevel " id="dataconnection"><span class="name"><a href="#dataconnection">DataConnection</a><span
          class="tag type class">class</span></span>
      <p class="description">Wraps WebRTC's DataChannel. To get one, use <a
          href='#peerconnect'><code>peer.connect</code></a> or listen for the <a
          href='#peeron-connect'><code>connect</code></a> event.</p>
      <div class="children">
        <div class="child " id="dataconnection-send"><span class="name"><a href="#dataconnection-send">.send</a><span
              class="tag type method">method</span><span class="snippet">dataConnection.send(data);</span></span>
          <p class="description"><code>data</code> is serialized by BinaryPack by default and sent to the remote peer.
          </p>
          <div class="children">
            <div class="child " id="dataconnection-send-data"><span class="name"><a
                  href="#dataconnection-send-data">data</a></span>
              <p class="description">You can send any type of data, including objects, strings, and blobs.</p>
            </div>
          </div>
        </div>
        <div class="child " id="dataconnection-close"><span class="name"><a href="#dataconnection-close">.close</a><span
              class="tag type method">method</span><span class="snippet">dataConnection.close();</span></span>
          <p class="description">Closes the data connection gracefully, cleaning up underlying DataChannels and
            PeerConnections.</p>
        </div>
        <div class="child " id="dataconnection-on"><span class="name"><a href="#dataconnection-on">.on</a><span
              class="tag type method">method</span><span class="snippet">dataConnection.on(event,
              callback);</span></span>
          <p class="description">Set listeners for data connection events.</p>
          <div class="children">
            <div class="child " id="dataconnection-on-data"><span class="name"><a
                  href="#dataconnection-on-data">'data'</a><span class="tag type event">event</span><span
                  class="snippet">dataConnection.on('data', function(data) { ... });</span></span>
              <p class="description">Emitted when data is received from the remote peer.</p>
            </div>
            <div class="child " id="dataconnection-on-open"><span class="name"><a
                  href="#dataconnection-on-open">'open'</a><span class="tag type event">event</span><span
                  class="snippet">dataConnection.on('open', function() { ... });</span></span>
              <p class="description">Emitted when the connection is established and ready-to-use.</p>
            </div>
            <div class="child " id="dataconnection-on-close"><span class="name"><a
                  href="#dataconnection-on-close">'close'</a><span class="tag type event">event</span><span
                  class="snippet">dataConnection.on('close', function() { ... });</span></span>
              <p class="description">Emitted when either you or the remote peer closes the data connection.<span
                  class='warn'>Firefox does not yet support this event.</span></p>
            </div>
            <div class="child " id="dataconnection-on-error"><span class="name"><a
                  href="#dataconnection-on-error">'error'</a><span class="tag type event">event</span><span
                  class="snippet">dataConnection.on('error', function(err) { ... });</span></span></div>
          </div>
        </div>
        <div class="child " id="dataconnection-datachannel"><span class="name"><a
              href="#dataconnection-datachannel">.dataChannel</a><span class="tag type object">object</span></span>
          <p class="description">A reference to the RTCDataChannel object associated with the connection.</p>
        </div>
        <div class="child " id="dataconnection-label"><span class="name"><a href="#dataconnection-label">.label</a><span
              class="tag type string">string</span></span>
          <p class="description">The optional label passed in or assigned by PeerJS when the connection was initiated.
          </p>
        </div>
        <div class="child " id="dataconnection-metadata"><span class="name"><a
              href="#dataconnection-metadata">.metadata</a></span>
          <p class="description">Any type of metadata associated with the connection, passed in by whoever initiated the
            connection.</p>
        </div>
        <div class="child " id="dataconnection-open"><span class="name"><a href="#dataconnection-open">.open</a><span
              class="tag type boolean">boolean</span></span>
          <p class="description">This is true if the connection is open and ready for read/write.</p>
        </div>
        <div class="child " id="dataconnection-peerconnection"><span class="name"><a
              href="#dataconnection-peerconnection">.peerConnection</a><span
              class="tag type object">object</span></span>
          <p class="description">A reference to the RTCPeerConnection object associated with the connection.</p>
        </div>
        <div class="child " id="dataconnection-peer"><span class="name"><a href="#dataconnection-peer">.peer</a><span
              class="tag type string">string</span></span>
          <p class="description">The ID of the peer on the other end of this connection.</p>
        </div>
        <div class="child " id="dataconnection-reliable"><span class="name"><a
              href="#dataconnection-reliable">.reliable</a><span class="tag type boolean">boolean</span></span>
          <p class="description">Whether the underlying data channels are reliable; defined when the connection was
            initiated.</p>
        </div>
        <div class="child " id="dataconnection-serialization"><span class="name"><a
              href="#dataconnection-serialization">.serialization</a><span class="tag type string">string</span></span>
          <p class="description">The serialization format of the data sent over the connection. Can be
            <code>binary</code> (default), <code>binary-utf8</code>, <code>json</code>, or <code>none</code>.</p>
        </div>
        <div class="child " id="dataconnection-type"><span class="name"><a href="#dataconnection-type">.type</a><span
              class="tag type string">string</span></span>
          <p class="description">For data connections, this is always <code>'data'</code>.</p>
        </div>
        <div class="child " id="dataconnection-buffersize"><span class="name"><a
              href="#dataconnection-buffersize">.bufferSize</a><span class="tag type number">number</span></span>
          <p class="description">The number of messages queued to be sent once the browser buffer is no longer full.</p>
        </div>
      </div>
    </div>
    <div class="toplevel " id="mediaconnection"><span class="name"><a href="#mediaconnection">MediaConnection</a><span
          class="tag type class">class</span></span>
      <p class="description">Wraps WebRTC's media streams. To get one, use <a
          href='#peercall'><code>peer.call</code></a> or listen for the <a href='#peeron-call'><code>call</code></a>
        event.</p>
      <div class="children">
        <div class="child " id="mediaconnection-answer"><span class="name"><a
              href="#mediaconnection-answer">.answer</a><span class="tag type method">method</span><span
              class="snippet">mediaConnection.answer([stream],[options]);</span></span>
          <p class="description">When receiving a <a href='#peeron-call'><code>call</code></a> event on a peer, you can
            call <code>.answer</code> on the media connection provided by the callback to accept the call and optionally
            send your own media stream.</p>
          <div class="children">
            <div class="child " id="mediaconnection-answer-stream"><span class="name"><a
                  href="#mediaconnection-answer-stream"><span class="optional"><span class="bracket">[</span>stream<span
                      class="bracket">]</span></span></a><span class="tag type MediaStream">MediaStream</span></span>
              <p class="description">A WebRTC media stream from <a
                  href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia'><code>getUserMedia</code></a>.
              </p>
            </div>
            <div class="child " id="mediaconnection-answer-options"><span class="name"><a
                  href="#mediaconnection-answer-options"><span class="optional"><span
                      class="bracket">[</span>options<span class="bracket">]</span></span></a><span
                  class="tag type object">object</span></span>
              <div class="children">
                <div class="child " id="mediaconnection-answer-options-sdptransform"><span class="name"><a
                      href="#mediaconnection-answer-options-sdptransform">sdpTransform</a><span
                      class="tag type method">method</span></span>
                  <p class="description">Function which runs before create answer to modify sdp answer message.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="child " id="mediaconnection-close"><span class="name"><a
              href="#mediaconnection-close">.close</a><span class="tag type method">method</span><span
              class="snippet">mediaConnection.close();</span></span>
          <p class="description">Closes the media connection.</p>
        </div>
        <div class="child " id="mediaconnection-on"><span class="name"><a href="#mediaconnection-on">.on</a><span
              class="tag type method">method</span><span class="snippet">mediaConnection.on(event,
              callback);</span></span>
          <p class="description">Set listeners for media connection events.</p>
          <div class="children">
            <div class="child " id="mediaconnection-on-stream"><span class="name"><a
                  href="#mediaconnection-on-stream">'stream'</a><span class="tag type event">event</span><span
                  class="snippet">mediaConnection.on('stream', function(stream) { ... });</span></span>
              <p class="description">Emitted when a remote peer adds a <code>stream</code>.</p>
            </div>
            <div class="child " id="mediaconnection-on-close"><span class="name"><a
                  href="#mediaconnection-on-close">'close'</a><span class="tag type event">event</span><span
                  class="snippet">mediaConnection.on('close', function() { ... });</span></span>
              <p class="description">Emitted when either you or the remote peer closes the media connection. <span
                  class='warn'>Firefox does not yet support this event.</span></p>
            </div>
            <div class="child " id="mediaconnection-on-error"><span class="name"><a
                  href="#mediaconnection-on-error">'error'</a><span class="tag type event">event</span><span
                  class="snippet">mediaConnection.on('error', function(err) { ... });</span></span></div>
          </div>
        </div>
        <div class="child " id="mediaconnection-open"><span class="name"><a href="#mediaconnection-open">.open</a><span
              class="tag type boolean">boolean</span></span>
          <p class="description">Whether the media connection is active (e.g. your call has been answered). You can
            check this if you want to set a maximum wait time for a one-sided call.</p>
        </div>
        <div class="child " id="mediaconnection-metadata"><span class="name"><a
              href="#mediaconnection-metadata">.metadata</a></span>
          <p class="description">Any type of metadata associated with the connection, passed in by whoever initiated the
            connection.</p>
        </div>
        <div class="child " id="mediaconnection-peer"><span class="name"><a href="#mediaconnection-peer">.peer</a><span
              class="tag type string">string</span></span>
          <p class="description">The ID of the peer on the other end of this connection.</p>
        </div>
        <div class="child " id="mediaconnection-type"><span class="name"><a href="#mediaconnection-type">.type</a><span
              class="tag type string">string</span></span>
          <p class="description">For media connections, this is always <code>'media'</code>.</p>
        </div>
      </div>
    </div>
    <div class="toplevel utility " id="util"><span class="name"><a href="#util">util</a><span
          class="tag type object">object</span><span class="tag utility">utility</span></span>
      <p class="description">Provides a variety of helpful utilities.<span class='warn'>Only the utilities documented
          here are guaranteed to be present on <code>util</code>. Undocumented utilities can be removed without warning.
          We don't consider these to be 'breaking changes.'</span></p>
      <div class="children">
        <div class="child " id="util-browser"><span class="name"><a href="#util-browser">.browser</a><span
              class="tag type string">string</span><span class="snippet">if (util.browser === 'Firefox') { /* OK to peer
              with Firefox peers. */ }</span></span>
          <p class="description">The current browser. This property can be useful in determining whether or not two
            peers can connect. For example, as of now data connections are not yet interoperable between major browsers.
            <code>util.browser</code> can currently have the values 'Firefox', 'Chrome', 'Unsupported', or 'Supported'
            (unknown WebRTC-compatible browser).</p>
        </div>
        <div class="child " id="util-supports"><span class="name"><a href="#util-supports">.supports</a><span
              class="tag type object">object</span><span class="snippet">if (util.supports.data) { /* OK to start a data
              connection. */ }</span></span>
          <p class="description">A hash of WebRTC features mapped to booleans that correspond to whether the feature is
            supported by the current browser.<span class='warn'>Only the properties documented here are guaranteed to be
              present on <code>util.supports</code>.</span></p>
          <div class="children">
            <div class="child " id="util-supports-audiovideo"><span class="name"><a
                  href="#util-supports-audiovideo">.audioVideo</a><span class="tag type boolean">boolean</span></span>
              <p class="description">True if the current browser supports media streams and PeerConnection.</p>
            </div>
            <div class="child " id="util-supports-data"><span class="name"><a href="#util-supports-data">.data</a><span
                  class="tag type boolean">boolean</span></span>
              <p class="description">True if the current browser supports DataChannel and PeerConnection.</p>
            </div>
            <div class="child " id="util-supports-binary"><span class="name"><a
                  href="#util-supports-binary">.binary</a><span class="tag type boolean">boolean</span></span>
              <p class="description">True if the current browser supports binary DataChannels.</p>
            </div>
            <div class="child " id="util-supports-reliable"><span class="name"><a
                  href="#util-supports-reliable">.reliable</a><span class="tag type boolean">boolean</span></span>
              <p class="description">True if the current browser supports reliable DataChannels.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</body>