Framerate stats

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

@@ -11,10 +11,14 @@ import { OpenVidu, Callback } from './OpenVidu';
 import EventEmitter = require('wolfy87-eventemitter');
 import * as kurentoUtils from 'kurento-utils';
 
-import 'webrtc-adapter';
+import * as adapter from 'webrtc-adapter';
 declare var navigator: any;
 declare var RTCSessionDescription: any;
 
+if (window) {
+    window["adapter"] = adapter;
+}
+
 function jq(id: string): string {
     return id.replace(/(@|:|\.|\[|\]|,)/g, "\\$1");
 }
@@ -252,7 +256,7 @@ export class Stream {
         }
     }
 
-    getRTCPeerConnection(){
+    getRTCPeerConnection() {
         return this.getWebRtcPeer().peerConnection;
     }
 

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

@@ -56,11 +56,12 @@
           <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>
+            <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>
+            <h2 *ngIf="stats[i].bitrate">Bitrate: {{stats[i].bitrate}}</h2>
+            <h2 *ngIf="stats[i].framerate">Framerate: {{stats[i].framerate}}</h2>
           </div>
           <table [attr.id]="'table-' + i" style="display: none;">
             <tr>

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

@@ -28,6 +28,7 @@ export class AppComponent {
   //Statistics
   stats = [];
   bytesPrev = [];
+  framesPrev = [];
   timestampPrev = [];
   signalingState = [];
   iceConnectionState = [];
@@ -73,6 +74,7 @@ export class AppComponent {
     //For statistics
     this.timestampPrev.push(0);
     this.bytesPrev.push(0);
+    this.framesPrev.push(0);
   }
 
   private removeVideoTag(stream: Stream) {
@@ -83,6 +85,7 @@ export class AppComponent {
     this.stats.splice(index, 1);
     this.timestampPrev.splice(index, 1);
     this.bytesPrev.splice(index, 1);
+    this.framesPrev.splice(index, 1);
 
     this.signalingState.splice(index, 1);
     this.iceConnectionState.splice(index, 1);
@@ -231,6 +234,7 @@ export class AppComponent {
     stream.getWebRtcPeer().peerConnection.getStats(null)
       .then((results) => {
         this.stats[i] = this.dumpStats(results, i);
+        console.info(results);
       });
   }
 
@@ -238,6 +242,7 @@ export class AppComponent {
   dumpStats(results, i) {
     var statsArray = [];
     let bitrate;
+    let frames;
 
     results.forEach((res) => {
       let date = new Date(res.timestamp);
@@ -249,10 +254,14 @@ export class AppComponent {
         // firefox calculates the bitrate for us
         // https://bugzilla.mozilla.org/show_bug.cgi?id=951496
         bitrate = Math.floor(res.bitrateMean / 1024);
+        if (res.framerateMean !== undefined && res.frameRate != "0") {
+          frames = (res.framerateMean).toFixed(2);
+        }
 
       } else if (res.type === 'ssrc' && res.bytesReceived && res.googFrameRateReceived) {
         // chrome does not so we need to do it ourselves
         var bytes = res.bytesReceived;
+        frames = (res.googFrameRateOutput == "0") ? Number(this.framesPrev[i]) : Number(res.googFrameRateOutput);
         if (this.timestampPrev[i]) {
           bitrate = 8 * (bytes - this.bytesPrev[i]) / (now - this.timestampPrev[i]);
           bitrate = Math.floor(bitrate);
@@ -265,7 +274,11 @@ export class AppComponent {
     if (bitrate) {
       bitrate += ' kbits/sec';
     }
-    return { statsArray: statsArray, bitrate: bitrate };
+    if (frames) {
+      this.framesPrev[i] = frames;
+      frames += ' fps';
+    }
+    return { statsArray: statsArray, bitrate: bitrate, framerate: frames };
   }
 
   getStatAttributes(stat) {

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

@@ -14,7 +14,8 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
     template: `
         <div class='participant'>
           <p>{{stream.getId()}}</p>
-          <video autoplay="true" [src]="videoSrc"></video>
+          <video *ngIf="!stream.local" autoplay="true" [src]="videoSrc"></video>
+          <video *ngIf="stream.local" autoplay="true" [src]="videoSrc" muted></video>
         </div>`
 })
 export class StreamComponent {