get codec by webrtc api: pc.getStats

trunk/research/players/js/srs.sdk.js

@@ -686,33 +686,29 @@ function SrsRtcWhipWhepAsync() {
     return self;
 }
 
-// Format the codec of RTCRtpSender, kind(audio/video) is optional filter.
-// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
-function SrsRtcFormatSenders(senders, kind) {
+// https://developer.mozilla.org/en-US/docs/Web/API/RTCStatsReport
+function SrsRtcFormatStats(stats, kind) {
     var codecs = [];
-    senders.forEach(function (sender) {
-        var params = sender.getParameters();
-        params && params.codecs && params.codecs.forEach(function(c) {
-            if (kind && sender.track.kind !== kind) {
-                return;
-            }
-
-            if (c.mimeType.indexOf('/red') > 0 || c.mimeType.indexOf('/rtx') > 0 || c.mimeType.indexOf('/fec') > 0) {
-                return;
-            }
-
+    stats.forEach((report) => {
+        if (report.type === 'codec' && report.mimeType?.toLowerCase().startsWith(kind)) {
             var s = '';
 
-            s += c.mimeType.replace('audio/', '').replace('video/', '');
-            s += ', ' + c.clockRate + 'HZ';
-            if (sender.track.kind === "audio") {
-                s += ', channels: ' + c.channels;
+            s += report.mimeType.split('/')[1] || report.mimeType;
+
+            if (report.clockRate) {
+                s += ', ' + report.clockRate + 'HZ';
             }
-            s += ', pt: ' + c.payloadType;
 
+            if (kind === 'audio' && report.channels) {
+                s += ', channels: ' + report.channels;
+            }
+
+            if (report.payloadType) {
+                s += ', pt: ' + report.payloadType;
+            }
+
             codecs.push(s);
-        });
+        }
     });
     return codecs.join(", ");
-}
-
+}

trunk/research/players/whep.html

@@ -71,6 +71,10 @@
 
     SessionID: <span id='sessionid'></span>
 
+    <p></p>
+    Audio: <span id='acodecs'></span><br/>
+    Video: <span id='vcodecs'></span>
+
     <p></p>
     Simulator: <a href='#' id='simulator-drop'>Drop</a>
 
@@ -82,9 +86,14 @@
 <script type="text/javascript">
 $(function(){
     var sdk = null; // Global handler to do cleanup when republishing.
+    var statsTimer = null;
     var startPlay = function() {
         $('#rtc_media_player').show();
 
+        if (statsTimer) {
+            clearInterval(statsTimer);
+        }
+
         // Close PC when user replay.
         if (sdk) {
             sdk.close();
@@ -97,6 +106,22 @@
         // Optional callback, SDK will add track to stream.
         // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
 
+        // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats
+        statsTimer = setInterval(() => {
+            sdk.pc.getStats(null).then((stats) => {
+                let audioStatsOutput = SrsRtcFormatStats(stats, 'audio');
+                let videoStatsOutput = SrsRtcFormatStats(stats, 'video');
+
+                document.querySelector("#acodecs").innerHTML = audioStatsOutput;
+                document.querySelector("#vcodecs").innerHTML = videoStatsOutput;
+
+                if (audioStatsOutput && videoStatsOutput) {
+                    clearInterval(statsTimer);
+                    console.log('Stats detected, stopping stats timer');
+                }
+            });
+        }, 1000);
+
         // For example: webrtc://r.ossrs.net/live/livestream
         var url = $("#txt_url").val();
         sdk.play(url, {

trunk/research/players/whip.html

@@ -93,9 +93,14 @@
 <script type="text/javascript">
 $(function(){
     var sdk = null; // Global handler to do cleanup when republishing.
+    var statsTimer = null;
     var startPublish = function() {
         $('#rtc_media_player').show();
 
+        if (statsTimer) {
+            clearInterval(statsTimer);
+        }
+
         // Close PC when user replay.
         if (sdk) {
             sdk.close();
@@ -108,13 +113,21 @@
         // Optional callback, SDK will add track to stream.
         // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
 
-        // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
-        sdk.pc.onicegatheringstatechange = function (event) {
-            if (sdk.pc.iceGatheringState === "complete") {
-                $('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
-                $('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
-            }
-        };
+        // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats
+        statsTimer = setInterval(() => {
+            sdk.pc.getStats(null).then((stats) => {
+                let audioStatsOutput = SrsRtcFormatStats(stats, 'audio');
+                let videoStatsOutput = SrsRtcFormatStats(stats, 'video');
+
+                document.querySelector("#acodecs").innerHTML = audioStatsOutput;
+                document.querySelector("#vcodecs").innerHTML = videoStatsOutput;
+
+                if (audioStatsOutput && videoStatsOutput) {
+                    clearInterval(statsTimer);
+                    console.log('Stats detected, stopping stats timer');
+                }
+            });
+        }, 1000);
 
         // For example: webrtc://r.ossrs.net/live/livestream
         var url = $("#txt_url").val();