ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp: filter events feature

pull/105/head
pabloFuente 2018-08-03 15:00:12 +02:00
parent 5e059d4fe0
commit b55faf831b
8 changed files with 128 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.css Normal file
View File

@ -0,0 +1,29 @@
#response-text-area {
width: 100%;
color: #808080;
}
#response-text-area textarea {
resize: none;
}
mat-dialog-content button, mat-divider {
margin-bottom: 5px;
}
mat-dialog-content button {
height: 30px;
line-height: 30px;
padding-left: 12px;
padding-right: 12px;
display: inline-flex;
}
.label {
display: block;
font-size: 12px;
color: rgba(0, 0, 0, 0.54);
font-weight: 400;
margin-bottom: 5px;
margin-top: 13px
}

48
openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html Normal file
View File

@ -0,0 +1,48 @@
<div>
<div fxLayout="row" fxLayoutGap="20px">
<div>
<h2 mat-dialog-title>Filter application</h2>
<mat-dialog-content>
<label class="label">Apply filter</label>
<button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
<mat-form-field class="inner-text-input">
<input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
</mat-form-field>
<mat-form-field class="inner-text-input">
<input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
</mat-form-field>
<mat-divider></mat-divider>
<label class="label">Exec filter method</label>
<button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
<mat-form-field class="inner-text-input">
<input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
</mat-form-field>
<mat-form-field class="inner-text-input">
<input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
</mat-form-field>
<mat-divider></mat-divider>
<label class="label">Remove filter</label>
<button mat-button id="remove-filter-btn" (click)="remove()">Remove</button>
<mat-form-field *ngIf="!!response" id="response-text-area" appearance="fill">
<textarea id="api-response-text-area" [(ngModel)]="response" matInput readonly></textarea>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button id="close-dialog-btn" [mat-dialog-close]="{session: session}">CLOSE</button>
</mat-dialog-actions>
</div>
<div>
<h2 mat-dialog-title>Filter events</h2>
<mat-dialog-content>
<mat-form-field class="inner-text-input">
<input matInput id="filter-type-field" placeholder="Event type" [(ngModel)]="eventType">
</mat-form-field>
<label class="label">Add listener to filter event</label>
<button mat-button id="sub-filter-event-btn" (click)="subFilterEvent()">Add listener</button>
<mat-divider></mat-divider>
<label class="label">Remove listener of filter event</label>
<button mat-button id="sub-filter-event-btn" (click)="unsubFilterEvent()">Remove listener</button>
</mat-dialog-content>
</div>
</div>
</div>

66
openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.ts
View File

@ -5,46 +5,8 @@ import { Session, Stream } from 'openvidu-browser';
@Component({
selector: 'app-session-api-dialog',
template: `
<div>
<h2 mat-dialog-title>Filter configuration</h2>
<mat-dialog-content>
<label class="label">Apply filter</label>
<button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
<mat-form-field class="inner-text-input">
<input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
</mat-form-field>
<mat-form-field class="inner-text-input">
<input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
</mat-form-field>
<mat-divider></mat-divider>
<label class="label">Exec filter method</label>
<button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
<mat-form-field class="inner-text-input">
<input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
</mat-form-field>
<mat-form-field class="inner-text-input">
<input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
</mat-form-field>
<mat-divider></mat-divider>
<label class="label">Remove filter</label>
<button mat-button id="remove-filter-btn" (click)="remove()">Remove</button>
<mat-form-field *ngIf="!!response" id="response-text-area" appearance="fill">
<textarea id="api-response-text-area" [(ngModel)]="response" matInput readonly></textarea>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button id="close-dialog-btn" [mat-dialog-close]="{session: session}">CLOSE</button>
</mat-dialog-actions>
</div>
`,
styles: [
'#response-text-area { width: 100%; color: #808080; }',
'#response-text-area textarea { resize: none; }',
'mat-dialog-content button, mat-divider { margin-bottom: 5px; }',
'mat-dialog-content button { height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; display: inline-flex;}',
'.label { display: block; font-size: 12px; color: rgba(0, 0, 0, 0.54); font-weight: 400; margin-bottom: 5px; margin-top: 13px}',
]
templateUrl: './filter-dialog.component.html',
styleUrls: ['./filter-dialog.component.css'],
})
export class FilterDialogComponent {
@ -57,6 +19,8 @@ export class FilterDialogComponent {
filterMethod = 'setElementProperty';
filterParams = '{"propertyName":"saturation","propertyValue":"1.0"}';
eventType: string;
response: string;
constructor(public dialogRef: MatDialogRef<FilterDialogComponent>,
@ -98,4 +62,26 @@ export class FilterDialogComponent {
});
}
subFilterEvent() {
console.log('Adding filter event');
this.session.addFilterEventListener(this.stream, this.eventType)
.then(() => {
this.response = 'Filter event listener added';
})
.catch(error => {
this.response = 'Error [' + error.message + ']';
});
}
unsubFilterEvent() {
console.log('Removing filter event');
this.session.removeFilterEventListener(this.stream, this.eventType)
.then(() => {
this.response = 'Filter event listener removed';
})
.catch(error => {
this.response = 'Error [' + error.message + ']';
});
}
}

