Article WebRTC transceiver order correlation

by jib1

HTML

Correlate tracks in initial offer to always place cam+mic stream on the left:<br>
<video id="videoA" width="320" height="240" autoplay controls></video>
<video id="videoB" width="320" height="240" autoplay></video><br>
<button onclick="camStream.getTracks().forEach(t => t.stop())">Stop Example</button><br>
<div id="div"></div>
<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();
    camStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
    let transceivers = [
      pc1.addTransceiver(camStream.getVideoTracks()[0], {streams: [camStream]}),
      pc1.addTransceiver(camStream.getAudioTracks()[0], {streams: [camStream]}),
      pc1.addTransceiver(whiteNoise())
    ];

    pc2.ontrack = ({transceiver, streams: [stream]}) => {
      if (transceiver.mid == pc2.getTransceivers()[2].mid) {
        videoB.srcObject = new MediaStream([transceiver.receiver.track]);
      } else {
        videoA.srcObject = stream;
      }
    }
  } catch (e) {
    console.log(e)
  }
})();