Signaling and ICE connection events are now monitored

openvidu-browser/src/main/resources/ts/Stream.ts

@@ -252,6 +252,10 @@ export class Stream {
         }
     }
 
+    getRTCPeerConnection(){
+        return this.getWebRtcPeer().peerConnection;
+    }
+
     requestCameraAccess(callback: Callback<Stream>) {
 
         this.participant.addStream(this);

openvidu-ng-testapp/src/app/app.component.html

@@ -47,16 +47,22 @@
   <input type="checkbox" id="toggle-video" name="toggle-video" [checked]="toggleVideo" (change)="updateToggleVideo($event)">  Toggle your video
   <input type="checkbox" id="toggle-audio" name="toggle-audio" [checked]="toggleAudio" (change)="updateToggleAudio($event)">  Toggle your audio
   <div>
-    <div *ngFor="let s of streams; let i = index" style="display: table-row;">
-      <div style="display: inline; top: 0;">
+    <div *ngFor="let s of streams; let i = index">
+      <div style="top: 0;">
         <stream [stream]="s"></stream>
       </div>
-      <div *ngIf="stats[i]" style="display: inline-block;">
-        <div style="display: inline; margin-left: 50px;">
+      <div *ngIf="stats[i]">
+        <div style="margin-left: 50px;">
+          <input type="checkbox" id="toggle-state" name="toggle-state" [checked]="true" (change)="updateToggleState(i)">  Show conexion state
+          <div [attr.id]="'state-' + i" style="display: block;">
+            <p><b>Signaling state:</b> {{signalingState[i]}}</p>
+            <p><b>Ice connection state:</b> {{iceConnectionState[i]}}</p>
+          </div>
+          <input type="checkbox" id="toggle-statistics" name="toggle-statistics" (change)="updateToggleStatistics(i)">  Show statistics
           <div *ngIf="stats[i].bitrate">
             <h2>Bitrate: {{stats[i].bitrate}}</h2>
           </div>
-          <table>
+          <table [attr.id]="'table-' + i" style="display: none;">
             <tr>
               <th>Type</th>
               <th>Time</th>

openvidu-ng-testapp/src/app/app.component.ts

@@ -29,6 +29,8 @@ export class AppComponent {
   stats = [];
   bytesPrev = [];
   timestampPrev = [];
+  signalingState = [];
+  iceConnectionState = [];
 
 
   constructor() {
@@ -47,7 +49,26 @@ export class AppComponent {
 
   private addVideoTag(stream: Stream) {
     console.log("Stream added");
-    this.streams.push(stream);
+    let ind = (this.streams.push(stream) - 1);
+
+    this.signalingState[ind] = '';
+    this.iceConnectionState[ind] = '';
+
+    //Connection events
+    stream.getRTCPeerConnection().onsignalingstatechange = (event) => {
+      this.signalingState[ind] += " => " + stream.getRTCPeerConnection().signalingState;
+      console.info("Stream " + stream.getId() + " signaling state: " + stream.getRTCPeerConnection().signalingState);
+    }
+
+    stream.getRTCPeerConnection().oniceconnectionstatechange = (event) => {
+      /*if (stream.getRTCPeerConnection().iceconnectionstate === "failed" ||
+          stream.getRTCPeerConnection().iceconnectionstate === "disconnected" ||
+          stream.getRTCPeerConnection().iceconnectionstate === "closed") {
+        // Handle the failure
+    };*/
+      this.iceConnectionState[ind] += " => " + stream.getRTCPeerConnection().iceConnectionState;
+      console.info("Stream " + stream.getId() + " ice connection state: " + stream.getRTCPeerConnection().iceConnectionState);
+    }
 
     //For statistics
     this.timestampPrev.push(0);
@@ -62,6 +83,9 @@ export class AppComponent {
     this.stats.splice(index, 1);
     this.timestampPrev.splice(index, 1);
     this.bytesPrev.splice(index, 1);
+
+    this.signalingState.splice(index, 1);
+    this.iceConnectionState.splice(index, 1);
   }
 
   joinSession() {
@@ -109,10 +133,10 @@ export class AppComponent {
 
           this.session = session;
 
-          this.addVideoTag(camera);
-
           camera.publish();
 
+          this.addVideoTag(camera);
+
           this.intervalStats().subscribe();
 
           session.addEventListener("stream-added", streamEvent => {
@@ -149,6 +173,16 @@ export class AppComponent {
     console.log(msg);
   }
 
+  updateToggleStatistics(i) {
+    let table = (<HTMLInputElement>document.getElementById('table-' + i));
+    (table.style.display == "none") ? table.style.display = "block" : table.style.display = "none";
+  }
+
+  updateToggleState(i) {
+    let state = (<HTMLInputElement>document.getElementById('state-' + i));
+    (state.style.display == "none") ? state.style.display = "block" : state.style.display = "none";
+  }
+
   /*obtainSupportedConstraints() {
     let constraints = Object.keys(navigator.mediaDevices.getSupportedConstraints());
     this.supportedVideoContstraints = constraints.filter((e) => {

openvidu-ng-testapp/src/app/stream.component.ts

@@ -6,7 +6,6 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
     selector: 'stream',
     styles: [`    
         .participant {
-	        float: left;
 	        margin: 10px;
         }
         .participant video {