From 9a5920b1026e29da7958a1d228fa97a2c1dd6559 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Tue, 28 Aug 2018 11:31:55 +0200 Subject: [PATCH] openvidu-testapp: update to filter refactoring --- .../filter-dialog/filter-dialog.component.ts | 34 ++++++++++++------- .../publisher-properties-dialog.component.ts | 4 +-- .../openvidu-instance.component.html | 4 +-- .../openvidu-instance.component.ts | 20 +++-------- .../app/components/video/video.component.ts | 13 ++++++- 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts index 2b98c80b..208bb763 100644 --- a/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts +++ b/openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts @@ -1,7 +1,7 @@ import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; -import { Session, Stream } from 'openvidu-browser'; +import { Session, Stream, FilterEvent } from 'openvidu-browser'; @Component({ selector: 'app-session-api-dialog', @@ -12,6 +12,7 @@ export class FilterDialogComponent { session: Session; stream: Stream; + filterEventHandler: (FilterEvent) => void; filterType = 'GStreamerFilter'; filterOptions = '{"command": "videobalance saturation=0.0"}'; @@ -27,11 +28,12 @@ export class FilterDialogComponent { @Inject(MAT_DIALOG_DATA) public data) { this.session = data.session; this.stream = data.stream; + this.filterEventHandler = data.filterEventHandler; } apply() { console.log('Applying filter'); - this.session.applyFilter(this.stream, this.filterType, JSON.parse(this.filterOptions)) + this.stream.applyFilter(this.filterType, JSON.parse(this.filterOptions)) .then(() => { this.response = 'Filter applied'; }) @@ -41,19 +43,23 @@ export class FilterDialogComponent { } execMethod() { - console.log('Executing filter method'); - this.session.execFilterMethod(this.stream, this.filterMethod, this.filterParams) - .then(recording => { - this.response = 'Filter method executed'; - }) - .catch(error => { - this.response = 'Error [' + error.message + ']'; - }); + if (!!this.stream.filter) { + console.log('Executing filter method'); + this.stream.filter.execMethod(this.filterMethod, this.filterParams) + .then(() => { + this.response = 'Filter method executed'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } else { + console.warn('No filter applied to stream ' + this.stream.streamId); + } } remove() { console.log('Removing filter'); - this.session.removeFilter(this.stream) + this.stream.removeFilter() .then(() => { this.response = 'Filter removed'; }) @@ -64,7 +70,9 @@ export class FilterDialogComponent { subFilterEvent() { console.log('Adding filter event'); - this.session.addFilterEventListener(this.stream, this.eventType) + this.stream.filter.addEventListener(this.eventType, (event: FilterEvent) => { + this.filterEventHandler(event); + }) .then(() => { this.response = 'Filter event listener added'; }) @@ -75,7 +83,7 @@ export class FilterDialogComponent { unsubFilterEvent() { console.log('Removing filter event'); - this.session.removeFilterEventListener(this.stream, this.eventType) + this.stream.filter.removeEventListener(this.eventType) .then(() => { this.response = 'Filter event listener removed'; }) diff --git a/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts index 5a90beb8..dbd7f915 100644 --- a/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts +++ b/openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts @@ -26,7 +26,7 @@ export class PublisherPropertiesDialogComponent { audioDevices = []; videoDevices = []; - filter: Filter = { type: 'GStreamerFilter', options: { 'command': 'videobalance saturation=0.0' } }; + filter = { type: 'GStreamerFilter', options: { 'command': 'videobalance saturation=0.0' } }; stringOptions = '{"command":"videobalance saturation=0.0"}'; constructor(public dialogRef: MatDialogRef, @@ -83,7 +83,7 @@ export class PublisherPropertiesDialogComponent { if (!this.filter.type) { delete this.publisherProperties.filter; } else { - this.publisherProperties.filter = this.filter; + this.publisherProperties.filter = new Filter(this.filter.type, this.filter.options); } return this.publisherProperties; } diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html index 18059538..dc36cf19 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html @@ -127,9 +127,9 @@
- + -
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 93ade0b6..774d7d31 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 @@ -111,8 +111,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { recordingStopped: true, signal: true, publisherStartSpeaking: false, - publisherStopSpeaking: false, - filterEventDispatched: true + publisherStopSpeaking: false }; // Session properties dialog @@ -243,7 +242,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { this.subscribers = []; } - private updateEventList(event: string, content: string) { + updateEventList(event: string, content: string) { this.events.push({ name: event, content: content }); this.testFeedService.pushNewEvent(this.sessionName, this.session.connection.connectionId, event, content); } @@ -435,16 +434,6 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { }); } } - - if (this.sessionEvents.filterEventDispatched !== oldValues.filterEventDispatched || firstTime) { - this.session.off('filterEventDispatched'); - if (this.sessionEvents.filterEventDispatched) { - this.session.on('filterEventDispatched', (event: FilterEvent) => { - this.updateEventList('filterEventDispatched', - event.filter.type + ' {type: ' + event.eventType + ', data: ' + event.data.toString() + '}'); - }); - } - } } syncInitPublisher() { @@ -609,8 +598,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { recordingStopped: result.recordingStopped, signal: result.signal, publisherStartSpeaking: result.publisherStartSpeaking, - publisherStopSpeaking: result.publisherStopSpeaking, - filterEventDispatched: result.filterEventDispatched + publisherStopSpeaking: result.publisherStopSpeaking }; document.getElementById('session-events-btn-' + this.index).classList.remove('cdk-program-focused'); }); @@ -644,7 +632,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { }); } - udpateEventFromChild(event) { + updateEventFromChild(event) { this.updateEventList(event.event, event.content); } diff --git a/openvidu-testapp/src/app/components/video/video.component.ts b/openvidu-testapp/src/app/components/video/video.component.ts index f37fb742..1ef93d94 100644 --- a/openvidu-testapp/src/app/components/video/video.component.ts +++ b/openvidu-testapp/src/app/components/video/video.component.ts @@ -624,10 +624,21 @@ export class VideoComponent implements OnInit, OnDestroy { filterConfig() { this.dialog.open(FilterDialogComponent, { - data: { session: this.streamManager.stream.session, stream: this.streamManager.stream }, + data: { + session: this.streamManager.stream.session, + stream: this.streamManager.stream, + filterEventHandler: this.emitFilterEventToParent.bind(this) + }, disableClose: true, width: '450px' }); } + emitFilterEventToParent(event) { + this.updateEventListInParent.emit({ + event: 'filterEvent', + content: event.data + }); + } + }