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

@@ -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);
 }
 

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 => {
+    ...rtpStats.map(stat => {
-      const { id, remoteId, remoteRtpStats } = stat;
+      const { ssrc, remoteId, remoteRtpStats } = stat;
       const div = renderElements("div", {}, [
-        renderText("h5", id),
+        renderText("h5", `SSRC ${ssrc}`),
-        renderCoderStats(stat),
+        renderCodecStats(stat),
         renderTransportStats(stat, true, history),
       ]);
       if (remoteId && remoteRtpStats) {
@@ -638,25 +640,53 @@ function renderRTPStats(report, history) {
   ]);
 }
 
-function renderCoderStats({
+function renderCodecStats({
-  framesPerSecond,
+  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" },
+        ` ${codecStat.clockRate} ${codecStat.sdpFmtpLine || ""}`,
-        "about-webrtc-current-framerate-label"
+        {}
       )
     );
-    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(

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.