From 38145508e672fa199562d399d1b4de7dffae1ac2 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Thu, 4 Aug 2022 18:13:53 +0200 Subject: [PATCH] Update all openvidu-components to use a server application --- .../src/app/app.component.ts | 139 ++++---------- .../package.json | 2 +- .../src/app/app.component.ts | 142 ++++----------- .../src/app/app.component.ts | 143 ++++----------- .../src/app/app.component.ts | 133 +++++--------- .../src/app/app.component.ts | 140 ++++---------- .../src/app/app.component.ts | 141 ++++----------- .../src/app/app.component.ts | 134 +++++--------- .../src/app/app.component.ts | 139 +++++--------- .../src/app/app.component.ts | 144 +++++---------- .../src/app/app.component.ts | 129 +++++-------- .../src/app/app.component.ts | 142 ++++----------- .../src/app/app.component.ts | 127 +++++-------- .../src/app/app.component.ts | 137 +++++--------- .../package-lock.json | 4 +- .../src/app/app.component.ts | 171 ++++++------------ 16 files changed, 592 insertions(+), 1375 deletions(-) diff --git a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts index 9859b4bd..645ee912 100644 --- a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts +++ b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts @@ -1,7 +1,8 @@ import { Component } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; + import { TokenModel, PanelService, PanelType } from "openvidu-angular"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; @Component({ selector: "app-root", @@ -27,8 +28,7 @@ import { HttpClient, HttpHeaders } from "@angular/common/http"; `, - styles: [ - ` + styles: [` #my-panels { height: 100%; overflow: hidden; @@ -45,15 +45,15 @@ import { HttpClient, HttpHeaders } from "@angular/common/http"; #my-panel2 { background: #ddf2ff; } - `, - ], + `] }) export class AppComponent { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + title = "openvidu-additional-panels"; - tokens!: TokenModel; sessionId = "toolbar-additionalbtn-directive-example"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; + tokens!: TokenModel; showExternalPanel: boolean = false; showExternalPanel2: boolean = false; @@ -61,9 +61,9 @@ export class AppComponent { constructor( private httpClient: HttpClient, private panelService: PanelService - ) {} + ) { } - ngOnInit() { + async ngOnInit() { this.subscribeToPanelToggling(); this.tokens = { webcam: await this.getToken(), @@ -84,102 +84,39 @@ export class AppComponent { } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-activities-panel/package.json b/openvidu-components/openvidu-custom-activities-panel/package.json index c14e6a98..162e7621 100644 --- a/openvidu-components/openvidu-custom-activities-panel/package.json +++ b/openvidu-components/openvidu-custom-activities-panel/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser": "~13.3.0", "@angular/platform-browser-dynamic": "~13.3.0", "@angular/router": "~13.3.0", - "openvidu-angular": "file:openvidu-angular-2.22.0.tgz", + "openvidu-angular": "2.22.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts index d4d159d3..e5ac2727 100644 --- a/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from "@angular/core"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; import { TokenModel } from "openvidu-angular"; @@ -10,8 +10,7 @@ import { TokenModel } from "openvidu-angular"; + [toolbarDisplaySessionName]="false">

ACTIVITIES

@@ -20,24 +19,24 @@ import { TokenModel } from "openvidu-angular";
`, - styles: [ - ` + styles: [` #my-panel { background: #aafffc; height: 100%; overflow: hidden; text-align: center; } - `, - ], + `] }) -export class AppComponent implements OnInit{ +export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + title = "openvidu-custom-activities-panel"; - tokens!: TokenModel; sessionId = "activities-panel-directive-example"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; - constructor(private httpClient: HttpClient) {} + tokens!: TokenModel; + + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -47,102 +46,39 @@ export class AppComponent implements OnInit{ } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts index 4b7c8908..b43837db 100644 --- a/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from "@angular/core"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; import { TokenModel, Signal } from "openvidu-angular"; import { Session, SignalOptions } from "openvidu-browser"; @@ -11,8 +11,7 @@ import { Session, SignalOptions } from "openvidu-browser"; + [toolbarDisplaySessionName]="false">

Chat

@@ -25,26 +24,27 @@ import { Session, SignalOptions } from "openvidu-browser";
`, - styles: [ - ` + styles: [` #my-panel { background: #aafffc; height: 100%; overflow: hidden; text-align: center; } - `, - ], + `] }) -export class AppComponent implements OnInit{ +export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + title = "openvidu-custom-chat-panel"; - tokens!: TokenModel; sessionId = "chat-panel-directive-example"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; + tokens!: TokenModel; + session!: Session; messages: string[] = []; - constructor(private httpClient: HttpClient) {} + + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -71,102 +71,39 @@ export class AppComponent implements OnInit{ } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-layout/src/app/app.component.ts b/openvidu-components/openvidu-custom-layout/src/app/app.component.ts index 60936ce2..9fe8dcf9 100644 --- a/openvidu-components/openvidu-custom-layout/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-layout/src/app/app.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from "@angular/core"; -import { Subscription } from 'rxjs'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient } from "@angular/common/http"; +import { Subscription, lastValueFrom } from "rxjs"; -import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; +import { TokenModel, ParticipantService, ParticipantAbstractModel } from "openvidu-angular"; @Component({ selector: "app-root", @@ -14,7 +13,6 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
-
@@ -22,36 +20,35 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
`, - styles: [ - ` + styles: [` .container { display: flex; flex-wrap: wrap; justify-content: space-between; } - .item { flex: 0 50%; height: 250px; margin-bottom: 2%; } - `, - ], + `] }) -export class AppComponent implements OnInit{ +export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + title = "openvidu-custom-layout"; - tokens!: TokenModel; sessionId = 'layout-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + tokens!: TokenModel; + localParticipant!: ParticipantAbstractModel; remoteParticipants!: ParticipantAbstractModel[]; localParticipantSubs!: Subscription; remoteParticipantsSubs!: Subscription; - constructor(private httpClient: HttpClient, private participantService: ParticipantService) {} + constructor(private httpClient: HttpClient, private participantService: ParticipantService) { } - ngOnInit(): void { + async ngOnInit() { this.subscribeToParticipants(); this.tokens = { webcam: await this.getToken(), @@ -73,88 +70,40 @@ export class AppComponent implements OnInit{ }); } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-panels/src/app/app.component.ts b/openvidu-components/openvidu-custom-panels/src/app/app.component.ts index 45d56d9a..fe92a366 100644 --- a/openvidu-components/openvidu-custom-panels/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-panels/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from "@angular/core"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; import { TokenModel } from "openvidu-angular"; @@ -16,8 +16,7 @@ import { TokenModel } from "openvidu-angular"; `, - styles: [ - ` + styles: [` #my-chat-panel, #my-participants-panel { text-align: center; @@ -30,17 +29,17 @@ import { TokenModel } from "openvidu-angular"; #my-participants-panel { background: #ddf2ff; } - `, - ], + `] }) export class AppComponent implements OnInit { - title = "openvidu-custom-panels"; - tokens!: TokenModel; - sessionId = "panel-directive-example"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; - constructor(private httpClient: HttpClient) {} + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = "openvidu-custom-panels"; + sessionId = "panel-directive-example"; + tokens!: TokenModel; + + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -50,102 +49,39 @@ export class AppComponent implements OnInit { } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts index 622092cf..31f0ca17 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from "@angular/core"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; -import { OpenViduService, TokenModel } from "openvidu-angular"; +import { TokenModel, OpenViduService } from "openvidu-angular"; @Component({ selector: "app-root", @@ -10,31 +10,31 @@ import { OpenViduService, TokenModel } from "openvidu-angular"; + [toolbarDisplaySessionName]="false">
-
Session disconnected
`, - styles: [], + styles: [] }) export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + title = "openvidu-custom-participant-panel-item-elements"; - tokens!: TokenModel; - connected = true; sessionId = "participants-panel-directive-example"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; + tokens!: TokenModel; + + connected = true; constructor( private httpClient: HttpClient, private openviduService: OpenViduService - ) {} + ) { } async ngOnInit() { this.tokens = { @@ -49,102 +49,39 @@ export class AppComponent implements OnInit { } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts b/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts index d9d5d3aa..a2aed317 100644 --- a/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts @@ -1,12 +1,12 @@ -import { Component, OnInit } from '@angular/core'; -import { TokenModel } from 'openvidu-angular'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; +import { TokenModel } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: `

{{ participant.nickname }}

@@ -18,16 +18,17 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
`, - styles: [] + styles: [] }) -export class AppComponent implements OnInit{ - title = 'openvidu-custom-participant-panel-item'; - tokens!: TokenModel; - sessionId = 'participants-panel-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; +export class AppComponent implements OnInit { - constructor(private httpClient: HttpClient) {} + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-custom-participant-panel-item'; + sessionId = 'participants-panel-directive-example'; + tokens!: TokenModel; + + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -36,89 +37,40 @@ export class AppComponent implements OnInit{ }; } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - - -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts b/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts index 37118893..ce0524c2 100644 --- a/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts @@ -1,28 +1,24 @@ -import { Component, OnInit } from '@angular/core'; -import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; -import { Subscription } from 'rxjs'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Subscription, lastValueFrom } from "rxjs"; +import { ParticipantAbstractModel, ParticipantService, TokenModel } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: `
  • {{localParticipant.nickname}}
-
  • {{p.nickname}}
 - `, - styles: [ - ` + styles: [` #my-panel { background: #faff7f; height: 100%; @@ -34,15 +30,16 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; #my-panel > #remote { background: #7fb8ff; } - ` - ] + `] }) export class AppComponent implements OnInit { - title = 'openvidu-custom-participants-panel'; - tokens!: TokenModel; + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-custom-participants-panel'; sessionId = 'participants-panel-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + tokens!: TokenModel; + localParticipant!: ParticipantAbstractModel; remoteParticipants!: ParticipantAbstractModel[]; localParticipantSubs!: Subscription; @@ -51,7 +48,7 @@ export class AppComponent implements OnInit { constructor( private httpClient: HttpClient, private participantService: ParticipantService - ) {} + ) { } async ngOnInit() { this.subscribeToParticipants(); @@ -76,90 +73,40 @@ export class AppComponent implements OnInit { }); } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - -} - - +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-stream/src/app/app.component.ts b/openvidu-components/openvidu-custom-stream/src/app/app.component.ts index b4657012..b0fc5d7e 100644 --- a/openvidu-components/openvidu-custom-stream/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-stream/src/app/app.component.ts @@ -1,39 +1,37 @@ import { Component, OnInit } from '@angular/core'; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; + import { TokenModel } from 'openvidu-angular'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; @Component({ - selector: 'app-root', - template: ` - + selector: 'app-root', + template: ` +

{{ stream.participant.nickname }}

 - `, - styles: [ - ` - p { - position: absolute; - bottom: 0; - border: 2px solid; - background: #000000; - } - ` - ] + styles: [` + p { + position: absolute; + bottom: 0; + border: 2px solid; + background: #000000; + } + `] }) export class AppComponent implements OnInit { - title = 'openvidu-custom-stream'; - tokens!: TokenModel; + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-custom-stream'; sessionId = 'toolbar-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + tokens!: TokenModel; - constructor(private httpClient: HttpClient) {} + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -42,88 +40,40 @@ export class AppComponent implements OnInit { }; } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts b/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts index 2cdcdc43..44ca9b73 100644 --- a/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit } from '@angular/core'; -import { OpenViduService, TokenModel } from 'openvidu-angular'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; +import { OpenViduService, TokenModel } from "openvidu-angular"; @Component({ - selector: 'app-root', + selector: 'app-root', template: `
@@ -15,15 +15,18 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; ` }) -export class AppComponent implements OnInit{ - title = 'openvidu-custom-toolbar'; - tokens!: TokenModel; +export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-custom-toolbar'; sessionId = 'toolbar-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + tokens!: TokenModel; + publishVideo = true; publishAudio = true; - constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {} + + constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { } async ngOnInit() { this.tokens = { @@ -42,88 +45,40 @@ export class AppComponent implements OnInit{ this.openviduService.publishAudio(this.publishAudio); } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-custom-ui/src/app/app.component.ts b/openvidu-components/openvidu-custom-ui/src/app/app.component.ts index 6f025413..bde69ec2 100644 --- a/openvidu-components/openvidu-custom-ui/src/app/app.component.ts +++ b/openvidu-components/openvidu-custom-ui/src/app/app.component.ts @@ -1,22 +1,23 @@ -import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Component } from '@angular/core'; -import { catchError, throwError as observableThrowError } from 'rxjs'; +import { Component } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; -import { TokenModel } from 'openvidu-angular'; +import { TokenModel } from "openvidu-angular"; @Component({ selector: 'app-root', template: ` `, - styles: [''], + styles: [''] }) export class AppComponent { - title = 'openvidu-custom-ui'; - tokens!: TokenModel; - private sessionId = 'openvidu-custom-ui'; - private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443'; - private OPENVIDU_SERVER_SECRET = 'MY_SECRET'; - constructor(private httpClient: HttpClient) {} + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-custom-ui'; + sessionId = 'openvidu-custom-ui'; + tokens!: TokenModel; + + constructor(private httpClient: HttpClient) { } async ngOnInit() { this.tokens = { @@ -26,106 +27,39 @@ export class AppComponent { } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ async getToken(): Promise { - try { - const sessionId = await this.createSession(this.sessionId); - return this.createToken(sessionId); - } catch (error) { - console.error(error); - return Promise.reject(error); - } + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json', - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + '/accept-certificate' - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json', - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - '/openvidu/api/sessions/' + - sessionId + - '/connection', - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts b/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts index d402e83d..41c7266b 100644 --- a/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts +++ b/openvidu-components/openvidu-toggle-hand/src/app/app.component.ts @@ -1,11 +1,12 @@ -import { trigger, transition, style, animate } from '@angular/animations'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Component, OnInit } from '@angular/core'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { ParticipantService, OpenViduService } from 'openvidu-angular'; -import { ParticipantAppModel } from './models/participant-app.model'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { trigger, transition, style, animate } from "@angular/animations"; +import { lastValueFrom } from "rxjs"; -import { Session, SignalOptions } from 'openvidu-browser'; +import { ParticipantService, OpenViduService } from "openvidu-angular"; +import { ParticipantAppModel } from "./models/participant-app.model"; + +import { Session, SignalOptions } from "openvidu-browser"; enum SignalApp { HAND_TOGGLE = 'handToggle' @@ -29,14 +30,15 @@ enum SignalApp { ] }) export class AppComponent implements OnInit { + + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + tokens: { webcam: string; screen: string }; hasHandRaised: boolean = false; session: Session; private sessionId = 'openvidu-toggle-hand'; - private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443'; - private OPENVIDU_SERVER_SECRET = 'MY_SECRET'; - constructor(private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService) {} + constructor(private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService) { } async ngOnInit() { this.tokens = { webcam: await this.getToken(), @@ -84,86 +86,39 @@ export class AppComponent implements OnInit { } /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } - createSession(sessionId) { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response) => { - console.log(response); - resolve(response['id']); - }); - }); + createSession(sessionId: string): Promise { + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - createToken(sessionId): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response) => { - console.log(response); - resolve(response['token']); - }); - }); + createToken(sessionId: string): Promise { + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts index 7c42eb8a..9fefedbf 100644 --- a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts +++ b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts @@ -1,11 +1,12 @@ -import { Component, OnInit } from '@angular/core'; -import { OpenViduService, TokenModel, ParticipantService } from 'openvidu-angular'; -import { catchError, throwError as observableThrowError } from 'rxjs'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; + +import { TokenModel, OpenViduService, ParticipantService } from "openvidu-angular"; @Component({ - selector: 'app-root', - template: ` + selector: 'app-root', + template: `
`, - styles: [] + styles: [] }) export class AppComponent implements OnInit { - title = 'openvidu-toolbar-buttons'; - tokens!: TokenModel; - sessionId = 'toolbar-additionalbtn-directive-example'; - OPENVIDU_SERVER_URL = 'https://localhost:4443'; - OPENVIDU_SERVER_SECRET = 'MY_SECRET'; - constructor( - private httpClient: HttpClient, + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; + + title = 'openvidu-toolbar-buttons'; + sessionId = 'toolbar-additionalbtn-directive-example'; + tokens!: TokenModel; + + constructor( + private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService - ) {} + ) { } async ngOnInit() { this.tokens = { @@ -49,89 +51,40 @@ export class AppComponent implements OnInit { this.openviduService.publishAudio(publishAudio); } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. */ - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); } createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - 'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['id']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), - 'Content-Type': 'application/json' - }) - }; - return this.httpClient - .post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response['token']); - }); - }); + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); } - - -} +} \ No newline at end of file diff --git a/openvidu-components/openvidu-toolbar-panel-buttons/package-lock.json b/openvidu-components/openvidu-toolbar-panel-buttons/package-lock.json index d6f9f690..1f525ff9 100644 --- a/openvidu-components/openvidu-toolbar-panel-buttons/package-lock.json +++ b/openvidu-components/openvidu-toolbar-panel-buttons/package-lock.json @@ -1,11 +1,11 @@ { - "name": "openvidu-panel-buttons", + "name": "openvidu-toolbar-panel-buttons", "version": "2.21.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "openvidu-panel-buttons", + "name": "openvidu-toolbar-panel-buttons", "version": "2.21.0", "dependencies": { "@angular/animations": "~13.3.0", diff --git a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts b/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts index 3da4c136..6f30bb24 100644 --- a/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts +++ b/openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts @@ -1,136 +1,75 @@ import { Component, OnInit } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { lastValueFrom } from "rxjs"; + import { TokenModel } from "openvidu-angular"; -import { catchError, throwError as observableThrowError } from "rxjs"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; @Component({ - selector: "app-root", - template: ` + selector: "app-root", + template: `
`, - styles: [], + styles: [] }) export class AppComponent implements OnInit { - title = "openvidu-panel-buttons"; - tokens!: TokenModel; - sessionId = "toolbar-additionalPanelbtn"; - OPENVIDU_SERVER_URL = "https://localhost:4443"; - OPENVIDU_SERVER_SECRET = "MY_SECRET"; - constructor(private httpClient: HttpClient) {} + APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/'; - async ngOnInit() { - this.tokens = { - webcam: await this.getToken(), - screen: await this.getToken(), - }; - } + title = "openvidu-panel-buttons"; + sessionId = "toolbar-additionalPanelbtn"; + tokens!: TokenModel; - onButtonClicked() { - alert('button clicked'); - } + constructor(private httpClient: HttpClient) { } - /** - * -------------------------- - * SERVER-SIDE RESPONSIBILITY - * -------------------------- - * This method retrieve the mandatory user token from OpenVidu Server, - * in this case making use Angular http API. - * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case: - * 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions) - * 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions//connection) - * 3) The Connection.token must be consumed in Session.connect() method - */ + async ngOnInit() { + this.tokens = { + webcam: await this.getToken(), + screen: await this.getToken(), + }; + } - getToken(): Promise { - return this.createSession(this.sessionId).then((sessionId: string) => { - return this.createToken(sessionId); - }); - } + onButtonClicked() { + alert('button clicked'); + } - createSession(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = JSON.stringify({ customSessionId: sessionId }); - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions", - body, - options - ) - .pipe( - catchError((error) => { - if (error.status === 409) { - resolve(sessionId); - } else { - console.warn( - "No connection to OpenVidu Server. This may be a certificate error at " + - this.OPENVIDU_SERVER_URL - ); - if ( - window.confirm( - 'No connection to OpenVidu Server. This may be a certificate error at "' + - this.OPENVIDU_SERVER_URL + - '"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' + - 'is up and running at "' + - this.OPENVIDU_SERVER_URL + - '"' - ) - ) { - location.assign( - this.OPENVIDU_SERVER_URL + "/accept-certificate" - ); - } - } - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["id"]); - }); - }); - } + /** + * -------------------------------------------- + * GETTING A TOKEN FROM YOUR APPLICATION SERVER + * -------------------------------------------- + * The methods below request the creation of a Session and a Token to + * your application server. This keeps your OpenVidu deployment secure. + * + * In this sample code, there is no user control at all. Anybody could + * access your application server endpoints! In a real production + * environment, your application server must identify the user to allow + * access to the endpoints. + * + * Visit https://docs.openvidu.io/en/stable/application-server to learn + * more about the integration of OpenVidu in your application server. + */ - createToken(sessionId: string): Promise { - return new Promise((resolve, reject) => { - const body = {}; - const options = { - headers: new HttpHeaders({ - Authorization: - "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET), - "Content-Type": "application/json", - }), - }; - return this.httpClient - .post( - this.OPENVIDU_SERVER_URL + - "/openvidu/api/sessions/" + - sessionId + - "/connection", - body, - options - ) - .pipe( - catchError((error) => { - reject(error); - return observableThrowError(error); - }) - ) - .subscribe((response: any) => { - console.log(response); - resolve(response["token"]); - }); - }); - } + async getToken(): Promise { + const sessionId = await this.createSession(this.sessionId); + return await this.createToken(sessionId); + } + + createSession(sessionId: string): Promise { + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); + } + + createToken(sessionId: string): Promise { + return lastValueFrom(this.httpClient.post( + this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + { customSessionId: sessionId }, + { headers: { 'Content-Type': 'application/json' }, responseType: 'text' } + )); + } }