diff --git a/openvidu-server/src/dashboard/src/app/app.module.ts b/openvidu-server/src/dashboard/src/app/app.module.ts index 17b629c9..08de9cdb 100644 --- a/openvidu-server/src/dashboard/src/app/app.module.ts +++ b/openvidu-server/src/dashboard/src/app/app.module.ts @@ -15,6 +15,7 @@ import { OpenViduVideoComponent } from './components/layouts/ov-video.component' import { SessionDetailsComponent } from './components/session-details/session-details.component'; import { InfoService } from './services/info.service'; import { RestService } from './services/rest.service'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ @@ -31,6 +32,7 @@ import { RestService } from './services/rest.service'; imports: [ BrowserModule, FormsModule, + HttpClientModule, routing, AppMaterialModule, FlexLayoutModule diff --git a/openvidu-server/src/dashboard/src/app/components/dashboard/dashboard.component.ts b/openvidu-server/src/dashboard/src/app/components/dashboard/dashboard.component.ts index 462635db..4e896042 100644 --- a/openvidu-server/src/dashboard/src/app/components/dashboard/dashboard.component.ts +++ b/openvidu-server/src/dashboard/src/app/components/dashboard/dashboard.component.ts @@ -103,20 +103,19 @@ export class DashboardComponent implements OnInit, OnDestroy { dialogRef = this.dialog.open(CredentialsDialogComponent); dialogRef.componentInstance.myReference = dialogRef; - dialogRef.afterClosed().subscribe(secret => { + dialogRef.afterClosed().subscribe(async secret => { if (secret) { - this.restService.getOpenViduToken(secret) - .then((token => { - this.connectToSession(token); - })) - .catch(error => { - if (error === 401) { // User unauthorized error. OpenVidu security is active - this.testVideo(); - } else { - console.error(error); - this.msgChain.push('Error connecting to session: ' + error); - } - }); + try { + const token = await this.restService.getToken(secret); + this.connectToSession(token); + } catch (error) { + if (error.status === 401) { // User unauthorized error. OpenVidu security is active + this.testVideo(); + } else { + console.error(error.error); + this.msgChain.push('Error connecting to session: [' + error.status + '] ' + error.message); + } + } } }); } diff --git a/openvidu-server/src/dashboard/src/app/services/rest.service.ts b/openvidu-server/src/dashboard/src/app/services/rest.service.ts index d4f05b94..0e2425d6 100644 --- a/openvidu-server/src/dashboard/src/app/services/rest.service.ts +++ b/openvidu-server/src/dashboard/src/app/services/rest.service.ts @@ -1,86 +1,82 @@ import { Injectable } from '@angular/core'; +import { HttpHeaders, HttpClient } from '@angular/common/http'; +import { catchError } from 'rxjs/operators'; +import { throwError } from 'rxjs'; @Injectable() export class RestService { private openviduPublicUrl: string; + constructor(private httpClient: HttpClient) { } + getOpenViduPublicUrl(): Promise { return new Promise((resolve, reject) => { if (!!this.openviduPublicUrl) { resolve(this.openviduPublicUrl); } else { - const url = location.protocol + '//' + location.hostname + ((!!location.port) ? (':' + location.port) : '') + - '/config/openvidu-publicurl'; - const http = new XMLHttpRequest(); - - http.onreadystatechange = () => { - if (http.readyState === 4) { - if (http.status === 200) { - this.openviduPublicUrl = http.responseText; - resolve(http.responseText); - } else { - reject('Error getting OpenVidu publicurl'); - } - }; - } - http.open('GET', url, true); - http.send(); + this.httpClient.get(location.protocol + '//' + location.hostname + ((!!location.port) ? (':' + location.port) : '') + + '/config/openvidu-publicurl', { responseType: 'text' }).pipe( + catchError(error => { + reject(error); + return throwError(error); + }) + ) + .subscribe(response => { + this.openviduPublicUrl = response; + resolve(response); + }); } }); } - getOpenViduToken(secret: string): Promise { - if (!this.openviduPublicUrl) { - this.getOpenViduPublicUrl().then(() => { - return this.getOpenViduToken(secret); - }); - } else { - return new Promise((resolve, reject) => { - const url1 = 'https://OPENVIDUAPP:' + secret + '@' + this.openviduPublicUrl.split('://')[1] + 'api/sessions'; - const http1 = new XMLHttpRequest(); - const data1 = {}; - data1['mediaMode'] = 'ROUTED'; - data1['recordingMode'] = 'MANUAL'; - data1['RECORDING_LAYOUT'] = 'BEST_FIT'; - const json1 = JSON.stringify(data1); + async getToken(secret: string): Promise { + const sessionId: string = await this.createSession(secret); + return await this.createToken(sessionId, secret); + } - http1.onreadystatechange = () => { - if (http1.status === 401) { - reject(401); - } else if (http1.readyState === 4) { - if (http1.status === 200) { - const sessionId = JSON.parse(http1.responseText).id; + createSession(secret: String): Promise { + return new Promise((resolve, reject) => { + const body = JSON.stringify({}); + const options = { + headers: new HttpHeaders({ + 'Authorization': 'Basic ' + btoa('OPENVIDUAPP:' + secret), + 'Content-Type': 'application/json' + }) + }; + this.httpClient.post(this.openviduPublicUrl + 'api/sessions', body, options) + .pipe( + catchError(error => { + reject(error); + return throwError(error); + }) + ) + .subscribe(response => { + resolve(response['id']); + }); + }); + } - const url2 = this.openviduPublicUrl + 'api/tokens'; - const http2 = new XMLHttpRequest(); - const data2 = {}; - data2['session'] = sessionId; - const json2 = JSON.stringify(data2); - - http2.onreadystatechange = () => { - if (http2.readyState === 4) { - if (http2.status === 200) { - resolve(JSON.parse(http2.responseText).id); - } else { - reject(http2.status); - } - }; - } - http2.open('POST', url2, true); - http2.setRequestHeader('Content-type', 'application/json'); - http2.setRequestHeader('Authorization', 'Basic ' + btoa('OPENVIDUAPP:' + secret)); - http2.send(json2); - } else { - reject(http1.status); - } - }; - } - http1.open('POST', url1, true); - http1.setRequestHeader('Content-type', 'application/json'); - http1.send(json1); - }); - } + createToken(session, secret): Promise { + return new Promise((resolve, reject) => { + const body = JSON.stringify({ session }); + const options = { + headers: new HttpHeaders({ + 'Authorization': 'Basic ' + btoa('OPENVIDUAPP:' + secret), + 'Content-Type': 'application/json' + }) + }; + this.httpClient.post(this.openviduPublicUrl + 'api/tokens', body, options) + .pipe( + catchError(error => { + reject(error); + return throwError(error); + }) + ) + .subscribe(response => { + resolve(response['token']); + }); + }); } }