openvidu-testapp: update to filter refactoring

pull/108/merge
pabloFuente 2018-08-28 11:31:55 +02:00
parent d3b25765d1
commit 9a5920b102
5 changed files with 41 additions and 34 deletions

View File

@ -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() {
if (!!this.stream.filter) {
console.log('Executing filter method');
this.session.execFilterMethod(this.stream, this.filterMethod, this.filterParams)
.then(recording => {
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';
})

View File

@ -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<PublisherPropertiesDialogComponent>,
@ -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;
}

View File

@ -127,9 +127,9 @@
</div>
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="240px" class="video-container">
<div [attr.id]="'local-vid-' + session.connection.connectionId"></div>
<app-video *ngIf="this.publisher" [streamManager]="this.publisher" [OV]="OV" [properties]="publisherProperties" (updateEventListInParent)="udpateEventFromChild($event)">
<app-video *ngIf="this.publisher" [streamManager]="this.publisher" [OV]="OV" [properties]="publisherProperties" (updateEventListInParent)="updateEventFromChild($event)">
</app-video>
<app-video *ngFor="let subscriber of this.subscribers" [streamManager]="subscriber" [OV]="OV" (updateEventListInParent)="udpateEventFromChild($event)"
<app-video *ngFor="let subscriber of this.subscribers" [streamManager]="subscriber" [OV]="OV" (updateEventListInParent)="updateEventFromChild($event)"
(reSubbed)="updateSubscriberFromChild($event)">
</app-video>
</div>

View File

@ -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);
}

View File

@ -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
});
}
}