From 492c10ea42fe75aed28f1eb642ad0732a42cab3c Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Tue, 3 Jul 2018 15:48:21 +0200 Subject: [PATCH] openvidu-testapp: StreamPropertyChangedEvent --- .../openvidu-instance.component.ts | 18 ++++++- .../test-scenarios.component.ts | 7 +-- .../app/components/video/video.component.ts | 53 ++++++++++++++++--- 3 files changed, 65 insertions(+), 13 deletions(-) diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts index 6f7d4653..9df9c7a6 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts +++ b/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, diff --git a/openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts b/openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts index 8ca18e40..4a2b525a 100644 --- a/openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts +++ b/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() diff --git a/openvidu-testapp/src/app/components/video/video.component.ts b/openvidu-testapp/src/app/components/video/video.component.ts index 62965d5b..407a598e 100644 --- a/openvidu-testapp/src/app/components/video/video.component.ts +++ b/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( 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 = 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: {