openvidu-elements: Used proxy config for dev mode

openvidu-components-angular/angular.json

@@ -69,12 +69,13 @@
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
 					"options": {
-						"browserTarget": "openvidu-components-testapp:build",
+						"browserTarget": "openvidu-components-testapp:build"
-						"proxyConfig": "src/proxy.config.json"
 					},
 					"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"

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",

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),
+			webcam: await this.getToken(this.sessionId),
-			screen: await this.restService.getToken(testingSession)
+			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/<SESSION_ID>/connection)
+	 *   3) The Connection.token must be consumed in Session.connect() method
+	 */
+
+	async getToken(sessionId: string): Promise<string> {
+		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<string> {
+		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']);
+				});
+		});
+	}
 }