Modern WebRTC remote call

Cross-browser WebRTC with cut'n'paste Offer/Answer exchange.

by jib1

HTML

<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<button id="button">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

var pc = new RTCPeerConnection({iceServers: [{urls:
                                "stun:stun.l.google.com:19302"}]});

var haveGum = navigator.mediaDevices.getUserMedia({video:true, audio:true})
  .then(stream => pc.addStream(video1.srcObject = stream));

pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
pc.onaddstream = e => video2.srcObject = e.stream;

button.onclick = () => {
  button.disabled = true;
  haveGum.then(() => pc.createOffer())
    .then(d => pc.setLocalDescription(d))
    .catch(log);

  pc.onicecandidate = e => {
    if (e.candidate) return;
    offer.value = pc.localDescription.sdp;
    offer.select();
    answer.placeholder = "Paste answer here";
  };
};

offer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  pc.setRemoteDescription({type: "offer", sdp: offer.value})
    .then(() => pc.createAnswer())
    .then(d => pc.setLocalDescription(d))
    .catch(log);

  pc.onicecandidate = e => {
    if (e.candidate) return;
    answer.focus();
    answer.value = pc.localDescription.sdp;
    answer.select();
  };
};

answer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  pc.setRemoteDescription({type: "answer", sdp: answer.value}).catch(log);
};

var log = msg => div.innerHTML += "<br>" + msg;