webrtc debugger

2 files changed, 48 insertions, 2 deletions

diff --git a/client-web/source/user/mod.ts b/client-web/source/user/mod.ts
index e2db9e9..581ac7e 100644
--- a/client-web/source/user/mod.ts
+++ b/client-web/source/user/mod.ts
@@ -1,5 +1,6 @@
 /// <reference lib="dom" />
 
+import { epre, espan } from "../helper.ts";
 import { ROOM_CONTAINER } from "../index.ts";
 import { log } from "../logger.ts"
 import { Room } from "../room.ts"
@@ -11,7 +12,8 @@ export abstract class User {
     public local = false
     public tracks: Set<TrackHandle> = new Set()
 
-    private name_el = document.createElement("span")
+    private name_el = espan("")
+    protected stats_el = epre("", { class: "stats" })
     private _name?: string
     get name() { return this._name }
     set name(n: string | undefined) { this._name = n; this.name_el.textContent = this.display_name }
@@ -49,7 +51,7 @@ export abstract class User {
         info_el.classList.add("info")
         this.name_el.textContent = this.display_name
         this.name_el.classList.add("name")
-        info_el.append(this.name_el)
+        info_el.append(this.name_el, this.stats_el)
         this.el.append(info_el)
     }
 
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index 243279b..07d8cf5 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -21,16 +21,19 @@ export class RemoteUser extends User {
         this.peer = new RTCPeerConnection(RTC_CONFIG)
         this.peer.onicecandidate = ev => {
             if (!ev.candidate) return
+            this.update_stats()
             log("webrtc", `ICE candidate set`, ev.candidate)
             room.signaling.send_relay({ ice_candidate: ev.candidate.toJSON() }, this.id)
         }
         this.peer.ontrack = ev => {
             const t = ev.track
+            this.update_stats()
             log("media", `remote track: ${this.display_name}`, t)
             this.add_track(new TrackHandle(t))
         }
         this.peer.onnegotiationneeded = async () => {
             log("webrtc", `negotiation needed: ${this.display_name}`)
+            this.update_stats()
             while (this.negotiation_busy) {
                 await new Promise<void>(r => setTimeout(() => r(), 100))
             }
@@ -38,7 +41,21 @@ export class RemoteUser extends User {
         }
         this.peer.onicecandidateerror = () => {
             log({ scope: "webrtc", warn: true }, "ICE error")
+            this.update_stats()
         }
+        this.peer.oniceconnectionstatechange = () => {
+            this.update_stats()
+        }
+        this.peer.onicegatheringstatechange = () => {
+            this.update_stats()
+        }
+        this.peer.onsignalingstatechange = () => {
+            this.update_stats()
+        }
+        this.peer.onconnectionstatechange = () => {
+            this.update_stats()
+        }
+        this.update_stats()
     }
     leave() {
         log("usermodel", `remove remote user: ${this.display_name}`)
@@ -60,6 +77,32 @@ export class RemoteUser extends User {
         }
     }
 
+    async update_stats() {
+        if (!PREFS.webrtc_debug) return
+        try {
+            const stats = await this.peer.getStats()
+            let stuff = "";
+            stuff += `ice-conn=${this.peer.iceConnectionState}; ice-gathering=${this.peer.iceGatheringState}; signaling=${this.peer.signalingState}\n`
+            stats.forEach(s => {
+                console.log("stat", s);
+                if (s.type == "candidate-pair" && s.selected) {
+                    //@ts-ignore spec is weird....
+                    if (!stats.get) return
+                    //@ts-ignore spec is weird....
+                    const cpstat = stats.get(s.localCandidateId)
+                    if (!cpstat) return
+                    console.log("cp", cpstat);
+                    stuff += `via ${cpstat.candidateType}:${cpstat.protocol}:${cpstat.address}\n`
+                } else if (s.type == "codec") {
+                    stuff += `using ${s.codecType ?? "dec/enc"}:${s.mimeType}(${s.sdpFmtpLine})\n`
+                }
+            })
+            this.stats_el.textContent = stuff
+        } catch (e) {
+            console.warn(e);
+        }
+    }
+
     async offer() {
         this.negotiation_busy = true
         const offer_description = await this.peer.createOffer()
@@ -92,5 +135,6 @@ export class RemoteUser extends User {
 
     add_ice_candidate(candidate: RTCIceCandidateInit) {
         this.peer.addIceCandidate(new RTCIceCandidate(candidate))
+        this.update_stats()
     }
 }
\ No newline at end of file