Async WebRTC Demo with stats

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="div3"></div>
<div id="div2"></div>
<div id="div"></div>

JavaScript

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

(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;
    const [stream2] = (await new Promise(r => pc2.ontrack = r)).streams;
    setVideo(video2, div3, stream2);
    
  let o1 = {}, o2 = {};
  setInterval(async () => {
    try {
      let [s1, s2] = await Promise.all([pc1, pc2].map(pc => pc.getStats()));
      const outbound1 = findStat(s1, "outbound-rtp", "video");
      const inbound2 = findStat(s2, "inbound-rtp", "video");
//      console.log(JSON.stringify(outbound1));
      const bps1 = bitrate(outbound1?.bytesSent || 0, o1);
      const bps2 = bitrate(inbound2?.bytesReceived || 0, o2);
      const codec1 = s1.get(outbound1?.codecId)?.mimeType.split("/")[1];
      const codec2 = s2.get(inbound2?.codecId)?.mimeType.split("/")[1];
/      update(div2, `${bps1.toLocaleString()} bps = ${bps1/1000} kbps = ${bps1/8000} KBps = ${(bps1/1000000).toFixed(1)} Mbps ${codec1}`);
      update(div2, `${bps2.toLocaleString()} bps = ${bps2/1000} kbps = ${bps2/8000} KBps = ${(bps2/1000000).toFixed(1)} Mbps ${codec2}`);
    } catch (e) {
      console.log(e);
    }
  }, 1000);
    
    
    
  } 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);
}

const frames = v => v.mozPaintedFrames || v.webkitDecodedFrameCount ||...