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

openvidu-testapp: update to support new Session.updateConnection method

pull/550/head
pabloFuente 2020-10-08 17:37:17 +02:00
parent 0a34e7f2de
commit 3c80cbfede
5 changed files with 105 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html
View File

@ -5,19 +5,19 @@
<mat-dialog-content> <mat-dialog-content>
<label class="label">Apply filter</label> <label class="label">Apply filter</label>
<button mat-button id="apply-filter-btn" (click)="apply()">Apply</button> <button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
<mat-form-field class="inner-text-input"> <mat-form-field>
<input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType"> <input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
</mat-form-field> </mat-form-field>
<mat-form-field class="inner-text-input"> <mat-form-field>
<input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions"> <input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
</mat-form-field> </mat-form-field>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<label class="label">Exec filter method</label> <label class="label">Exec filter method</label>
<button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button> <button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
<mat-form-field class="inner-text-input"> <mat-form-field>
<input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod"> <input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
</mat-form-field> </mat-form-field>
<mat-form-field class="inner-text-input"> <mat-form-field>
<input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams"> <input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
</mat-form-field> </mat-form-field>
<mat-divider></mat-divider> <mat-divider></mat-divider>
@ -34,7 +34,7 @@
<div> <div>
<h2 mat-dialog-title>Filter events</h2> <h2 mat-dialog-title>Filter events</h2>
<mat-dialog-content> <mat-dialog-content>
<mat-form-field class="inner-text-input"> <mat-form-field>
<input matInput id="filter-event-type-field" placeholder="Event type" [(ngModel)]="eventType"> <input matInput id="filter-event-type-field" placeholder="Event type" [(ngModel)]="eventType">
</mat-form-field> </mat-form-field>
<label class="label">Add listener to filter event</label> <label class="label">Add listener to filter event</label>

1
openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css
View File

@ -31,6 +31,7 @@ mat-dialog-content button {
.inner-text-input { .inner-text-input {
margin-left: 9px; margin-left: 9px;
width: 42%;
} }
#rec-properties-btn { #rec-properties-btn {

71
openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html
View File

@ -6,23 +6,44 @@
<button mat-button id="get-session-btn" (click)="fetchActiveConnections()">Fetch</button> <button mat-button id="get-session-btn" (click)="fetchActiveConnections()">Fetch</button>
<button mat-button id="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</button> <button mat-button id="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</button>
<button mat-button id="close-session-btn" (click)="closeSession()">Close this session</button> <button mat-button id="close-session-btn" (click)="closeSession()">Close this session</button>
</div>
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="resource-id-field" placeholder="resourceId" [(ngModel)]="resourceId">
</mat-form-field>
<div>
<button mat-button id="force-disconnect-api-btn" (click)="forceDisconnect()" [disabled]="!resourceId">Force
disconnect</button>
<button mat-button id="force-unpublish-api-btn" (click)="forceUnpublish()" [disabled]="!resourceId">Force
unpublish</button>
<mat-divider></mat-divider> <mat-divider></mat-divider>
</div> </div>
<label class="label">Connections/Streams</label>
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="connection-id-field" placeholder="connectionId" [(ngModel)]="connectionId">
</mat-form-field>
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="stream-id-field" placeholder="streamId" [(ngModel)]="streamId">
</mat-form-field>
<div style="margin-left:9px">
<mat-checkbox class="checkbox-form" [(ngModel)]="tokenOptions.record" id="record-checkbox">Record
</mat-checkbox>
<mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<mat-select [(ngModel)]="tokenOptions.role" id="token-role-select">
<mat-option *ngFor="let enumerator of enumToArray(openviduRoles)" [value]="enumerator">
<span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<button mat-button id="force-disconnect-api-btn" (click)="forceDisconnect()"
[disabled]="!connectionId">Disconnect</button>
<button mat-button id="update-connection-api-btn" (click)="updateConnection()" [disabled]="!connectionId">Update
connection</button>
<button mat-button id="force-unpublish-api-btn" (click)="forceUnpublish()"
[disabled]="!streamId">Unpublish</button>
<mat-divider></mat-divider>
</div>
<label class="label">Recordings</label> <label class="label">Recordings</label>
<button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button> <button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
<button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button> <button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
<button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;" title="Recording properties" <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
(click)="toggleRecProperties()"> title="Recording properties" (click)="toggleRecProperties()">
<mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">{{recPropertiesIcon}}</mat-icon> <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">
{{recPropertiesIcon}}</mat-icon>
</button> </button>
<div *ngIf="showRecProperties" id="rec-properties-div"> <div *ngIf="showRecProperties" id="rec-properties-div">
<div> <div>
@ -37,7 +58,9 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED] && recordingProperties.hasVideo" id="rec-layout-div"> <div
*ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED] && recordingProperties.hasVideo"
id="rec-layout-div">
<mat-form-field class="inner-text-input" [style.fontSize.px]=14> <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
<mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout"> <mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
<mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator"> <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
@ -45,17 +68,20 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]" class="inner-text-input" <mat-form-field
[style.fontSize.px]=14> *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]"
class="inner-text-input" [style.fontSize.px]=14>
<input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout"> <input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
</mat-form-field> </mat-form-field>
</div> </div>
<div> <div>
<mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox> <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
<mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox> <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
<mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="recording-resolution-form" <mat-form-field
class="inner-text-input" [style.fontSize.px]=14> *ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]"
<input matInput id="recording-resolution-field" placeholder="Resolution" type="text" [(ngModel)]="recordingProperties.resolution"> id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
<input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
[(ngModel)]="recordingProperties.resolution">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -63,8 +89,10 @@
<input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId"> <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
</mat-form-field> </mat-form-field>
<div> <div>
<button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop recording</button> <button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
<button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get recording</button> recording</button>
<button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get
recording</button>
<button mat-button id="delete-recording-btn" (click)="deleteRecording()" [disabled]="!recordingId">Delete <button mat-button id="delete-recording-btn" (click)="deleteRecording()" [disabled]="!recordingId">Delete
recording</button> recording</button>
</div> </div>
@ -73,6 +101,7 @@
</mat-form-field> </mat-form-field>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<button mat-button id="close-dialog-btn" [mat-dialog-close]="{session: session, recordingProperties: recordingProperties}">CLOSE</button> <button mat-button id="close-dialog-btn"
[mat-dialog-close]="{session: session, recordingProperties: recordingProperties}">CLOSE</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

