Untitled

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Without Adapter.js</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        video {
            width: 320px;
            height: 240px;
        }
    </style>
</head>

<body>
<div>
  <h4>Sender Video:</h4>
  <video id="sender" autoplay muted playsinline></video>
  <div>
    <p id="transceiverKeys"></p>
  </div>
  <button id="startBtn">Start</button>
  <button id="stopBtn">Stop</button>
</div>
<hr/>
<div>
  <h4>Receiver Video:</h4>
  <video id="receiver" autoplay muted playsinline></video>
</div>
</body>
<script>
  let sender,
      receiver,
      stream;

  async function start() {
    sender = new RTCPeerConnection();
    receiver = new RTCPeerConnection();

    // fake ice signalling
    sender.onicecandidate = (evt) => receiver.addIceCandidate(evt.candidate);
    receiver.onicecandidate = (evt) => sender.addIceCandidate(evt.candidate);

    let receivedStream = false;
    // THE PROBLEM IS HERE
    receiver.ontrack = (evt) => {
      if (receivedStream) {
        return;
      }
      receivedStream = true;

      // all expected properties of RTCRtpTransceiver found
      // notably mid
      let transceiverKeys = Object.keys(evt.transceiver);
      let transceiverProtoKeys = Object.keys(Object.getPrototypeOf(evt.transceiver));
      let keys = transceiverKeys.concat(transceiverProtoKeys);
      if (!keys.length) keys.push('EMPTY!');
      document.querySelector('#transceiverKeys').textContent = keys.join(', ');

      addMediaToDom(evt.streams[0], 'receiver');
    };

    stream = await window.navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    addMediaToDom(stream, 'sender');

    for (const track of stream.getTracks()) {
      sender.addTrack(track, stream);
    }

    let offer = await sender.createOffer({ video: true });
    await sender.setLocalDescription(offer);

    // fake signalling
    await receiver.setRemoteDescription(offer);

    let answer = await receiver.createAnswer();
    await receiver.setLocalDescription(answer);

    await sender.setRemoteDescription(answer);
  }

  function stop() {
    document.querySelector('#receiver').srcObject = null;
    document.querySelector('#sender').srcObject = null;
    document.querySelector('#transceiverKeys').textContent = '';
    if (receiver) {
      receiver.close();
    }
    if (sender) {
      sender.close();
    }
    if (stream) {
      stream.getTracks().forEach(track => track.stop())
    }
    sender = receiver = stream = null;
  }

  function addMediaToDom(stream, elementName) {
    let element = document.querySelector(`#${elementName}`);
     element.srcObject = stream;
  }

  document.querySelector('#startBtn').onclick = start;
  document.querySelector('#stopBtn').onclick = stop;
</script>
</html>