Article WebRTC two-way transceiver order correlation

by jib1

HTML

One side:<br>
<video id="videoA" width="320" height="240" autoplay controls></video>
<video id="videoB" width="320" height="240" autoplay></video><br>
Other side:<br>
<video id="videoC" width="320" height="240" autoplay controls></video>
<video id="videoD" width="320" height="240" autoplay></video><br>
<div id="div"></div>
<button onclick="camStream.getTracks().forEach(t => t.stop())">Stop Example</button><br>
<script src="https://jan-ivar.github.io/localloop/localloop.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

let camStream;

(async () => {
  try {
    const [pc1, pc2] = localPeerConnectionLoop(), noise = whiteNoise();
    camStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});

    pc1.addTransceiver(camStream.getVideoTracks()[0], {streams: [camStream]});
    pc1.addTransceiver(camStream.getAudioTracks()[0], {streams: [camStream]});
    pc1.addTransceiver(noise);

    for (let [pc, videoL, videoR] of [[pc1, videoA, videoB], [pc2, videoC, videoD]]) {
      pc.ontrack = ({transceiver, streams: [stream]}) => {
        if (transceiver.mid == pc.getTransceivers()[2].mid) {
          videoR.srcObject = new MediaStream([transceiver.receiver.track]);
        } else {
          videoL.srcObject = stream;
        }
      }
    }
    await new Promise(r => pc2.onsignalingstatechange = () => pc2.signalingState == "have-remote-offer" && r());

    pc2.addTrack(camStream.getVideoTracks()[0], camStream);
    pc2.addTrack(camStream.getAudioTracks()[0], camStream);
    pc2.addTrack(noise, new MediaStream());

    div.innerHTML = `${pc2.getTransceivers().length} transceivers total`;
  } catch (e) {
    console.log(e)
  }
})();