openvidu-testapp: StreamPropertyChangedEvent

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

@@ -6,7 +6,7 @@ import {
 import {
   OpenVidu, Session, Subscriber, Publisher, VideoInsertMode, StreamEvent, ConnectionEvent,
   SessionDisconnectedEvent, SignalEvent, RecordingEvent,
-  PublisherSpeakingEvent, PublisherProperties
+  PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent
 } from 'openvidu-browser';
 import {
   OpenVidu as OpenViduAPI,
@@ -101,6 +101,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     sessionDisconnected: true,
     streamCreated: true,
     streamDestroyed: true,
+    streamPropertyChanged: true,
     recordingStarted: true,
     recordingStopped: true,
     signal: true,
@@ -190,6 +191,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       sessionDisconnected: false,
       streamCreated: false,
       streamDestroyed: false,
+      streamPropertyChanged: false,
       recordingStarted: false,
       recordingStopped: false,
       signal: false,
@@ -284,7 +286,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       type: 'chat'
     })
       .then(() => {
-        console.log('Message succesfully sent');
+        console.log('Message successfully sent');
       })
       .catch(error => {
         console.error(error);
@@ -320,6 +322,16 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       }
     }
 
+    if (this.sessionEvents.streamPropertyChanged !== oldValues.streamPropertyChanged || firstTime) {
+      this.session.off('streamPropertyChanged');
+      if (this.sessionEvents.streamPropertyChanged) {
+        this.session.on('streamPropertyChanged', (event: StreamPropertyChangedEvent) => {
+          const newValue = event.changedProperty === 'videoDimensions' ? JSON.stringify(event.newValue) : event.newValue.toString();
+          this.updateEventList('streamPropertyChanged', event.changedProperty + ' [' + newValue + ']');
+        });
+      }
+    }
+
     if (this.sessionEvents.connectionCreated !== oldValues.connectionCreated || firstTime) {
       this.session.off('connectionCreated');
       if (this.sessionEvents.connectionCreated) {
@@ -514,6 +526,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       sessionDisconnected: this.sessionEvents.sessionDisconnected,
       streamCreated: this.sessionEvents.streamCreated,
       streamDestroyed: this.sessionEvents.streamDestroyed,
+      streamPropertyChanged: this.sessionEvents.streamPropertyChanged,
       recordingStarted: this.sessionEvents.recordingStarted,
       recordingStopped: this.sessionEvents.recordingStopped,
       signal: this.sessionEvents.signal,
@@ -543,6 +556,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         sessionDisconnected: result.sessionDisconnected,
         streamCreated: result.streamCreated,
         streamDestroyed: result.streamDestroyed,
+        streamPropertyChanged: result.streamPropertyChanged,
         recordingStarted: result.recordingStarted,
         recordingStopped: result.recordingStopped,
         signal: result.signal,

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

@@ -15,7 +15,8 @@ import {
   StreamEvent,
   StreamManagerEvent,
   PublisherProperties,
-  ConnectionEvent
+  ConnectionEvent,
+  StreamPropertyChangedEvent
 } from 'openvidu-browser';
 import {
   OpenVidu as OpenViduAPI,
@@ -367,7 +368,7 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
   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(
+    this.http.get(this.openviduUrl + 'api/sessions/' + this.fixedSessionId + '?webRtcStats=true', { headers }).subscribe(
       sessionInfo => {
 
         this.report.streamsOut.items.forEach(report => {
@@ -444,7 +445,7 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
   /*addReportForStreamConcurrent(event: StreamManagerWrapper) {
     let headers = new HttpHeaders();
     headers = headers.append('Authorization', 'Basic ' + btoa('OPENVIDUAPP:' + this.openviduSecret));
-    this.http.get(this.openviduUrl + 'api/sessions/' + this.fixedSessionId, { headers }).subscribe(
+    this.http.get(this.openviduUrl + 'api/sessions/' + this.fixedSessionId + '?webRtcStats=true', { headers }).subscribe(
       sessionInfo => {
 
         event.streamManager.stream.getSelectedIceCandidate()

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

@@ -4,6 +4,7 @@ import { MatDialog, MatDialogRef } from '@angular/material';
 import {
     StreamManager,
     StreamManagerEvent,
+    StreamPropertyChangedEvent,
     VideoElementEvent,
     Subscriber,
     OpenVidu,
@@ -73,12 +74,14 @@ export class VideoComponent implements OnInit, OnDestroy {
             this.eventCollection = {
                 videoElementCreated: true,
                 videoElementDestroyed: true,
-                streamPlaying: true
+                streamPlaying: true,
+                streamPropertyChanged: false
             };
             this.updateSubscriberEvents({
                 videoElementCreated: false,
                 videoElementDestroyed: false,
-                streamPlaying: false
+                streamPlaying: false,
+                streamPropertyChanged: true
             });
 
         } else {
@@ -92,7 +95,8 @@ export class VideoComponent implements OnInit, OnDestroy {
                 accessDialogOpened: true,
                 accessDialogClosed: true,
                 streamCreated: true,
-                streamDestroyed: true
+                streamDestroyed: true,
+                streamPropertyChanged: false
             };
             this.updatePublisherEvents(
                 <Publisher>this.streamManager,
@@ -105,7 +109,8 @@ export class VideoComponent implements OnInit, OnDestroy {
                     accessDialogOpened: false,
                     accessDialogClosed: false,
                     streamCreated: false,
-                    streamDestroyed: false
+                    streamDestroyed: false,
+                    streamPropertyChanged: true
                 });
             this.sendAudio = this.streamManager.stream.hasAudio;
             this.sendVideo = this.streamManager.stream.hasVideo;
@@ -149,7 +154,8 @@ export class VideoComponent implements OnInit, OnDestroy {
             const oldValues = {
                 videoElementCreated: this.eventCollection.videoElementCreated,
                 videoElementDestroyed: this.eventCollection.videoElementDestroyed,
-                streamPlaying: this.eventCollection.streamPlaying
+                streamPlaying: this.eventCollection.streamPlaying,
+                streamPropertyChanged: this.eventCollection.streamPropertyChanged
             };
             this.streamManager = this.streamManager.stream.session.subscribe(subscriber.stream, undefined);
             this.reSubbed.emit(this.streamManager);
@@ -271,7 +277,8 @@ export class VideoComponent implements OnInit, OnDestroy {
             accessDialogOpened: !this.eventCollection.accessDialogOpened,
             accessDialogClosed: !this.eventCollection.accessDialogClosed,
             streamCreated: !this.eventCollection.streamCreated,
-            streamDestroyed: !this.eventCollection.streamDestroyed
+            streamDestroyed: !this.eventCollection.streamDestroyed,
+            streamPropertyChanged: !this.eventCollection.streamPropertyChanged,
         });
 
         const oldPublisher = <Publisher>this.streamManager;
@@ -341,6 +348,20 @@ export class VideoComponent implements OnInit, OnDestroy {
         } else {
             sub.off('streamPlaying');
         }
+
+        if (this.eventCollection.streamPropertyChanged) {
+            if (!oldValues.streamPropertyChanged) {
+                sub.on('streamPropertyChanged', (e: StreamPropertyChangedEvent) => {
+                    const newValue = e.changedProperty === 'videoDimensions' ? JSON.stringify(e.newValue) : e.newValue.toString();
+                    this.updateEventListInParent.emit({
+                        event: 'streamPropertyChanged',
+                        content: e.changedProperty + ' [' + newValue + ']'
+                    });
+                });
+            }
+        } else {
+            sub.off('streamPropertyChanged');
+        }
     }
 
     updatePublisherEvents(pub: Publisher, oldValues: any) {
@@ -435,6 +456,20 @@ export class VideoComponent implements OnInit, OnDestroy {
             pub.off('streamDestroyed');
         }
 
+        if (this.eventCollection.streamPropertyChanged) {
+            if (!oldValues.streamPropertyChanged) {
+                pub.on('streamPropertyChanged', (e: StreamPropertyChangedEvent) => {
+                    const newValue = e.changedProperty === 'videoDimensions' ? JSON.stringify(e.newValue) : e.newValue.toString();
+                    this.updateEventListInParent.emit({
+                        event: 'streamPropertyChanged',
+                        content: e.changedProperty + ' [' + newValue + ']'
+                    });
+                });
+            }
+        } else {
+            pub.off('streamPropertyChanged');
+        }
+
         if (this.eventCollection.videoElementDestroyed) {
             if (!oldValues.videoElementDestroyed) {
                 pub.on('videoElementDestroyed', (e: VideoElementEvent) => {
@@ -474,7 +509,8 @@ export class VideoComponent implements OnInit, OnDestroy {
         const oldValues = {
             videoElementCreated: this.eventCollection.videoElementCreated,
             videoElementDestroyed: this.eventCollection.videoElementDestroyed,
-            streamPlaying: this.eventCollection.streamPlaying
+            streamPlaying: this.eventCollection.streamPlaying,
+            streamPropertyChanged: this.eventCollection.streamPropertyChanged
         };
         const dialogRef = this.dialog.open(EventsDialogComponent, {
             data: {
@@ -501,7 +537,8 @@ export class VideoComponent implements OnInit, OnDestroy {
             accessDialogOpened: this.eventCollection.accessDialogOpened,
             accessDialogClosed: this.eventCollection.accessDialogClosed,
             streamCreated: this.eventCollection.streamCreated,
-            streamDestroyed: this.eventCollection.streamDestroyed
+            streamDestroyed: this.eventCollection.streamDestroyed,
+            streamPropertyChanged: this.eventCollection.streamPropertyChanged
         };
         const dialogRef = this.dialog.open(EventsDialogComponent, {
             data: {