4
openvidu-testapp/src/app/components/dialogs/publisher-properties-dialog/publisher-properties-dialog.component.ts
View File

@ -80,7 +80,11 @@ export class PublisherPropertiesDialogComponent {
} catch (e) {
console.error('Invalid JSON object in "Filter options" field');
}
if (!this.filter.type) {
delete this.publisherProperties.filter;
} else {
this.publisherProperties.filter = this.filter;
}
return this.publisherProperties;
}

4
openvidu-testapp/src/app/components/dialogs/scenario-properties-dialog/scenario-properties-dialog.component.html
View File

@ -12,10 +12,10 @@
<mat-form-field style="width: 100%">
<input matInput placeholder="url" [(ngModel)]="manualTurnConf.urls[0]">
</mat-form-field>
<mat-form-field style="width: 49%; padding-right: 2px">
<mat-form-field style="width: 48%; padding-right: 2px">
<input matInput placeholder="user" [(ngModel)]="manualTurnConf.username">
</mat-form-field>
<mat-form-field style="width: 49%; padding-left: 2px">
<mat-form-field style="width: 48%; padding-left: 2px">
<input matInput placeholder="pass" [(ngModel)]="manualTurnConf.credential">
</mat-form-field>
</div>

4
openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html
View File

@ -41,10 +41,10 @@
<mat-form-field style="width: 100%">
<input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
</mat-form-field>
<mat-form-field style="width: 49%; padding-right: 2px">
<mat-form-field style="width: 48%; padding-right: 2px">
<input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
</mat-form-field>
<mat-form-field style="width: 49%; padding-left: 2px">
<mat-form-field style="width: 48%; padding-left: 2px">
<input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
</mat-form-field>
</div>

18
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

@ -6,7 +6,7 @@ import {
import {
OpenVidu, Session, Subscriber, Publisher, VideoInsertMode, StreamEvent, ConnectionEvent,
SessionDisconnectedEvent, SignalEvent, RecordingEvent,
PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError
PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError, FilterEvent
} from 'openvidu-browser';
import {
OpenVidu as OpenViduAPI,
@ -111,7 +111,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
recordingStopped: true,
signal: true,
publisherStartSpeaking: false,
publisherStopSpeaking: false
publisherStopSpeaking: false,
filterEventDispatched: true
};
// Session properties dialog
@ -434,6 +435,16 @@ 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() {
@ -598,7 +609,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
recordingStopped: result.recordingStopped,
signal: result.signal,
publisherStartSpeaking: result.publisherStartSpeaking,
publisherStopSpeaking: result.publisherStopSpeaking
publisherStopSpeaking: result.publisherStopSpeaking,
filterEventDispatched: result.filterEventDispatched
};
document.getElementById('session-events-btn-' + this.index).classList.remove('cdk-program-focused');
});

2
openvidu-testapp/src/app/components/video/video.component.ts
View File

@ -626,7 +626,7 @@ export class VideoComponent implements OnInit, OnDestroy {
this.dialog.open(FilterDialogComponent, {
data: { session: this.streamManager.stream.session, stream: this.streamManager.stream },
disableClose: true,
width: '250px'
width: '450px'
});
}