title: WebRTC: Connection is successful but answering peer never receives "track" events
body: <p>With two peers connected via WebRTC, we can see the peer connection is complete, yet only one client is receiving the video stream (the "offering" peer). The "answering" peer is never receiving "track" events (<code>peerConnection.ontrack</code>).</p>
  
  <p>Code for the "answering" peer that displays the problem:</p>
  
  <pre class="lang-js prettyprint-override"><code>const peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun1.l.google.com:19302' }]});
  
  const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  localStream.getTracks().forEach((track) =&gt; { peerConnection.addTrack(track, localStream) });
  
  const { data } = await axios.get("http://{HIDDEN}/offer");
  if (data) {
    // console.log('received offer', data.offer)
    await peerConnection.setRemoteDescription(data.offer);
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    connectionInfo.current.answer = peerConnection.localDescription;
    data.iceCandidates.forEach(async (candidate: any) =&gt; {
      await peerConnection.addIceCandidate(candidate);
    });
  
    // Set peer connection event handlers
    peerConnection.onicecandidate = (event) =&gt; {
      if (event.candidate) connectionInfo.current.iceCandidates.push(event.candidate);
    };
    peerConnection.onicegatheringstatechange = async () =&gt; {
      if (peerConnection.iceGatheringState === "complete" &amp;&amp; connectionInfo.current.answer) {
        await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
      }
    };
    peerConnection.ontrack = async (event) =&gt; {
      remoteStream.addTrack(event.track);
    };
  
    if (peerConnection.iceGatheringState === "complete") {
      await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
    }
  }
  </code></pre>