Creating a Call

Exciting times — now you're going to give your users the ability to create calls.

  1. First of all, get a reference to the "Call" button that's defined in the HTML, by adding the following to the bottom of script.js:

    js
    const callBtn = document.querySelector(".call-btn");
  2. When a caller clicks "Call" you'll want to ask them for the peer ID of the peer they want to call (which we will store in the code variable in getStreamCode()) and then you'll want to create a connection with that code. Add the following below your previous code:

    js
    callBtn.addEventListener("click", () => {
      getStreamCode();
      connectPeers();
      const call = peer.call(code, window.localStream); // A
    
      call.on("stream", (stream) => {
        // B
        window.remoteAudio.srcObject = stream;
        window.remoteAudio.autoplay = true;
        window.peerStream = stream;
        showConnectedContent();
      });
    });

    Let's walk through this code:

  3. To test this out, open localhost:8000 in two browser windows and click Call inside one of them. You should see this:

    Two screens side by side both A cream background with the words 'phone a friend' in bold, dark green font as the heading. The first screen has 'Your device ID is: 3b77' and the second 'Your device ID is: 2doa', is immediately below the title and 'please use headphones!' below that. Following on, a big dark green button with 'Call' written in the same cream color of the background. The second screen has a browser dialogue that asks for a peer id.

    If you submit the other peer's ID, the call will be connected!

This is all working so far, but we need to give the other browser the chance to answer or decline the call We'll do that next.