Async WebRTC Demo

by jib1

HTML

<script src="https://webrtchacks.github.io/adapter/adapter-latest.js"></script>
<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<div id="div"></div>

JavaScript

const console = {log: msg => div.innerHTML += `${msg}<br>`};
const pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

(async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
    for (const track of stream.getTracks()) {
      pc1.addTrack(track, stream);
    }
    video1.srcObject = stream;
    video2.srcObject = (await new Promise(r => pc2.ontrack = r)).streams[0];
  } catch (e) {
    console.log(e);
  }
})();

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.oniceconnectionstatechange = () => console.log(pc1.iceConnectionState);

pc1.onnegotiationneeded = async () => {
  await pc1.setLocalDescription();
  await pc2.setRemoteDescription(pc1.localDescription);
  await pc2.setLocalDescription();
  await pc1.setRemoteDescription(pc2.localDescription);
}