webrtc debugger

5 files changed, 58 insertions, 4 deletions

diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index a319172..e07fc7a 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -35,6 +35,7 @@ export const eh3 = elem_with_content("h3")
 export const eh4 = elem_with_content("h4")
 export const eh5 = elem_with_content("h5")
 export const eh6 = elem_with_content("h6")
+export const epre = elem_with_content("pre")
 export const ediv = elem_with_children("div")
 export const etr = elem_with_children("tr")
 export const etd = elem_with_children("td")
diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 159bcce..baabdb4 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -13,8 +13,14 @@ export const ROOM_CONTAINER = ediv({ class: "room" })
 
 export const RTC_CONFIG: RTCConfiguration = {
     iceServers: [
-        { urls: ["stun:meet.metamuffin.org:16900"] },
-        { urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"] } // google stun!?
+        {
+            urls: [
+                "turn:meet.metamuffin.org:16900",
+                "stun:meet.metamuffin.org:16900"
+            ],
+            username: "keksmeet",
+            credential: "ujCmetg6bm0"
+        },
     ],
     iceCandidatePoolSize: 10,
 }
diff --git a/client-web/source/preferences/decl.ts b/client-web/source/preferences/decl.ts
index d641915..c0cf55d 100644
--- a/client-web/source/preferences/decl.ts
+++ b/client-web/source/preferences/decl.ts
@@ -13,6 +13,7 @@ export const PREF_DECLS = {
     username: { type: string, default: "guest-" + hex_id(), description: "Username", allow_url: true },
     warn_redirect: { type: bool, hidden: true, default: false, description: "Internal option that is set by a server redirect.", allow_url: true },
     image_view_popup: { type: bool, default: true, description: "Open image in popup instead of new tab" },
+    webrtc_debug: { type: bool, default: false, description: "Show additional information for WebRTC related stuff" },
 
     /* MEDIA */
     microphone_enabled: { type: bool, default: false, description: "Add one microphone track on startup" },
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