added option to log stream connection details

matthme · Jan 23, 2025 · bacba13 · bacba13
1 parent 1a946fc
commit bacba13
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 25 deletions.
diff --git a/ui/src/room-view.ts b/ui/src/room-view.ts
@@ -19,6 +19,7 @@ import {
   mdiMicrophoneOff,
   mdiMonitorScreenshot,
   mdiPaperclip,
+  mdiPencilCircleOutline,
   mdiPhoneRefresh,
   mdiVideo,
   mdiVideoOff,
@@ -256,6 +257,7 @@ export class RoomView extends LitElement {
             if (videoEl) {
               videoEl.autoplay = true;
               videoEl.srcObject = event.stream;
+              console.log('@peer-stream: Tracks: ', event.stream.getTracks());
             }
           }, 200);
           break;
@@ -658,26 +660,32 @@ export class RoomView extends LitElement {
       case 'people':
         return this.renderConnectionStatuses();
       case 'settings':
-        return html`  <div
-        class="column"
-        style="margin-top: 18px; padding: 0 20px; align-items: flex-start; position: relative;"
-      >
-        <div class="row items-center">
-          <toggle-switch
-            class="toggle-switch ${this.streamsStore.trickleICE
-              ? 'active'
-              : ''}"
-            .toggleState=${this.streamsStore.trickleICE}
-            @toggle-on=${() => {
-              this.streamsStore.enableTrickleICE();
-            }}
-            @toggle-off=${() => {
-              this.streamsStore.disableTrickleICE();
-            }}
-          ></toggle-switch>
-          <span class="secondary-font" style="color: #c3c9eb; margin-left: 10px; font-size: 23px;">trickle ICE</span>
-        </div>
-      </div> `;
+        return html`
+          <div
+            class="column"
+            style="margin-top: 18px; padding: 0 20px; align-items: flex-start; position: relative;"
+          >
+            <div class="row items-center">
+              <toggle-switch
+                class="toggle-switch ${this.streamsStore.trickleICE
+                  ? 'active'
+                  : ''}"
+                .toggleState=${this.streamsStore.trickleICE}
+                @toggle-on=${() => {
+                  this.streamsStore.enableTrickleICE();
+                }}
+                @toggle-off=${() => {
+                  this.streamsStore.disableTrickleICE();
+                }}
+              ></toggle-switch>
+              <span
+                class="secondary-font"
+                style="color: #c3c9eb; margin-left: 10px; font-size: 23px;"
+                >trickle ICE</span
+              >
+            </div>
+          </div>
+        `;
       default:
         return html`unknown tab`;
     }
@@ -1192,6 +1200,58 @@ export class RoomView extends LitElement {
                     }}
                   ></sl-icon-button>
                 </sl-tooltip>
+                ${this._showConnectionDetails
+                  ? html`
+                      <sl-tooltip
+                        content="log stream info"
+                        class="tooltip-filled"
+                      >
+                        <sl-icon-button
+                          src=${wrapPathInSvg(mdiPencilCircleOutline)}
+                          style="margin-bottom: -5px;"
+                          @click=${() => {
+                            const videoEl = this.shadowRoot?.getElementById(
+                              conn.connectionId
+                            ) as HTMLVideoElement;
+                            if (videoEl) {
+                              const stream = videoEl.srcObject;
+                              const tracks = stream
+                                ? (stream as MediaStream).getTracks()
+                                : null;
+                              console.log(
+                                '\nSTREAMINFO:',
+                                stream,
+                                '\nTRACKS: ',
+                                tracks
+                              );
+                              const tracksInfo: any[] = [];
+                              tracks?.forEach(track => {
+                                tracksInfo.push({
+                                  kind: track.kind,
+                                  enabled: track.enabled,
+                                  muted: track.muted,
+                                  readyState: track.readyState,
+                                });
+                              });
+                              const streamInfo = stream
+                                ? {
+                                    active: (stream as MediaStream).active,
+                                  }
+                                : null;
+
+                              navigator.clipboard.writeText(
+                                JSON.stringify({
+                                  stream: streamInfo,
+                                  tracks: tracksInfo,
+                                }, undefined, 2)
+                              );
+                            }
+                          }}
+                        ></sl-icon-button>
+                        <sl-tooltip></sl-tooltip>
+                      </sl-tooltip>
+                    `
+                  : html``}
               </div>
               <sl-icon
                 style="position: absolute; bottom: 10px; left: 10px; color: red; height: 30px; width: 30px; ${conn.audio

diff --git a/ui/src/streams-store.ts b/ui/src/streams-store.ts
@@ -924,7 +924,7 @@ export class StreamsStore {
       }
     });
     peer.on('stream', stream => {
-      console.log('#### GOT STREAM with tracks: ', stream.getTracks());
+      console.log('#### GOT STREAM with tracks from:', pubKeyB64, stream.getTracks());
       const withAudio = stream.getAudioTracks().length > 0;
       const withVideo = stream.getVideoTracks().length > 0;
       this._openConnections.update(currentValue => {
@@ -949,7 +949,7 @@ export class StreamsStore {
       });
     });
     peer.on('track', track => {
-      console.log('#### GOT TRACK: ', track);
+      console.log('#### GOT TRACK from:', pubKeyB64, track);
       this._openConnections.update(currentValue => {
         const openConnections = currentValue;
         const relevantConnection = openConnections[pubKeyB64];
@@ -978,7 +978,7 @@ export class StreamsStore {
       }
     });
     peer.on('connect', async () => {
-      console.log('#### CONNECTED');
+      console.log('#### CONNECTED with', pubKeyB64);
       delete this._pendingInits[pubKeyB64];
 
       const openConnections = get(this._openConnections);
@@ -1350,7 +1350,7 @@ export class StreamsStore {
   async handlePingUi(signal: Extract<RoomSignal, { type: 'PingUi' }>) {
     const pubkeyB64 = encodeHashToBase64(signal.from_agent);
     if (get(this.blockedAgents).includes(pubkeyB64)) return;
-    console.log(`Got PingUi from ${pubkeyB64}: `, signal);
+    // console.log(`Got PingUi from ${pubkeyB64}: `, signal);
     if (pubkeyB64 !== this.myPubKeyB64) {
       const metaData: PongMetaData<PongMetaDataV1> = {
         formatVersion: 1,
@@ -1382,7 +1382,7 @@ export class StreamsStore {
   async handlePongUi(signal: Extract<RoomSignal, { type: 'PongUi' }>) {
     const pubkeyB64 = encodeHashToBase64(signal.from_agent);
     const now = Date.now();
-    console.log(`Got PongUI from ${pubkeyB64}: `, signal);
+    // console.log(`Got PongUI from ${pubkeyB64}: `, signal);
     // Update their connection statuses and the list of known agents
     try {
       const metaData: PongMetaData<PongMetaDataV1> = JSON.parse(