Next, you want to ensure your users have a way of connecting with their peers. In order to connect two peers, you'll need the peer ID for one of them.
- Let's create a variable to contain the ID, and a function to request that the user enters it that we'll call later. Add this to the bottom of
script.js
:js
let code; function getStreamCode() { code = window.prompt("Please enter the sharing code"); }
window.prompt()
method provides a convenient way of getting the relevant peer ID — you can use this when you want to collect the peerID needed to create the connection. - Using the peerJS framework, you'll want to connect the
localPeer
to theremotePeer
. PeerJS gives us theconnect()
function, which takes a peer ID to connect to. Add this block below your previous code:js
let conn; function connectPeers() { conn = peer.connect(code); }
- When a connection is created, let's use the PeerJS framework's
on('connection')
to set the remote peer's ID and open the connection. The function for this listener accepts aconnection
object which is an instance of theDataConnection
object (which is a wrapper around WebRTC'sRTCDataChannel
); within this function you'll want to assign it to a variable. Again you'll want to create the variable outside of the function so that you can assign it later. Add the following below your previous code:js
peer.on("connection", (connection) => { conn = connection; });