Modern WebRTC tab stop demo

Simple WebRTC test in two tabs

by jib1

HTML

<video id="video" height="120" width="160" autoplay></video><br>
<button id="call">Call!</button>
<button id="stopper">Stop!</button><br><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://rawgit.com/jan-ivar/localSocket/master/localSocket.js"></script>

JavaScript

let pc, log = msg => div.innerHTML += "<br>" + msg;

let newPeer = () => {
  let pc = new RTCPeerConnection();
  pc.onaddstream = e => video.srcObject = e.stream;
  pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
  pc.onicecandidate = e => sc.send({ice: e.candidate});
  pc.onnegotiationneeded = e => pc.createOffer()
    .then(sdp => pc.setLocalDescription(sdp).then(() => sc.send({sdp}))).catch(log);
  return pc;
};

let sc = new localSocket();
sc.onmessage = e => {
  pc = pc || newPeer();
  return e.data.sdp && pc.setRemoteDescription(e.data.sdp)
  .then(() => pc.signalingState == "stable" || pc.createAnswer()
    .then(sdp => pc.setLocalDescription(sdp).then(() => sc.send({sdp}))))
  .catch(log) || e.data.ice && pc.addIceCandidate(e.data.ice).catch(log);
};

call.onclick = e => {
  pc = newPeer();
  navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(stream => pc.addStream(video.srcObject = stream)).catch(log);
};

stopper.onclick = e => {
  video.srcObject.getTracks().forEach(track => track.stop());
  video.srcObject = null;
  pc.close();
  pc = null;
};