async WebRTC stats framesEncoded

by jib1

HTML

<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<label><input type="checkbox" onclick="mute()">mute</label>
<div id="div"></div><br><div id="statsdiv"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

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

async function showStats(pc) {
  try {
    await new Promise(resolve => pc.oniceconnectionstatechange =
        () => pc.iceConnectionState == "connected" && resolve());
    let lastFrames = 0;
    while (true) {
      let html = "";
      const stats = await pc.getStats();
      for (let stat of stats.values()) {
        if (stat.isRemote) continue;
        switch (stat.type) {
          case "outbound-rtp": {
            let fps = (stat.framesEncoded - lastFrames);
            lastFrames = stat.framesEncoded;
            html += dumpOutbound(stat) + "<br>" + fps + " fps<br><br>";
            let rtcp = stats.get(stat.remoteId);
            if (rtcp) html += "RTCP " + dumpInbound(rtcp) + "<br>";
            break;
          }
          case "inbound-rtp": {
            html += dumpInbound(stat) + "<br>";
            let rtcp = stats.get(stat.remoteId);
            if (rtcp) html += "RTCP " + dumpOutbound(rtcp) + "<br>";
            break;
          }
        }
      }
      update(statsdiv, `<small>${html}</small>`);
      await wait(1000);
    }
  } catch (e) {
    log(e);
  }
}
showStats(pc1);

const mute = () => video1.srcObject.getTracks().forEach(t => t.enabled = !t.enabled);
const update = (div, msg) => div.innerHTML = msg;
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

const mb = bytes => (bytes/1024000).toFixed(2);
let dumpHeader = o => `${o.type} ${o.mediaType} ${new Date(o.timestamp).toTimeString()}<br>SSRC: ${o.ssrc} `;
var dumpOutbound = o => dumpHeader(o) + `Sent: ${o.packetsSent} packets (${mb(o.bytesSent)} MB)<br>Frames encoded: ${o.framesEncoded} Dropped frames: ${o.droppedFrames}<br>`;
var dumpInbound = o => dumpHeader(o) + `Received: ${o.packetsReceived} packets (${mb(o.bytesReceived)} MB) Lost: ${o.packetsLost}<br>Discarded packets: ${o.discardedPackets} Jitter: ${o.jitter}<br>`;

(async () => {
  try {
 ...