openvidu-testapp: Add button to show codec for each video [Only works in Chrome]

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

@@ -25,6 +25,7 @@ import { EventsDialogComponent } from './components/dialogs/events-dialog/events
 import { PublisherPropertiesDialogComponent } from './components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component';
 import { ScenarioPropertiesDialogComponent } from './components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component';
 import { FilterDialogComponent } from './components/dialogs/filter-dialog/filter-dialog.component';
+import { ShowCodecDialogComponent } from './components/dialogs/show-codec-dialog/show-codec-dialog.component';
 
 import { OpenviduRestService } from './services/openvidu-rest.service';
 import { OpenviduParamsService } from './services/openvidu-params.service';
@@ -49,7 +50,8 @@ import { MuteSubscribersService } from './services/mute-subscribers.service';
     ScenarioPropertiesDialogComponent,
     FilterDialogComponent,
     UsersTableComponent,
-    TableVideoComponent
+    TableVideoComponent,
+    ShowCodecDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -74,7 +76,8 @@ import { MuteSubscribersService } from './services/mute-subscribers.service';
     LocalRecordingDialogComponent,
     PublisherPropertiesDialogComponent,
     ScenarioPropertiesDialogComponent,
-    FilterDialogComponent
+    FilterDialogComponent,
+    ShowCodecDialogComponent
   ],
   bootstrap: [AppComponent]
 })

openvidu-testapp/src/app/components/dialogs/show-codec-dialog/show-codec-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+    selector: 'app-codec-used-dialog',
+    template: `
+        <div id="app-codec-dialog-container">
+            <h2 id="codec-used-title-dialog" mat-dialog-title>Used Codec: <span id="video-codec-used">{{usedVideoCodec}}</span></h2>
+            <button mat-button id="close-dialog-btn" [mat-dialog-close]="{}">CLOSE</button>
+            
+        </div>
+    `,
+    styles: [`
+        #app-codec-dialog-container {
+            text-align: center
+        }
+    `]
+})
+export class ShowCodecDialogComponent {
+    
+    usedVideoCodec;
+
+    constructor(public dialogRef: MatDialogRef<ShowCodecDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data) {
+        this.usedVideoCodec = data.usedVideoCodec;        
+    }
+}

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

@@ -5,7 +5,7 @@
             <button class="video-btn events-btn bottom-left-rounded" title="Publisher events" (click)="openPublisherEventsDialog()">
                 <mat-icon aria-label="Publisher events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
             </button>
-            <button class="video-btn events-btn bottom-left-rounded" title="Peer Connection Stats" (click)="showStats()">
+            <button class="video-btn events-btn 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>
         </div>
@@ -44,6 +44,9 @@
             <button *ngIf="subbed" class="video-btn events-btn bottom-left-rounded" title="Subscriber events" (click)="openSubscriberEventsDialog()">
                 <mat-icon aria-label="Subscriber events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
             </button>
+            <button class="video-btn events-btn 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>
         </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

@@ -21,6 +21,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 { ShowCodecDialogComponent } from '../dialogs/show-codec-dialog/show-codec-dialog.component';
 
 @Component({
     selector: 'app-video',
@@ -66,7 +67,10 @@ export class VideoComponent implements OnInit, OnDestroy {
     pubSubAudioIcon = 'mic';
     recordIcon = 'fiber_manual_record';
     pauseRecordIcon = '';
-
+    
+    // Stats
+    usedVideoCodec: string;
+    
     constructor(private dialog: MatDialog, private muteSubscribersService: MuteSubscribersService
     ) { }
 
@@ -727,11 +731,30 @@ export class VideoComponent implements OnInit, OnDestroy {
         });
     }
     
-    async showStats() {
+    async showCodecUsed() {
         let stats = await this.streamManager.stream.getWebRtcPeer().pc.getStats(null);
+        let codecIdIndex = null;
+        // Search codec Index
         stats.forEach(report => {
-            console.log(report);
+            if (!this.streamManager.remote && report.id.includes("RTCOutboundRTPVideoStream")) {
+                codecIdIndex = report.codecId;
+                
+            } else if (this.streamManager.remote && report.id.includes("RTCInboundRTPVideoStream")) {
+                codecIdIndex = report.codecId;
+            }
         })
+        // Search codec Info
+        stats.forEach(report => {
+            if (report.id === codecIdIndex) {
+                this.usedVideoCodec = report.mimeType;
+            }
+        })
+        this.dialog.open(ShowCodecDialogComponent, {
+            data: {
+              usedVideoCodec: this.usedVideoCodec
+            },
+            width: '450px'
+        });
     }
 
 }