From 2f7d8322c5ccec219b1e2363bcb22a2795929cbb Mon Sep 17 00:00:00 2001
From: Jan-Ivar Bruaroey <jib@mozilla.com>
Date: Thu, 10 Feb 2022 14:57:32 +0000
Subject: [PATCH] Bug 1754611 - Show codec stats in about:webrtc.
 r=ng,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D138376
---
 dom/media/webrtc/WebrtcGlobal.h               |  2 +
 toolkit/content/aboutwebrtc/aboutWebrtc.js    | 63 ++++++++++++++-----
 .../en-US/toolkit/about/aboutWebrtc.ftl       | 18 ++++++
 3 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/dom/media/webrtc/WebrtcGlobal.h b/dom/media/webrtc/WebrtcGlobal.h
index 1f2c86ce4acf..28d4dca006aa 100644
--- a/dom/media/webrtc/WebrtcGlobal.h
+++ b/dom/media/webrtc/WebrtcGlobal.h
@@ -259,6 +259,7 @@ static void WriteRTCRtpStreamStats(
   WriteParam(aMsg, aParam.mMediaType);
   WriteParam(aMsg, aParam.mKind);
   WriteParam(aMsg, aParam.mTransportId);
+  WriteParam(aMsg, aParam.mCodecId);
   WriteRTCStats(aMsg, aParam);
 }
 
@@ -268,6 +269,7 @@ static bool ReadRTCRtpStreamStats(const Message* aMsg, PickleIterator* aIter,
          ReadParam(aMsg, aIter, &(aResult->mMediaType)) &&
          ReadParam(aMsg, aIter, &(aResult->mKind)) &&
          ReadParam(aMsg, aIter, &(aResult->mTransportId)) &&
+         ReadParam(aMsg, aIter, &(aResult->mCodecId)) &&
          ReadRTCStats(aMsg, aIter, aResult);
 }
 
diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.js b/toolkit/content/aboutwebrtc/aboutWebrtc.js
index 1b6db82f8eb3..da06f2e8b083 100644
--- a/toolkit/content/aboutwebrtc/aboutWebrtc.js
+++ b/toolkit/content/aboutwebrtc/aboutWebrtc.js
@@ -618,16 +618,18 @@ function renderRTPStats(report, history) {
   for (const stat of rtpStats.filter(s => "remoteId" in s)) {
     stat.remoteRtpStats = remoteRtpStatsMap[stat.remoteId];
   }
-  const stats = [...rtpStats, ...remoteRtpStats];
+  for (const stat of rtpStats.filter(s => "codecId" in s)) {
+    stat.codecStat = report.codecStats.find(({ id }) => id == stat.codecId);
+  }
 
   // Render stats set
   return renderElements("div", { id: "rtp-stats: " + report.pcid }, [
     renderElement("h4", {}, "about-webrtc-rtp-stats-heading"),
-    ...stats.map(stat => {
-      const { id, remoteId, remoteRtpStats } = stat;
+    ...rtpStats.map(stat => {
+      const { ssrc, remoteId, remoteRtpStats } = stat;
       const div = renderElements("div", {}, [
-        renderText("h5", id),
-        renderCoderStats(stat),
+        renderText("h5", `SSRC ${ssrc}`),
+        renderCodecStats(stat),
         renderTransportStats(stat, true, history),
       ]);
       if (remoteId && remoteRtpStats) {
@@ -638,25 +640,53 @@ function renderRTPStats(report, history) {
   ]);
 }
 
-function renderCoderStats({
-  framesPerSecond,
+function renderCodecStats({
+  codecStat,
+  framesEncoded,
+  framesDecoded,
   framesDropped,
   discardedPackets,
   packetsReceived,
 }) {
   let elements = [];
 
-  if (framesPerSecond) {
+  if (codecStat) {
     elements.push(
-      renderElement(
+      renderText("span", `${codecStat.payloadType} ${codecStat.mimeType}`, {})
+    );
+    if (framesEncoded !== undefined || framesDecoded !== undefined) {
+      elements.push(
+        renderElement(
+          "span",
+          { className: "stat-label" },
+          "about-webrtc-frames",
+          {
+            frames: framesEncoded || framesDecoded || 0,
+          }
+        )
+      );
+    }
+    if (codecStat.channels !== undefined) {
+      elements.push(
+        renderElement(
+          "span",
+          { className: "stat-label" },
+          "about-webrtc-channels",
+          {
+            channels: codecStat.channels,
+          }
+        )
+      );
+    }
+    elements.push(
+      renderText(
         "span",
-        { className: "stat-label" },
-        "about-webrtc-current-framerate-label"
+        ` ${codecStat.clockRate} ${codecStat.sdpFmtpLine || ""}`,
+        {}
       )
     );
-    elements.push(renderText("span", ` ${framesPerSecond.toFixed(2)} fps`, {}));
   }
-  if (framesDropped) {
+  if (framesDropped !== undefined) {
     elements.push(
       renderElement(
         "span",
@@ -666,7 +696,7 @@ function renderCoderStats({
     );
     elements.push(renderText("span", ` ${framesDropped}`, {}));
   }
-  if (discardedPackets) {
+  if (discardedPackets !== undefined) {
     elements.push(
       renderElement(
         "span",
@@ -677,7 +707,7 @@ function renderCoderStats({
     elements.push(renderText("span", ` ${discardedPackets}`, {}));
   }
   if (elements.length) {
-    if (packetsReceived) {
+    if (packetsReceived !== undefined) {
       elements.unshift(
         renderElement("span", {}, "about-webrtc-decoder-label"),
         renderText("span", ": ")
@@ -697,7 +727,6 @@ function renderTransportStats(
     id,
     timestamp,
     type,
-    ssrc,
     packetsReceived,
     bytesReceived,
     packetsLost,
@@ -741,7 +770,7 @@ function renderTransportStats(
   }
 
   const time = new Date(timestamp).toTimeString();
-  elements.push(renderText("span", `${time} ${type} SSRC: ${ssrc}`));
+  elements.push(renderText("span", `${time} ${type}`));
 
   if (packetsReceived) {
     elements.push(
diff --git a/toolkit/locales/en-US/toolkit/about/aboutWebrtc.ftl b/toolkit/locales/en-US/toolkit/about/aboutWebrtc.ftl
index 7ed4e18c2858..b30c99560c88 100644
--- a/toolkit/locales/en-US/toolkit/about/aboutWebrtc.ftl
+++ b/toolkit/locales/en-US/toolkit/about/aboutWebrtc.ftl
@@ -193,6 +193,24 @@ about-webrtc-aec-logging-off-state-msg = captured log files can be found in: { $
 
 ##
 
+# This is the total number of frames encoded or decoded over an RTP stream.
+# Variables:
+#  $frames (Number) - The number of frames encoded or decoded.
+about-webrtc-frames =
+  { $frames ->
+      [one] { $frames } frame
+     *[other] { $frames } frames
+  }
+
+# This is the number of audio channels encoded or decoded over an RTP stream.
+# Variables:
+#  $channels (Number) - The number of channels encoded or decoded.
+about-webrtc-channels =
+  { $channels ->
+      [one] { $channels } channel
+     *[other] { $channels } channels
+  }
+
 # This is the total number of packets received on the PeerConnection.
 # Variables:
 #  $packets (Number) - The number of packets received.