diff --git a/openvidu-components-angular/angular.json b/openvidu-components-angular/angular.json index 4bcb17be..93255fec 100644 --- a/openvidu-components-angular/angular.json +++ b/openvidu-components-angular/angular.json @@ -69,12 +69,13 @@ "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "openvidu-components-testapp:build", - "proxyConfig": "src/proxy.config.json" + "browserTarget": "openvidu-components-testapp:build" }, "configurations": { "development": { - "browserTarget": "openvidu-components-testapp:build:development" + "browserTarget": "openvidu-components-testapp:build:development", + "proxyConfig": "src/proxy.config.json" + }, "production": { "browserTarget": "openvidu-components-testapp:build:production" diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index 2bb065ed..36f3ecb5 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -9,6 +9,7 @@ "lib:copy": "cp dist/openvidu-angular/openvidu-angular-*.tgz ../openvidu-tutorials/openvidu-angular-components", "lib:test": "ng test openvidu-angular --no-watch --code-coverage", "lib:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/angular.test.js", + "lib:e2e-ci": "cross-env LAUNCH_MODE=CI npm run lib:e2e", "webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js", "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/", "webcomponent:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.test.js", diff --git a/openvidu-components-angular/src/app/testing-app/testing.component.ts b/openvidu-components-angular/src/app/testing-app/testing.component.ts index a9939468..3802e8f5 100644 --- a/openvidu-components-angular/src/app/testing-app/testing.component.ts +++ b/openvidu-components-angular/src/app/testing-app/testing.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; + import { RestService } from '../services/rest.service'; +import { throwError as observableThrowError } from 'rxjs'; +import { catchError } from 'rxjs/operators'; interface TemplateDirectives { name: string; @@ -24,6 +28,9 @@ enum DirectiveId { styleUrls: ['./testing.component.scss'] }) export class TestingComponent implements OnInit { + OPENVIDU_SERVER_URL = 'https://localhost:4443'; + OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + sessionId: string; directives: TemplateDirectives[] = [ { name: 'ovToolbar', @@ -63,19 +70,19 @@ export class TestingComponent implements OnInit { ovStreamSelected = false; tokens: { webcam: any; screen: any }; - constructor(private restService: RestService) {} + constructor(private httpClient: HttpClient) {} async ngOnInit() { - const testingSession = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`; + this.sessionId = `testingSession-${(Math.random() + 1).toString(36).substring(7)}`; this.tokens = { - webcam: await this.restService.getToken(testingSession), - screen: await this.restService.getToken(testingSession) + webcam: await this.getToken(this.sessionId), + screen: await this.getToken(this.sessionId) }; } appendElement(id: string) { - console.log(id) + console.log(id); const eventsDiv = document.getElementById('events'); const element = document.createElement('div'); element.setAttribute('id', id); @@ -126,4 +133,87 @@ export class TestingComponent implements OnInit { apply() { this.showDirectives = false; } + + /** + * -------------------------- + * 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 getToken(sessionId: string): Promise { + const id = await this.createSession(sessionId); + return await this.createToken(id); + } + + 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']); + }); + }); + } + + 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']); + }); + }); + } }