From f0a53a770182f8993ff1cb453c519bea3d5e6a58 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Fri, 18 May 2018 12:46:41 +0200 Subject: [PATCH] openvidu-testapp API REST features --- .../src/app/app.material.module.ts | 6 +- openvidu-testapp/src/app/app.module.ts | 10 +- .../extension-dialog.component.ts | 0 .../local-recording-dialog.component.ts | 0 .../dialogs/session-api-dialog.component.ts | 112 ++++++++++++++++++ .../session-properties-dialog.component.ts | 64 ++++++++++ .../openvidu-instance.component.css | 26 +++- .../openvidu-instance.component.html | 21 ++-- .../openvidu-instance.component.ts | 92 ++++++++++---- .../test-apirest/test-apirest.component.html | 2 +- 10 files changed, 295 insertions(+), 38 deletions(-) rename openvidu-testapp/src/app/components/{openvidu-instance => dialogs}/extension-dialog.component.ts (100%) rename openvidu-testapp/src/app/components/{test-sessions => dialogs}/local-recording-dialog.component.ts (100%) create mode 100644 openvidu-testapp/src/app/components/dialogs/session-api-dialog.component.ts create mode 100644 openvidu-testapp/src/app/components/dialogs/session-properties-dialog.component.ts diff --git a/openvidu-testapp/src/app/app.material.module.ts b/openvidu-testapp/src/app/app.material.module.ts index c2adc4ea..15a89525 100644 --- a/openvidu-testapp/src/app/app.material.module.ts +++ b/openvidu-testapp/src/app/app.material.module.ts @@ -18,7 +18,8 @@ import { MatChipsModule, MatExpansionModule, MatSlideToggleModule, - MatSidenavModule + MatSidenavModule, + MatFormFieldModule } from '@angular/material'; @NgModule({ @@ -41,7 +42,8 @@ import { MatChipsModule, MatExpansionModule, MatSlideToggleModule, - MatSidenavModule + MatSidenavModule, + MatFormFieldModule ], }) export class AppMaterialModule { } diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts index d1093a87..ed4f1a80 100644 --- a/openvidu-testapp/src/app/app.module.ts +++ b/openvidu-testapp/src/app/app.module.ts @@ -10,13 +10,15 @@ import { AppComponent } from './app.component'; import { TestSessionsComponent } from './components/test-sessions/test-sessions.component'; import { TestApirestComponent } from './components/test-apirest/test-apirest.component'; import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component'; -import { ExtensionDialogComponent } from './components/openvidu-instance/extension-dialog.component'; -import { LocalRecordingDialogComponent } from './components/test-sessions/local-recording-dialog.component'; +import { ExtensionDialogComponent } from './components/dialogs/extension-dialog.component'; +import { LocalRecordingDialogComponent } from './components/dialogs/local-recording-dialog.component'; import { OpenviduRestService } from './services/openvidu-rest.service'; import { OpenviduParamsService } from './services/openvidu-params.service'; import { TestFeedService } from './services/test-feed.service'; import { MuteSubscribersService } from './services/mute-subscribers.service'; +import { SessionPropertiesDialogComponent } from './components/dialogs/session-properties-dialog.component'; +import { SessionApiDialogComponent } from './components/dialogs/session-api-dialog.component'; @NgModule({ declarations: [ @@ -25,6 +27,8 @@ import { MuteSubscribersService } from './services/mute-subscribers.service'; TestSessionsComponent, TestApirestComponent, ExtensionDialogComponent, + SessionPropertiesDialogComponent, + SessionApiDialogComponent, LocalRecordingDialogComponent ], imports: [ @@ -43,6 +47,8 @@ import { MuteSubscribersService } from './services/mute-subscribers.service'; ], entryComponents: [ ExtensionDialogComponent, + SessionPropertiesDialogComponent, + SessionApiDialogComponent, LocalRecordingDialogComponent ], bootstrap: [AppComponent] diff --git a/openvidu-testapp/src/app/components/openvidu-instance/extension-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/extension-dialog.component.ts similarity index 100% rename from openvidu-testapp/src/app/components/openvidu-instance/extension-dialog.component.ts rename to openvidu-testapp/src/app/components/dialogs/extension-dialog.component.ts diff --git a/openvidu-testapp/src/app/components/test-sessions/local-recording-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/local-recording-dialog.component.ts similarity index 100% rename from openvidu-testapp/src/app/components/test-sessions/local-recording-dialog.component.ts rename to openvidu-testapp/src/app/components/dialogs/local-recording-dialog.component.ts diff --git a/openvidu-testapp/src/app/components/dialogs/session-api-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/session-api-dialog.component.ts new file mode 100644 index 00000000..cf83d78b --- /dev/null +++ b/openvidu-testapp/src/app/components/dialogs/session-api-dialog.component.ts @@ -0,0 +1,112 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialog, MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material'; + +import { Session } from 'openvidu-browser'; +import { OpenVidu as OpenViduAPI } from 'openvidu-node-client'; + +@Component({ + selector: 'app-session-properties-dialog', + template: ` +
+

API REST

+ + + + + + + + + + + + + + + + + +
+ `, + styles: [ + '#response-text-area { width: 100%; color: #808080; }', + '#response-text-area textarea { resize: none; }', + 'mat-dialog-content button, mat-divider { margin-bottom: 5px; }', + ] +}) +export class SessionApiDialogComponent { + + OV: OpenViduAPI; + sessionId: string; + recordingId: string; + response: string; + + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data) { + this.OV = data.openVidu; + this.sessionId = data.sessionId; + } + + startRecording() { + console.log('Starting recording'); + this.OV.startRecording(this.sessionId) + .then(recording => { + this.response = 'Recording started [' + recording.id + ']'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } + + stopRecording() { + console.log('Stopping recording'); + this.OV.stopRecording(this.recordingId) + .then(recording => { + this.response = 'Recording stopped [' + recording.id + ']'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } + + getRecording() { + console.log('Getting recording'); + this.OV.getRecording(this.recordingId) + .then(recording => { + this.response = 'Recording got [' + recording.id + ']'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } + + listRecordings() { + console.log('Listing recordings'); + this.OV.listRecordings() + .then(recordingList => { + let recordingIds = ''; + recordingList.forEach((rec, index) => { + recordingIds += rec.id; + if (index !== recordingList.length - 1) { + recordingIds += ', '; + } + }); + this.response = 'Recording list [' + recordingIds + ']'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } + + deleteRecording() { + console.log('Deleting recording'); + this.OV.deleteRecording(this.recordingId) + .then(() => { + this.response = 'Recording deleted'; + }) + .catch(error => { + this.response = 'Error [' + error.message + ']'; + }); + } + +} diff --git a/openvidu-testapp/src/app/components/dialogs/session-properties-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog.component.ts new file mode 100644 index 00000000..7a5440bd --- /dev/null +++ b/openvidu-testapp/src/app/components/dialogs/session-properties-dialog.component.ts @@ -0,0 +1,64 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialog, MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material'; + +import { SessionProperties, MediaMode, RecordingMode, RecordingLayout } from 'openvidu-node-client'; + +@Component({ + selector: 'app-session-properties-dialog', + template: ` +
+

Session properties

+ + + + + {{ enumerator }} + + + + + + + {{ enumerator }} + + + + + + + {{ enumerator }} + + + + + + + + + + + + + + +
+ ` +}) +export class SessionPropertiesDialogComponent { + + sessionProperties: SessionProperties; + + private mediaMode = MediaMode; + private recordingMode = RecordingMode; + private defaultRecordingLayout = RecordingLayout; + + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: SessionProperties) { + this.sessionProperties = data; + } + + enumToArray(enumerator: any) { + return Object.keys(enumerator); + } + +} diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css index cb2a9269..fad4dfe6 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css @@ -18,11 +18,14 @@ mat-card.session-card { } .session-form mat-form-field { - width: 130px; + width: 110px; } .join-card { width: fit-content; + min-height: 215px; + padding-top: 20px; + padding-bottom: 10px; } .join-card mat-card-content { @@ -33,6 +36,7 @@ mat-card.session-card { border: 1px solid #e1e1e1; padding: 10px 15px 10px 15px; background: #ffffff; + margin-top: 5px; } .inner-card h4 { @@ -93,7 +97,7 @@ mat-radio-button { .event-list-div { display: inline-block; width: 130px; - height: 183.5px; + height: 180px; overflow-y: auto; overflow-x: hidden; } @@ -133,6 +137,20 @@ mat-expansion-panel-header { padding: 0 7px 0 9px !important; } -.secure-div mat-checkbox { - padding-right: 10px; +.mat-icon-custom { + width: 29px; + height: 29px; + line-height: 18px; +} + +.mat-icon-custom-ic { + width: 20px; + height: 20px; + font-size: 20px; + line-height: 20px; +} + +.session-btns-div { + margin-top: -14px; + margin-right: -14px; } \ No newline at end of file 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 5340afe7..783208cb 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 @@ -6,14 +6,7 @@
-
- SECURE - - - -
- -
+
@@ -21,6 +14,16 @@ + +
+ + +
+
@@ -125,4 +128,4 @@
-
+ \ No newline at end of file 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 f4c7f04e..0c02aef0 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 @@ -9,11 +9,21 @@ import { LocalRecorder, VideoInsertMode, StreamEvent, ConnectionEvent, SessionDisconnectedEvent, SignalEvent, RecordingEvent, VideoElementEvent } from 'openvidu-browser'; +import { + OpenVidu as OpenViduAPI, + Session as SessionAPI, + SessionProperties as SessionPropertiesAPI, + MediaMode, + RecordingMode, + RecordingLayout +} from 'openvidu-node-client'; import { MatDialog, MatDialogRef } from '@angular/material'; -import { ExtensionDialogComponent } from './extension-dialog.component'; -import { LocalRecordingDialogComponent } from '../test-sessions/local-recording-dialog.component'; +import { ExtensionDialogComponent } from '../dialogs/extension-dialog.component'; +import { LocalRecordingDialogComponent } from '../dialogs/local-recording-dialog.component'; import { TestFeedService } from '../../services/test-feed.service'; import { MuteSubscribersService } from '../../services/mute-subscribers.service'; +import { SessionPropertiesDialogComponent } from '../dialogs/session-properties-dialog.component'; +import { SessionApiDialogComponent } from '../dialogs/session-api-dialog.component'; declare var $: any; @@ -47,10 +57,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { sessionConf: SessionConf; // Session join data - secureSession = false; clientData: string; sessionName: string; - tokenInput: string; // Session options subscribeTo; @@ -79,12 +87,21 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { disableActiveVideo = false; disableRadioButtons = false; - // OpenVidu objects + // OpenVidu Browser objects OV: OpenVidu; session: Session; publisher: Publisher; subscribers = {}; + // OpenVidu Node Client objects + sessionProperties: SessionPropertiesAPI = { + mediaMode: MediaMode.ROUTED, + recordingMode: RecordingMode.MANUAL, + defaultRecordingLayout: RecordingLayout.BEST_FIT, + defaultCustomLayout: '', + customSessionId: '' + }; + // Session audio and video status audioMuted = false; videoMuted = false; @@ -108,7 +125,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { constructor( private changeDetector: ChangeDetectorRef, - private extensionDialog: MatDialog, + private dialog: MatDialog, private recordDialog: MatDialog, private testFeedService: TestFeedService, private muteSubscribersService: MuteSubscribersService, @@ -171,17 +188,9 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { this.leaveSession(); } - let token; - - if (this.secureSession) { - token = this.tokenInput; - } else { - token = 'wss://' - + this.removeHttps(this.openviduUrl) - + '?sessionId=' + this.sessionName - + '&secret=' + this.openviduSecret; - } - this.joinSessionShared(token); + this.getToken().then(token => { + this.joinSessionShared(token); + }); } private joinSessionShared(token): void { @@ -580,7 +589,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { console.warn(err); this.openviduError = err; if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') { - this.extensionDialog.open(ExtensionDialogComponent, { + this.dialog.open(ExtensionDialogComponent, { data: { url: err.message }, disableClose: true, width: '250px' @@ -856,7 +865,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { console.warn(err); this.openviduError = err; if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') { - this.extensionDialog.open(ExtensionDialogComponent, { + this.dialog.open(ExtensionDialogComponent, { data: { url: err.message }, disableClose: true, width: '250px' @@ -905,7 +914,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { console.error(err); this.openviduError = err; if (err.name === 'SCREEN_EXTENSION_NOT_INSTALLED') { - this.extensionDialog.open(ExtensionDialogComponent, { + this.dialog.open(ExtensionDialogComponent, { data: { url: err.message }, disableClose: true, width: '250px' @@ -1027,4 +1036,47 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { }); } + openSessionPropertiesDialog() { + this.sessionProperties.customSessionId = this.sessionName; + const dialogRef = this.dialog.open(SessionPropertiesDialogComponent, { + data: this.sessionProperties, + width: '235px' + }); + + dialogRef.afterClosed().subscribe((result: SessionPropertiesAPI) => { + if (!!result) { + this.sessionProperties = result; + if (!!this.sessionProperties.customSessionId) { + this.sessionName = this.sessionProperties.customSessionId; + } + } + document.getElementById('session-settings-btn').classList.remove('cdk-program-focused'); + }); + } + + openSessionApiDialog() { + const dialogRef = this.dialog.open(SessionApiDialogComponent, { + data: { + openVidu: new OpenViduAPI(this.openviduUrl, this.openviduSecret), + sessionId: !!this.session ? this.session.sessionId : this.sessionName + }, + width: '280px' + }); + + dialogRef.afterClosed().subscribe((result: string) => { + document.getElementById('session-api-btn').classList.remove('cdk-program-focused'); + }); + } + + getToken(): Promise { + const OV_NodeClient = new OpenViduAPI(this.openviduUrl, this.openviduSecret); + if (!this.sessionProperties.customSessionId) { + this.sessionProperties.customSessionId = this.sessionName; + } + return OV_NodeClient.createSession(this.sessionProperties) + .then(session_NodeClient => { + return session_NodeClient.generateToken(); + }); + } + } diff --git a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html index 9a214c2d..b9fc6a81 100644 --- a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html +++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html @@ -61,7 +61,7 @@
- +
Selection Session IDs