Modern WebRTC receive-only tab demo

Simple WebRTC test in two tabs (camera on remote end)

by jib1

HTML

<video id="v" height="120" width="160" autoplay></video><br>
<button id="call">Call!</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

var pc = new RTCPeerConnection();
var options = { offerToReceiveVideo: true, offerToReceiveAudio: true };

call.onclick = e => pc.createOffer(options)
  .then(offer => pc.setLocalDescription(offer))
  .then(() => send({ sdp: pc.localDescription }))
  .catch(log);

pc.onaddstream = e => v.srcObject = e.stream;
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
pc.onicecandidate = e => send({ ice: e.candidate });

var sc = new localSocket(), send = obj => sc.send(JSON.stringify(obj));
var incoming = msg => msg.sdp &&
  pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))
  .then(() => pc.signalingState == "stable" || 
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => pc.addStream(v.srcObject = stream))
    .then(() => pc.createAnswer())
    .then(answer => pc.setLocalDescription(answer))
    .then(() => send({ sdp: pc.localDescription })))
  .catch(log) || msg.ice &&
  pc.addIceCandidate(new RTCIceCandidate(msg.ice)).catch(log);
sc.onmessage = e => incoming(JSON.parse(e.data));

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