openvidu-testapp: TURN conf in scenarios. Reload stream info button

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.css

@@ -27,6 +27,6 @@ app-openvidu-instance {
     width: 100%;
 }
 
-#back-report-btn {
+.report-btn{
     float: right;
 }

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.html

@@ -22,9 +22,13 @@
 <div class="report-div">
   <mat-form-field class="report-field" appearance="fill">
     <mat-label>Report</mat-label>
-    <button *ngIf="isFocusedOnReport" id="back-report-btn" mat-mini-fab color="primary" (click)="$event.stopPropagation(); textAreaValue = stringifyAllReports; isFocusedOnReport = false;">
+    <button *ngIf="isFocusedOnReport" id="back-report-btn" class="report-btn" mat-mini-fab color="primary"
+      (click)="$event.stopPropagation(); textAreaValue = stringifyAllReports; isFocusedOnReport = false;">
       <mat-icon aria-label="Go back to all streams">undo</mat-icon>
     </button>
+    <button *ngIf="!!textAreaValue && !isFocusedOnReport" id="update-report-btn" class="report-btn" mat-mini-fab color="primary" (click)="$event.stopPropagation(); updateRemoteStreamsInfo()">
+      <mat-icon aria-label="Update stream info">replay</mat-icon>
+    </button>
     <textarea matInput readonly [value]="textAreaValue" [mat-autosize]="true" [disabled]="!textAreaValue"></textarea>
   </mat-form-field>
 </div>

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts

@@ -182,6 +182,12 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
 
       this.getToken().then(token => {
         const OV = new OpenVidu();
+
+        if (this.turnConf === 'freeice') {
+          OV.setAdvancedConfiguration({ iceServers: 'freeice' });
+        } else if (this.turnConf === 'manual') {
+          OV.setAdvancedConfiguration({ iceServers: [this.manualTurnConf] });
+        }
         const session = OV.initSession();
 
         this.OVs.push(OV);
@@ -294,8 +300,60 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
   }
 
   addReportForStream(event: StreamManagerWrapper) {
+    event.streamManager.stream.getSelectedIceCandidate()
+      .then(localCandidatePair => {
 
-    const getSessionInfo = () => {
+        let newReport;
+
+        if (event.streamManager.remote) {
+          newReport = {
+            connectionId: event.connectionId,
+            streamId: event.streamManager.stream.streamId,
+            state: event.state,
+            candidatePairSelectedByBrowser: {
+              localCandidate: localCandidatePair.localCandidate,
+              remoteCandidate: localCandidatePair.remoteCandidate
+            },
+            candidatePairSelectedByKms: {
+              localCandidate: {},
+              remoteCandidate: {}
+            },
+            iceCandidatesSentByBrowser: event.streamManager.stream.getLocalIceCandidateList(),
+            iceCandidatesReceivedByBrowser: event.streamManager.stream.getRemoteIceCandidateList()
+          };
+
+          this.report.streamsIn.count++;
+          this.report.streamsIn.items.push(newReport);
+        } else {
+          newReport = {
+            connectionId: event.connectionId,
+            streamId: event.streamManager.stream.streamId,
+            state: event.state,
+            candidatePairSelectedByBrowser: {
+              localCandidate: localCandidatePair.localCandidate,
+              remoteCandidate: localCandidatePair.remoteCandidate
+            },
+            candidatePairSelectedByKms: {
+              localCandidate: {},
+              remoteCandidate: {}
+            },
+            iceCandidatesSentByBrowser: event.streamManager.stream.getLocalIceCandidateList(),
+            iceCandidatesReceivedByBrowser: event.streamManager.stream.getRemoteIceCandidateList()
+          };
+
+          this.report.streamsOut.count++;
+          this.report.streamsOut.items.push(newReport);
+        }
+
+        if (++this.numberOfReports === this.totalNumberOfStreams) {
+          this.updateRemoteStreamsInfo();
+        }
+
+      })
+      .catch();
+  }
+
+  private updateRemoteStreamsInfo() {
     let headers = new HttpHeaders();
     headers = headers.append('Authorization', 'Basic ' + btoa('OPENVIDUAPP:' + this.openviduSecret));
     this.http.get(this.openviduUrl + 'api/sessions/' + this.fixedSessionId, { headers }).subscribe(
@@ -308,7 +366,7 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
               report.webrtcTagName = p.webrtcTagName;
               return p.webrtcTagName === report.streamId;
             });
-            report.remoteCandidatePair = {
+          report.candidatePairSelectedByKms = {
             localCandidate: this.parseRemoteCandidatePair(streamOutRemoteInfo.localCandidate),
             remoteCandidate: this.parseRemoteCandidatePair(streamOutRemoteInfo.remoteCandidate)
           };
@@ -321,68 +379,18 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
               report.webrtcTagName = p.webrtcTagName;
               return p.webrtcTagName === report.connectionId + '_' + report.streamId;
             });
-            report.remoteCandidatePair = {
+          report.candidatePairSelectedByKms = {
             localCandidate: this.parseRemoteCandidatePair(streamInRemoteInfo.localCandidate),
             remoteCandidate: this.parseRemoteCandidatePair(streamInRemoteInfo.remoteCandidate)
           };
         });
 
         this.stringifyAllReports = JSON.stringify(this.report, null, '\t');
-          if (!this.textAreaValue) {
+        console.log('Info has changed: ' + !(this.stringifyAllReports === this.textAreaValue));
         this.textAreaValue = this.stringifyAllReports;
-          }
       },
       error => { }
     );
-    };
-
-    event.streamManager.stream.getSelectedIceCandidate()
-      .then(localCandidatePair => {
-
-        let newReport;
-
-        if (event.streamManager.remote) {
-          newReport = {
-            connectionId: event.connectionId,
-            streamId: event.streamManager.stream.streamId,
-            state: event.state,
-            localCandidatePair: {
-              localCandidate: localCandidatePair.localCandidate,
-              remoteCandidate: localCandidatePair.remoteCandidate
-            },
-            remoteCandidatePair: {
-              localCandidate: {},
-              remoteCandidate: {}
-            }
-          };
-
-          this.report.streamsIn.count++;
-          this.report.streamsIn.items.push(newReport);
-        } else {
-          newReport = {
-            connectionId: event.connectionId,
-            streamId: event.streamManager.stream.streamId,
-            state: event.state,
-            localCandidatePair: {
-              localCandidate: localCandidatePair.localCandidate,
-              remoteCandidate: localCandidatePair.remoteCandidate
-            },
-            remoteCandidatePair: {
-              localCandidate: {},
-              remoteCandidate: {}
-            }
-          };
-
-          this.report.streamsOut.count++;
-          this.report.streamsOut.items.push(newReport);
-        }
-
-        if (++this.numberOfReports === this.totalNumberOfStreams) {
-          getSessionInfo();
-        }
-
-      })
-      .catch();
   }
 
   private parseRemoteCandidatePair(candidateStr: string) {
@@ -392,7 +400,8 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
       ipAddress: array[4],
       transport: array[2].toLowerCase(),
       candidateType: array[7],
-      priority: array[3]
+      priority: array[3],
+      raw: candidateStr
     };
   }