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>
<label class="label">Apply filter</label>
<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">
</mat-form-field>
<mat-form-field class="inner-text-input">
<mat-form-field>
<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">
<mat-form-field>
<input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
</mat-form-field>
<mat-form-field class="inner-text-input">
<mat-form-field>
<input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
</mat-form-field>
<mat-divider></mat-divider>
@ -34,7 +34,7 @@
<div>
<h2 mat-dialog-title>Filter events</h2>
<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">
</mat-form-field>
<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 {
margin-left: 9px;
width: 42%;
}
#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="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</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>
</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>
<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 id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;" 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>
<button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
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>
</button>
<div *ngIf="showRecProperties" id="rec-properties-div">
<div>
@ -37,7 +58,9 @@
</mat-select>
</mat-form-field>
</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-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
<mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
@ -45,17 +68,20 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]" class="inner-text-input"
[style.fontSize.px]=14>
<mat-form-field
*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">
</mat-form-field>
</div>
<div>
<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-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" 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
*ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]"
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>
</div>
</div>
@ -63,8 +89,10 @@
<input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
</mat-form-field>
<div>
<button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop recording</button>
<button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get recording</button>
<button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
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
recording</button>
</div>
@ -73,6 +101,7 @@
</mat-form-field>
</mat-dialog-content>
<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>
</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 { 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({
selector: 'app-session-api-dialog',
@ -14,16 +14,23 @@ export class SessionApiDialogComponent {
session: SessionAPI;
sessionId: string;
recordingId: string;
resourceId: string;
connectionId: string;
streamId: string;
response: string;
recordingProperties: RecordingProperties;
recMode = Recording.OutputMode;
recLayouts = RecordingLayout;
openviduRoles = OpenViduRole;
customLayout = '';
recPropertiesIcon = 'add_circle';
showRecProperties = false;
tokenOptions: TokenOptions = {
record: true,
role: OpenViduRole.PUBLISHER
};
constructor(public dialogRef: MatDialogRef<SessionApiDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data) {
this.OV = data.openVidu;
@ -145,7 +152,7 @@ export class SessionApiDialogComponent {
forceDisconnect() {
console.log('Forcing disconnect');
this.session.forceDisconnect(this.resourceId)
this.session.forceDisconnect(this.connectionId)
.then(() => {
this.response = 'User disconnected';
})
@ -156,7 +163,7 @@ export class SessionApiDialogComponent {
forceUnpublish() {
console.log('Forcing unpublish');
this.session.forceUnpublish(this.resourceId)
this.session.forceUnpublish(this.streamId)
.then(() => {
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) {
return Object.keys(enumerator);
}

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

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