feat: Add Stats UI at runtime

WebApp/client/public/bidirectional/js/main.js

@@ -1,5 +1,6 @@
 import { SendVideo } from "./sendvideo.js";
 import { getServerConfig } from "../../js/config.js";
+import { createDisplayStringArray } from "../../js/stats.js";
 
 const defaultStreamWidth = 1280;
 const defaultStreamHeight = 720;
@@ -39,16 +40,15 @@ let useCustomResolution = false;
 
 setUpInputSelect();
 showCodecSelect();
-showStatsMessage();
 
 let sendVideo = new SendVideo();
 sendVideo.ondisconnect = async (message) => {
+  await hangUp();
+
   if (message) {
     messageDiv.style.display = 'block';
     messageDiv.innerText = message;
   }
-
-  await hangUp();
 };
 
 let useWebSocket;
@@ -123,9 +123,11 @@ async function setUp() {
   codecPreferences.disabled = true;
 
   await sendVideo.setupConnection(remoteVideo, connectionId, useWebSocket, selectedCodecs);
+  showStatsMessage();
 }
 
 async function hangUp() {
+  clearStatsMessage();
   hangUpButton.disabled = true;
   setupButton.disabled = false;
   await sendVideo.hangUp(connectionId);
@@ -203,8 +205,11 @@ function showCodecSelect() {
   codecPreferences.disabled = false;
 }
 
+let lastStats;
+let intervalId;
+
 function showStatsMessage() {
-  setInterval(async () => {
+  intervalId = setInterval(async () => {
     if (localVideo.videoWidth) {
       localVideoStatsDiv.innerHTML = `<strong>Sending resolution:</strong> ${localVideo.videoWidth} x ${localVideo.videoHeight} px`;
     }
@@ -221,21 +226,23 @@ function showStatsMessage() {
       return;
     }
 
-    let message = "";
-    stats.forEach(stat => {
-      if (stat.type === 'inbound-rtp' && stat.kind === 'video' && stat.codecId !== undefined) {
-        const codec = stats.get(stat.codecId);
-        message += `Using for receive video ${codec.mimeType} ${codec.sdpFmtpLine}, payloadType=${codec.payloadType}. Decoder: ${stat.decoderImplementation} \n`;
-      }
-      if (stat.type === 'outbound-rtp' && stat.kind === 'video' && stat.codecId !== undefined) {
-        const codec = stats.get(stat.codecId);
-        message += `Using for send video ${codec.mimeType} ${codec.sdpFmtpLine}, payloadType=${codec.payloadType}. Encoder: ${stat.encoderImplementation} \n`;
-      }
-    });
-
-    if (message != "") {
+    const array = createDisplayStringArray(stats, lastStats);
+    if (array.length) {
       messageDiv.style.display = 'block';
-      messageDiv.innerText = message;
+      messageDiv.innerHTML = array.join('<br>');
     }
+    lastStats = stats;
   }, 1000);
+}
+
+function clearStatsMessage() {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+  lastStats = null;
+  intervalId = null;
+  localVideoStatsDiv.innerHTML = '';
+  remoteVideoStatsDiv.innerHTML = '';
+  messageDiv.style.display = 'none';
+  messageDiv.innerHTML = '';
 }

WebApp/client/public/js/stats.js

@@ -0,0 +1,91 @@
+/**
+ * create display string array from RTCStatsReport
+ * @param {RTCStatsReport} report - current RTCStatsReport
+ * @param {RTCStatsReport} lastReport - latest RTCStatsReport
+ * @return {Array<string>} - display string Array
+ */
+export function createDisplayStringArray(report, lastReport) {
+  let array = new Array();
+
+  report.forEach(stat => {
+    if (stat.type === 'inbound-rtp') {
+      array.push(`${stat.kind} receiving stream stats`);
+
+      if (stat.codecId != undefined) {
+        const codec = report.get(stat.codecId);
+        array.push(`Codec: ${codec.mimeType}`);
+
+        if (codec.sdpFmtpLine) {
+          codec.sdpFmtpLine.split(";").forEach(fmtp => {
+            array.push(` - ${fmtp}`);
+          });
+        }
+
+        if (codec.payloadType) {
+          array.push(` - payloadType=${codec.payloadType}`);
+        }
+
+        if (codec.clockRate) {
+          array.push(` - clockRate=${codec.clockRate}`);
+        }
+
+        if (codec.channels) {
+          array.push(` - channels=${codec.channels}`);
+        }
+      }
+
+      if (stat.kind == "video") {
+        array.push(`Decoder: ${stat.decoderImplementation}`);
+        array.push(`Resolution: ${stat.frameWidth}x${stat.frameHeight}`);
+        array.push(`Framerate: ${stat.framesPerSecond}`);
+      }
+
+      if (lastReport && lastReport.has(stat.id)) {
+        const lastStats = lastReport.get(stat.id);
+        const duration = (stat.timestamp - lastStats.timestamp) / 1000;
+        const bitrate = (8 * (stat.bytesReceived - lastStats.bytesReceived) / duration) / 1000;
+        array.push(`Bitrate: ${bitrate.toFixed(2)} kbit/sec`);
+      }
+    } else if (stat.type === 'outbound-rtp') {
+      array.push(`${stat.kind} sending stream stats`);
+
+      if (stat.codecId != undefined) {
+        const codec = report.get(stat.codecId);
+        array.push(`Codec: ${codec.mimeType}`);
+
+        if (codec.sdpFmtpLine) {
+          codec.sdpFmtpLine.split(";").forEach(fmtp => {
+            array.push(` - ${fmtp}`);
+          });
+        }
+
+        if (codec.payloadType) {
+          array.push(` - payloadType=${codec.payloadType}`);
+        }
+
+        if (codec.clockRate) {
+          array.push(` - clockRate=${codec.clockRate}`);
+        }
+
+        if (codec.channels) {
+          array.push(` - channels=${codec.channels}`);
+        }
+      }
+
+      if (stat.kind == "video") {
+        array.push(`Encoder: ${stat.encoderImplementation}`);
+        array.push(`Resolution: ${stat.frameWidth}x${stat.frameHeight}`);
+        array.push(`Framerate: ${stat.framesPerSecond}`);
+      }
+
+      if (lastReport && lastReport.has(stat.id)) {
+        const lastStats = lastReport.get(stat.id);
+        const duration = (stat.timestamp - lastStats.timestamp) / 1000;
+        const bitrate = (8 * (stat.bytesSent - lastStats.bytesSent) / duration) / 1000;
+        array.push(`Bitrate: ${bitrate.toFixed(2)} kbit/sec`);
+      }
+    }
+  });
+
+  return array;
+}

WebApp/client/public/multiplay/js/main.js

@@ -6,6 +6,10 @@ import {
   getServerConfig
 } from "../../js/config.js";
 
+import {
+  createDisplayStringArray
+} from "../../js/stats.js"
+
 setup();
 
 let playButton;
@@ -36,7 +40,6 @@ async function setup() {
   useWebSocket = res.useWebSocket;
   showWarningIfNeeded(res.startupMode);
   showCodecSelect();
-  showStatsMessage();
   showPlayButton();
 }
 
@@ -124,16 +127,20 @@ async function setupVideoPlayer(elements) {
 
   await videoPlayer.setupConnection(useWebSocket, selectedCodecs);
   videoPlayer.ondisconnect = onDisconnect;
+  showStatsMessage();
+
   return videoPlayer;
 }
 
-function onDisconnect(message) {
+async function onDisconnect(message) {
+  clearStatsMessage();
   if (message) {
     messageDiv.style.display = 'block';
     messageDiv.innerText = message;
   }
 
   clearChildren(playerDiv);
+  await videoPlayer.stop();
   videoPlayer = null;
   if (supportsSetCodecPreferences) {
     codecPreferences.disabled = false;
@@ -167,8 +174,11 @@ function showCodecSelect() {
   codecPreferences.disabled = false;
 }
 
+let lastStats;
+let intervalId;
+
 function showStatsMessage() {
-  setInterval(async () => {
+  intervalId = setInterval(async () => {
     if (videoPlayer == null) {
       return;
     }
@@ -177,13 +187,22 @@ function showStatsMessage() {
     if (stats == null) {
       return;
     }
-    stats.forEach(stat => {
-      if (!(stat.type === 'inbound-rtp' && stat.kind === 'video') || stat.codecId === undefined) {
-        return;
-      }
-      const codec = stats.get(stat.codecId);
+
+    const array = createDisplayStringArray(stats, lastStats);
+    if (array.length) {
       messageDiv.style.display = 'block';
-      messageDiv.innerText = `Using ${codec.mimeType} ${codec.sdpFmtpLine}, payloadType=${codec.payloadType}. Decoder: ${stat.decoderImplementation}`;
-    });
+      messageDiv.innerHTML = array.join('<br>');
+    }
+    lastStats = stats;
   }, 1000);
+}
+
+function clearStatsMessage() {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+  lastStats = null;
+  intervalId = null;
+  messageDiv.style.display = 'none';
+  messageDiv.innerHTML = '';
 }

WebApp/client/public/receiver/js/main.js

@@ -1,5 +1,6 @@
 import { Receiver } from "./receiver.js";
 import { getServerConfig } from "../../js/config.js";
+import { createDisplayStringArray } from "../../js/stats.js";
 
 setup();
 
@@ -34,7 +35,6 @@ async function setup() {
   showWarningIfNeeded(res.startupMode);
   showCodecSelect();
   showPlayButton();
-  showStatsMessage();
 }
 
 function showWarningIfNeeded(startupMode) {
@@ -170,11 +170,13 @@ async function setupVideoPlayer(elements) {
 
   await videoPlayer.setupConnection(useWebSocket, selectedCodecs);
   videoPlayer.ondisconnect = onDisconnect;
+  showStatsMessage();
 
   return videoPlayer;
 }
 
 async function onDisconnect(message) {
+  clearStatsMessage();
   if (message) {
     messageDiv.style.display = 'block';
     messageDiv.innerText = message;
@@ -215,8 +217,11 @@ function showCodecSelect() {
   codecPreferences.disabled = false;
 }
 
+let lastStats;
+let intervalId;
+
 function showStatsMessage() {
-  setInterval(async () => {
+  intervalId = setInterval(async () => {
     if (receiver == null) {
       return;
     }
@@ -225,13 +230,22 @@ function showStatsMessage() {
     if (stats == null) {
       return;
     }
-    stats.forEach(stat => {
-      if (!(stat.type === 'inbound-rtp' && stat.kind === 'video') || stat.codecId === undefined) {
-        return;
-      }
-      const codec = stats.get(stat.codecId);
+
+    const array = createDisplayStringArray(stats, lastStats);
+    if (array.length) {
       messageDiv.style.display = 'block';
-      messageDiv.innerText = `Using ${codec.mimeType} ${codec.sdpFmtpLine}, payloadType=${codec.payloadType}. Decoder: ${stat.decoderImplementation}`;
-    });
+      messageDiv.innerHTML = array.join('<br>');
+    }
+    lastStats = stats;
   }, 1000);
+}
+
+function clearStatsMessage() {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+  lastStats = null;
+  intervalId = null;
+  messageDiv.style.display = 'none';
+  messageDiv.innerHTML = '';
 }

com.unity.renderstreaming/Runtime/Scripts/Broadcast.cs

@@ -8,11 +8,12 @@ public class Broadcast : SignalingHandlerBase,
         IOfferHandler, IAddChannelHandler, IDisconnectHandler, IDeletedConnectionHandler,
         IAddReceiverHandler
     {
-        [SerializeField]
-        private List<Component> streams = new List<Component>();
+        [SerializeField] private List<Component> streams = new List<Component>();
 
         private List<string> connectionIds = new List<string>();
 
+        public override IEnumerable<Component> Streams => streams;
+
         public void AddComponent(Component component)
         {
             streams.Add(component);

com.unity.renderstreaming/Runtime/Scripts/SignalingHandlerBase.cs

@@ -27,6 +27,11 @@ public abstract class SignalingHandlerBase : MonoBehaviour
     {
         private IRenderStreamingHandler m_handler;
 
+        /// <summary>
+        ///
+        /// </summary>
+        public virtual IEnumerable<Component> Streams => null;
+
         /// <summary>
         ///
         /// </summary>
@@ -303,12 +308,12 @@ internal void SetHandler(IRenderStreamingHandler handler)
     public interface IStreamSender
     {
         /// <summary>
-        /// 
+        ///
         /// </summary>
         MediaStreamTrack Track { get; }
 
         /// <summary>
-        /// 
+        ///
         /// </summary>
         IReadOnlyDictionary<string, RTCRtpTransceiver> Transceivers { get; }
 

com.unity.renderstreaming/Runtime/Scripts/SingleConnection.cs

@@ -12,6 +12,8 @@ public class SingleConnection : SignalingHandlerBase,
 
         private string connectionId;
 
+        public override IEnumerable<Component> Streams => streams;
+
         public void AddComponent(Component component)
         {
             streams.Add(component);