title: WebRTC peerConnection ontrack listener doesn't trigger
body: <p>First of all, issue here is different from all I found in &quot;google&quot; as I'm using Spring Boot as signaling server to connect two different browser's tabs or they are using two peerConnection to send stream within one tab.</p>
  <p>Peers seem to be connected and messages are sent correctly. However, when I run sendStream with button, second tab track event listener doesn't trigger.</p>
  <pre><code>//connecting to our signaling server 
  var conn = new WebSocket('ws://localhost:8080/socket');
  
  conn.onopen = function() {
      console.log(&quot;Connected to the signaling server&quot;);
      initialize();
  };
  
  conn.onmessage = function(msg) {
      console.log(&quot;Got message&quot;, msg.data);
      var content = JSON.parse(msg.data);
      var data = content.data;
      switch (content.event) {
      // when somebody wants to call us
      case &quot;offer&quot;:
          handleOffer(data);
          break;
      case &quot;answer&quot;:
          handleAnswer(data);
          break;
      // when a remote peer sends an ice candidate to us
      case &quot;candidate&quot;:
          handleCandidate(data);
          break;
      default:
          break;
      }
  };
  
  function send(message) {
      conn.send(JSON.stringify(message));
  }
  
  var peerConnection;
  var dataChannel;
  var input = document.getElementById(&quot;messageInput&quot;);
  
  function initialize() {
      var configuration = null;
  
      peerConnection = new RTCPeerConnection(configuration);
  
      // Setup ice handling
      peerConnection.onicecandidate = function(event) {
          if (event.candidate) {
              send({
                  event : &quot;candidate&quot;,
                  data : event.candidate
              });
          }
      };
  
      const remoteVideo = document.getElementById('video');
  
      peerConnection.addEventListener('track', async (event) =&gt; {
          const [remoteStream] = event.streams;
          remoteVideo.srcObject = remoteStream;
          console.log(&quot;STREAM RECEIVED&quot;);
      });
      
      // creating data channel
      dataChannel = peerConnection.createDataChannel(&quot;dataChannel&quot;, {
          reliable : true
      });
  
      dataChannel.onerror = function(error) {
          console.log(&quot;Error occured on datachannel:&quot;, error);
      };
  
      // when we receive a message from the other peer, printing it on the console
      dataChannel.onmessage = function(event) {
          console.log(&quot;message:&quot;, event.data);
      };
  
      dataChannel.onclose = function() {
          console.log(&quot;data channel is closed&quot;);
      };
    
      peerConnection.ondatachannel = function (event) {
          dataChannel = event.channel;
      };
      
  }
  
  function createOffer() {
      peerConnection.createOffer(function(offer) {
          send({
              event : &quot;offer&quot;,
              data : offer
          });
          peerConnection.setLocalDescription(offer);
      }, function(error) {
          alert(&quot;Error creating an offer&quot;);
      });
  }
  
  function handleOffer(offer) {
      peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
  
      // create and send an answer to an offer
      peerConnection.createAnswer(function(answer) {
          peerConnection.setLocalDescription(answer);
          send({
              event : &quot;answer&quot;,
              data : answer
          });
      }, function(error) {
          alert(&quot;Error creating an answer&quot;);
      });
  
  };
  
  function handleCandidate(candidate) {
      peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  };
  
  function handleAnswer(answer) {
      peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
      console.log(&quot;connection established successfully!!&quot;);
  };
  
  function sendMessage() {
      dataChannel.send(input.value);
      input.value = &quot;&quot;;
  }
  
  async function sendStream() {
      const localStream = await navigator.mediaDevices.getUserMedia({audio: false, video: true});
      localStream.getTracks().forEach(track =&gt; {
          peerConnection.addTrack(track, localStream);
          console.log(&quot;STREAM SENT&quot;)
          const localVideo = document.getElementById('video2');
          addVideoStream(localVideo, localStream);
      });
  }
  
  function addVideoStream(video, stream) {
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () =&gt; {
          video.play();
      })
  }
  </code></pre>