ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-elements: Used proxy config for dev mode

pull/707/head
csantosm 2022-03-21 16:33:09 +01:00
parent 19a64c993a
commit 0d9b629b18
3 changed files with 100 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openvidu-components-angular/angular.json
View File

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

1
openvidu-components-angular/package.json
View File

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

100
openvidu-components-angular/src/app/testing-app/testing.component.ts
View File

@ -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/<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']);
});
});
}
}