26
openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts
View File

@ -1,7 +1,7 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout } from 'openvidu-node-client'; import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout, TokenOptions, OpenViduRole } from 'openvidu-node-client';
@Component({ @Component({
selector: 'app-session-api-dialog', selector: 'app-session-api-dialog',
@ -14,16 +14,23 @@ export class SessionApiDialogComponent {
session: SessionAPI; session: SessionAPI;
sessionId: string; sessionId: string;
recordingId: string; recordingId: string;
resourceId: string; connectionId: string;
streamId: string;
response: string; response: string;
recordingProperties: RecordingProperties; recordingProperties: RecordingProperties;
recMode = Recording.OutputMode; recMode = Recording.OutputMode;
recLayouts = RecordingLayout; recLayouts = RecordingLayout;
openviduRoles = OpenViduRole;
customLayout = ''; customLayout = '';
recPropertiesIcon = 'add_circle'; recPropertiesIcon = 'add_circle';
showRecProperties = false; showRecProperties = false;
tokenOptions: TokenOptions = {
record: true,
role: OpenViduRole.PUBLISHER
};
constructor(public dialogRef: MatDialogRef<SessionApiDialogComponent>, constructor(public dialogRef: MatDialogRef<SessionApiDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data) { @Inject(MAT_DIALOG_DATA) public data) {
this.OV = data.openVidu; this.OV = data.openVidu;
@ -145,7 +152,7 @@ export class SessionApiDialogComponent {
forceDisconnect() { forceDisconnect() {
console.log('Forcing disconnect'); console.log('Forcing disconnect');
this.session.forceDisconnect(this.resourceId) this.session.forceDisconnect(this.connectionId)
.then(() => { .then(() => {
this.response = 'User disconnected'; this.response = 'User disconnected';
}) })
@ -156,7 +163,7 @@ export class SessionApiDialogComponent {
forceUnpublish() { forceUnpublish() {
console.log('Forcing unpublish'); console.log('Forcing unpublish');
this.session.forceUnpublish(this.resourceId) this.session.forceUnpublish(this.streamId)
.then(() => { .then(() => {
this.response = 'Stream unpublished'; this.response = 'Stream unpublished';
}) })
@ -165,6 +172,17 @@ export class SessionApiDialogComponent {
}); });
} }
updateConnection() {
console.log('Updating connection');
this.session.updateConnection(this.connectionId, this.tokenOptions)
.then(modifiedConnection => {
this.response = 'Connection updated: ' + JSON.stringify({ role: modifiedConnection.role, record: modifiedConnection.record });
})
.catch(error => {
this.response = 'Error [' + error.message + ']';
});
}
enumToArray(enumerator: any) { enumToArray(enumerator: any) {
return Object.keys(enumerator); return Object.keys(enumerator);
} }

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

@ -4,7 +4,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import { import {
OpenVidu, Session, Subscriber, Publisher, Event, VideoInsertMode, StreamEvent, ConnectionEvent, OpenVidu, Session, Subscriber, Publisher, Event, StreamEvent, ConnectionEvent,
SessionDisconnectedEvent, SignalEvent, RecordingEvent, SessionDisconnectedEvent, SignalEvent, RecordingEvent,
PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError
} from 'openvidu-browser'; } from 'openvidu-browser';
@ -18,7 +18,8 @@ import {
TokenOptions, TokenOptions,
OpenViduRole, OpenViduRole,
RecordingProperties, RecordingProperties,
Recording Recording,
Token
} from 'openvidu-node-client'; } from 'openvidu-node-client';
import { MatDialog, MAT_CHECKBOX_CLICK_ACTION } from '@angular/material'; import { MatDialog, MAT_CHECKBOX_CLICK_ACTION } from '@angular/material';
import { ExtensionDialogComponent } from '../dialogs/extension-dialog/extension-dialog.component'; import { ExtensionDialogComponent } from '../dialogs/extension-dialog/extension-dialog.component';
@ -189,22 +190,21 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.clientData = 'TestClient'; this.clientData = 'TestClient';
} }
joinSession(): void { async joinSession(): Promise<void> {
if (this.session) { if (this.session) {
this.leaveSession(); this.leaveSession();
} }
const sessionId = !!this.customToken ? this.getSessionIdFromToken(this.customToken) : this.sessionName;
await this.initializeNodeClient(sessionId);
if (!!this.customToken) { if (!!this.customToken) {
this.joinSessionShared(this.customToken); this.joinSessionShared(this.customToken);
} else { } else {
this.getToken().then(token => { const token: Token = await this.getToken();
this.joinSessionShared(token); this.joinSessionShared(token.token);
});
} }
} }
private joinSessionShared(token): void { private joinSessionShared(token: string): void {
this.OV = new OpenVidu(); this.OV = new OpenVidu();
@ -686,16 +686,14 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
}); });
} }
getToken(): Promise<string> { async initializeNodeClient(sessionId: string): Promise<any> {
this.OV_NodeClient = new OpenViduAPI(this.openviduUrl, this.openviduSecret); this.OV_NodeClient = new OpenViduAPI(this.openviduUrl, this.openviduSecret);
if (!this.sessionProperties.customSessionId) { this.sessionProperties.customSessionId = sessionId;
this.sessionProperties.customSessionId = this.sessionName; this.sessionAPI = await this.OV_NodeClient.createSession(this.sessionProperties);
} }
return this.OV_NodeClient.createSession(this.sessionProperties)
.then(session_NodeClient => { async getToken(): Promise<Token> {
this.sessionAPI = session_NodeClient; return this.sessionAPI.createToken();
return session_NodeClient.generateToken(this.tokenOptions);
});
} }
updateEventFromChild(event: OpenViduEvent) { updateEventFromChild(event: OpenViduEvent) {
@ -728,4 +726,15 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
this.syncInitPublisher(); this.syncInitPublisher();
} }
private getSessionIdFromToken(token: string): string {
const queryParams = decodeURI(token.split('?')[1])
.split('&')
.map(param => param.split('='))
.reduce((values, [key, value]) => {
values[key] = value
return values
}, {});
return queryParams['sessionId'];
}
} }