openvidu-testapp: Show configured ICE servers on created RTCPeerConnections to check ice server configuration from OpenVidu

openvidu-testapp/src/app/app.module.ts

@@ -33,6 +33,7 @@ import { OpenviduParamsService } from './services/openvidu-params.service';
 import { TestFeedService } from './services/test-feed.service';
 import { MuteSubscribersService } from './services/mute-subscribers.service';
 import { SessionInfoDialogComponent } from "./components/dialogs/session-info-dialog/session-info-dialog.component";
+import { ShowIceServerConfiguredDialog } from './components/dialogs/show-configured-ice/show-configured-ice.component';
 
 @NgModule({
   declarations: [
@@ -53,6 +54,7 @@ import { SessionInfoDialogComponent } from "./components/dialogs/session-info-di
     ScenarioPropertiesDialogComponent,
     FilterDialogComponent,
     ShowCodecDialogComponent,
+    ShowIceServerConfiguredDialog,
     SessionInfoDialogComponent,
     UsersTableComponent,
     TableVideoComponent
@@ -82,6 +84,7 @@ import { SessionInfoDialogComponent } from "./components/dialogs/session-info-di
     ScenarioPropertiesDialogComponent,
     FilterDialogComponent,
     ShowCodecDialogComponent,
+    ShowIceServerConfiguredDialog,
     SessionInfoDialogComponent
   ],
   bootstrap: [AppComponent]

openvidu-testapp/src/app/components/dialogs/show-configured-ice/show-configured-ice.component.ts

@@ -0,0 +1,37 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+
+@Component({
+  selector: 'app-ice-configured-dialog',
+  template: `
+        <div id="app-ice-configured-dialog-container">
+            <ul id="ice-server-list">
+              <div class="ice-server" *ngFor="let iceServer of iceServerList; index as i">
+                <li id="ice-server-{{i}}">
+                  <p>
+                  ICE Server URL: <span id="ice-server-url-{{i}}">{{iceServer.urls}}</span> -
+                  Username: <span *ngIf="iceServer.username" id="ice-server-username-{{i}}">{{iceServer.username}}</span> -
+                  Credential: <span *ngIf="iceServer.credential" id="ice-server-credential-{{i}}">{{iceServer.credential}}</span>
+                  </p>
+                </li>
+              </div>
+              <button mat-button id="close-dialog-btn" [mat-dialog-close]="{}">CLOSE</button>
+          </ul>
+        </div>
+    `,
+  styles: [`
+        #app-ice-configured-dialog-container {
+            text-align: center
+        }
+    `]
+})
+export class ShowIceServerConfiguredDialog {
+
+  iceServerList: RTCIceServer[]
+
+  constructor(public dialogRef: MatDialogRef<ShowIceServerConfiguredDialog>,
+    @Inject(MAT_DIALOG_DATA) public data) {
+    this.iceServerList = data.iceServerList;
+  }
+}

openvidu-testapp/src/app/components/video/video.component.html

@@ -11,6 +11,9 @@
             <button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
               <mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
             </button>
+            <button class="video-btn stats-button bottom-left-rounded" title="Ice Server configuration" (click)="getConfiguredIceServer()">
+              <mat-icon aria-label="Ice Server configuration" class="mat-icon material-icons" role="img" aria-hidden="true">storage</mat-icon>
+            </button>
         </div>
         <div class="bottom-div">
             <button class="video-btn pub-btn" title="Publish/Unpublish" (click)="pubUnpub()">
@@ -53,6 +56,9 @@
             <button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
               <mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
             </button>
+            <button class="video-btn stats-button bottom-left-rounded" title="Ice Server configuration" (click)="getConfiguredIceServer()">
+              <mat-icon aria-label="Ice Server configuration" class="mat-icon material-icons" role="img" aria-hidden="true">storage</mat-icon>
+            </button>
         </div>
         <div class="bottom-div">
             <button class="video-btn sub-btn" title="Subscribe/Unsubscribe" (click)="subUnsub()">

openvidu-testapp/src/app/components/video/video.component.ts

@@ -23,6 +23,7 @@ import { LocalRecordingDialogComponent } from '../dialogs/local-recording-dialog
 import { ExtensionDialogComponent } from '../dialogs/extension-dialog/extension-dialog.component';
 import { FilterDialogComponent } from '../dialogs/filter-dialog/filter-dialog.component';
 import { OpenViduEvent } from '../openvidu-instance/openvidu-instance.component';
+import { ShowIceServerConfiguredDialog } from '../dialogs/show-configured-ice/show-configured-ice.component';
 
 @Component({
     selector: 'app-video',
@@ -813,6 +814,16 @@ export class VideoComponent implements OnInit, OnDestroy {
           });
       }
 
+      getConfiguredIceServer() {
+        let iceServerList: RTCIceServer[] = this.streamManager.stream.getWebRtcPeer().pc.getConfiguration().iceServers;
+        this.dialog.open(ShowIceServerConfiguredDialog, {
+          data: {
+            iceServerList: iceServerList
+          },
+          width: '450px'
+        })
+      }
+
       async showCodecUsed() {
           let stats = await this.streamManager.stream.getWebRtcPeer().pc.getStats();
           let codecIdIndex = null;