diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index 5d88c7f5..7167abfb 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -1,79 +1,79 @@ { "dependencies": { - "@angular/animations": "14.2.8", - "@angular/cdk": "14.2.6", - "@angular/common": "14.2.8", - "@angular/core": "14.2.8", - "@angular/flex-layout": "14.0.0-beta.41", - "@angular/forms": "14.2.8", - "@angular/material": "14.2.6", - "@angular/platform-browser": "14.2.8", - "@angular/platform-browser-dynamic": "14.2.8", - "@angular/router": "14.2.8", - "autolinker": "4.0.0", - "openvidu-browser": "2.24.0", - "rxjs": "7.5.7", - "tslib": "2.3.1", + "@angular/animations": "14.2.8", + "@angular/cdk": "14.2.6", + "@angular/common": "14.2.8", + "@angular/core": "14.2.8", + "@angular/flex-layout": "14.0.0-beta.41", + "@angular/forms": "14.2.8", + "@angular/material": "14.2.6", + "@angular/platform-browser": "14.2.8", + "@angular/platform-browser-dynamic": "14.2.8", + "@angular/router": "14.2.8", + "autolinker": "4.0.0", + "openvidu-browser": "2.24.0", + "rxjs": "7.5.7", + "tslib": "2.3.1", "zone.js": "0.11.4" - }, + }, "devDependencies": { - "@angular-devkit/build-angular": "14.2.7", - "@angular/cli": "14.2.7", - "@angular/compiler": "14.2.8", - "@angular/compiler-cli": "14.2.8", - "@angular/elements": "14.2.8", - "@compodoc/compodoc": "^1.1.19", - "@types/chai": "4.3.0", - "@types/mocha": "9.1.0", - "@types/node": "16.11.6", - "@types/selenium-webdriver": "4.1.5", - "chai": "4.3.6", - "chromedriver": "106.0.1", - "codelyzer": "6.0.2", - "concat": "^1.0.3", - "cross-env": "^7.0.3", - "http-server": "14.1.1", - "jasmine-core": "3.10.1", - "jasmine-spec-reporter": "7.0.0", - "karma": "^6.3.9", - "karma-chrome-launcher": "3.1.1", - "karma-coverage": "^2.0.3", - "karma-coverage-istanbul-reporter": "3.0.3", - "karma-jasmine": "4.0.1", - "karma-jasmine-html-reporter": "1.7.0", - "karma-junit-reporter": "2.0.1", - "karma-mocha-reporter": "2.2.5", - "karma-notify-reporter": "1.3.0", - "mocha": "9.2.2", - "ng-packagr": "14.2.2", - "selenium-webdriver": "4.5.0", - "ts-node": "10.4.0", - "tslint": "6.1.3", - "typescript": "4.8.4", + "@angular-devkit/build-angular": "14.2.7", + "@angular/cli": "14.2.7", + "@angular/compiler": "14.2.8", + "@angular/compiler-cli": "14.2.8", + "@angular/elements": "14.2.8", + "@compodoc/compodoc": "^1.1.19", + "@types/chai": "4.3.0", + "@types/mocha": "9.1.0", + "@types/node": "16.11.6", + "@types/selenium-webdriver": "4.1.5", + "chai": "4.3.6", + "chromedriver": "106.0.1", + "codelyzer": "6.0.2", + "concat": "^1.0.3", + "cross-env": "^7.0.3", + "http-server": "14.1.1", + "jasmine-core": "3.10.1", + "jasmine-spec-reporter": "7.0.0", + "karma": "^6.3.9", + "karma-chrome-launcher": "3.1.1", + "karma-coverage": "^2.0.3", + "karma-coverage-istanbul-reporter": "3.0.3", + "karma-jasmine": "4.0.1", + "karma-jasmine-html-reporter": "1.7.0", + "karma-junit-reporter": "2.0.1", + "karma-mocha-reporter": "2.2.5", + "karma-notify-reporter": "1.3.0", + "mocha": "9.2.2", + "ng-packagr": "14.2.2", + "selenium-webdriver": "4.5.0", + "ts-node": "10.4.0", + "tslint": "6.1.3", + "typescript": "4.8.4", "webpack-bundle-analyzer": "^4.5.0" - }, - "name": "openvidu-components-testapp", - "private": true, + }, + "name": "openvidu-components-testapp", + "private": true, "scripts": { - "build": "ng build openvidu-components-testapp --configuration production", - "bundle-report": "ng build openvidu-webcomponent --stats-json --configuration production && webpack-bundle-analyzer dist/openvidu-webcomponent/stats.json", - "doc:build": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json -c ./doc/.compodocrc.json", - "doc:clean-copy": "rm -rf ../../openvidu.io-docs/docs/api/openvidu-angular && cp -r ./docs/openvidu-angular/ ../../openvidu.io-docs/docs/api/openvidu-angular", - "doc:serve": "cd projects/openvidu-angular && npx compodoc -p ./doc/tsconfig.doc.json --watch --serve -c ./doc/.compodocrc.json", - "lib:build": "ng build openvidu-angular --configuration production && cd ./dist/openvidu-angular && npm pack", - "lib:copy": "cp dist/openvidu-angular/openvidu-angular-*.tgz ../../openvidu-tutorials/openvidu-call/openvidu-call-front", - "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", - "lib:serve": "ng build openvidu-angular --watch", - "lib:test": "ng test openvidu-angular --no-watch --code-coverage", - "lint": "ng lint", - "start": "ng serve --configuration development", - "start-prod": "npx http-server ./dist/openvidu-components-testapp/ --port 4200", - "start:ssl": "ng serve --ssl --configuration development --host 0.0.0.0 --port 4200 --ssl-cert /path/to/cert.pem --ssl-key /path/to/key.pem", - "webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js", - "webcomponent:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.test.js", - "webcomponent:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e", + "build": "ng build openvidu-components-testapp --configuration production", + "bundle-report": "ng build openvidu-webcomponent --stats-json --configuration production && webpack-bundle-analyzer dist/openvidu-webcomponent/stats.json", + "doc:build": "npx compodoc -p ./projects/openvidu-angular/doc/tsconfig.doc.json -c ./projects/openvidu-angular/doc/.compodocrc.json", + "doc:clean-copy": "rm -rf ../../openvidu.io-docs/docs/api/openvidu-angular && cp -r ./docs/openvidu-angular/ ../../openvidu.io-docs/docs/api/openvidu-angular", + "doc:serve": "npx compodoc --watch --serve --includes ./projects/openvidu-angular/doc/extends -c ./projects/openvidu-angular/doc/.compodocrc.json", + "lib:build": "ng build openvidu-angular --configuration production && cd ./dist/openvidu-angular && npm pack", + "lib:copy": "cp dist/openvidu-angular/openvidu-angular-*.tgz ../../openvidu-tutorials/openvidu-call/openvidu-call-front", + "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", + "lib:serve": "ng build openvidu-angular --watch", + "lib:test": "ng test openvidu-angular --no-watch --code-coverage", + "lint": "ng lint", + "start": "ng serve --configuration development", + "start-prod": "npx http-server ./dist/openvidu-components-testapp/ --port 4200", + "start:ssl": "ng serve --ssl --configuration development --host 0.0.0.0 --port 4200 --ssl-cert /path/to/cert.pem --ssl-key /path/to/key.pem", + "webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js", + "webcomponent:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.test.js", + "webcomponent:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e", "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/" - }, + }, "version": "2.24.0" } \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json b/openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json index 9bb309b5..6b7d89c5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json +++ b/openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json @@ -1,6 +1,6 @@ { "name": "OpenVidu Angular Documentation", - "output": "../../docs/openvidu-angular", + "output": "./docs/openvidu-angular", "hideGenerator": true, "disableLifeCycleHooks": true, "disableProtected": true, @@ -14,7 +14,7 @@ "disableStyleTab": true, "disableDependencies": true, "theme": "gitbook", - "customFavicon": "doc/favicon.ico", - "extTheme": "doc/" - + "customFavicon": "./projects/openvidu-angular/doc/favicon.ico", + "extTheme": "./projects/openvidu-angular/doc/", + "tsconfig": "./projects/openvidu-angular/doc/tsconfig.doc.json" } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index 2640766b..4a5a0fe0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -264,32 +264,45 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni openviduAngularStreamTemplate: TemplateRef; /** - * @param {TokenModel} tokens The tokens parameter must be an object with `webcam` and `screen` fields. - * Both of them are `string` type. See {@link TokenModel} + * Tokens parameter is required to grant a participant access to a Session. + * This OpenVidu token will be use by each participant when connecting to a Session. + * + * This input accepts a {@link TokenModel} object type. + * + * @param {TokenModel} tokens The tokens parameter must be a {@link TokenModel} object. + * */ @Input() set tokens(tokens: TokenModel) { + let openviduEdition; if (!tokens || !tokens.webcam) { - this.log.w('No tokens received'); - } else { - this.log.w('Tokens received'); - this.openviduService.setWebcamToken(tokens.webcam); - - const openviduEdition = new URL(tokens.webcam).searchParams.get('edition'); - if (!!openviduEdition) { - this.openviduService.setOpenViduEdition(OpenViduEdition.PRO); - } else { - this.openviduService.setOpenViduEdition(OpenViduEdition.CE); - } - - if (tokens.screen) { - this.openviduService.setScreenToken(tokens.screen); - } else { - this.log.w('No screen token found. Screenshare feature will be disabled'); - } - - this.start(); + this.log.e('No tokens received'); + throw new Error("No token(s) received."); } + + try { + openviduEdition = new URL(tokens.webcam).searchParams.get('edition'); + } catch (error) { + this.log.e('Token received does not seem to be valid: ', tokens.webcam); + throw new Error(`Error validating token parameter ${error}`); + } + + this.log.d('Tokens received'); + if (!!openviduEdition) { + this.openviduService.setOpenViduEdition(OpenViduEdition.PRO); + } else { + this.openviduService.setOpenViduEdition(OpenViduEdition.CE); + } + + this.openviduService.setWebcamToken(tokens.webcam); + if (tokens.screen) { + this.openviduService.setScreenToken(tokens.screen); + } else { + this.log.w('No screen token found. Screenshare feature will be disabled'); + } + + this.start(); + } /** diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts index 86c859bb..b758ffb6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts @@ -1,3 +1,12 @@ + +/** + * + * TokenModel type must be contain a `webcam` property (it will be used by a standart participant). + * It also optionally can contain a `screen` property. + * + * If TokenModel contains the `screen` token, the participant will be able to share a screen and camera at the same time. + * Otherwise, the participant will not be able to share a screen. + */ export interface TokenModel { webcam: string; screen?: string; diff --git a/openvidu-components-angular/src/app/app.module.ts b/openvidu-components-angular/src/app/app.module.ts index 82cafaad..fde652c5 100644 --- a/openvidu-components-angular/src/app/app.module.ts +++ b/openvidu-components-angular/src/app/app.module.ts @@ -1,20 +1,20 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { MatCheckboxModule } from '@angular/material/checkbox'; import { NgModule } from '@angular/core'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { BrowserModule } from '@angular/platform-browser'; -import { AppRoutingModule } from './app.routing.module'; -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app.routing.module'; import { environment } from 'src/environments/environment'; -import { CallComponent } from './openvidu-call/call.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { TestingComponent } from './testing-app/testing.component'; import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; +import { CallComponent } from './openvidu-call/call.component'; +import { TestingComponent } from './testing-app/testing.component'; // openvidu-angular import { OpenViduAngularModule } from 'openvidu-angular'; diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts index 09036881..55f62d4d 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts @@ -1,5 +1,5 @@ -import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core'; -import { OpenViduService, TokenModel, ParticipantAbstractModel, RecordingInfo } from 'openvidu-angular'; +import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { OpenViduService, ParticipantAbstractModel, RecordingInfo, TokenModel } from 'openvidu-angular'; import { Session } from 'openvidu-browser'; /** @@ -345,7 +345,7 @@ export class OpenviduWebComponentComponent implements OnInit { * @example * */ - @Input() set toolbarCaptionsButton(value: string | boolean) { + @Input() set toolbarCaptionsButton(value: string | boolean) { this._toolbarCaptionsButton = this.castToBoolean(value); } /** @@ -542,27 +542,33 @@ export class OpenviduWebComponentComponent implements OnInit { ngOnInit(): void {} /** + * Tokens parameter is required to grant a participant access to a Session. + * This OpenVidu token will be use by each participant when connecting to a Session. + * + * This input accepts a {@link TokenModel} object type or a string type. + * * @example * * - * or * + * @example * + * */ @Input('tokens') set tokens(value: TokenModel | string) { - console.debug('Webcomponent tokens: ', value); + // console.debug('Webcomponent tokens: ', value); try { this._tokens = this.castToJson(value); this.success = !!this._tokens?.webcam && !!this._tokens?.screen; } catch (error) { if (typeof value === 'string' && value !== '') { - console.debug('Sigle token received.'); + console.debug('Single token received.'); this._tokens = { webcam: value }; this.success = true; } else { console.error(error); - console.error('Parameters received are incorrect: ', value); + console.error('Tokens parameter received is incorrect: ', value); console.error('Session cannot start'); } } diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts index 3b6acaea..6916c469 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts @@ -1,6 +1,6 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { DoBootstrap, Injector, NgModule } from '@angular/core'; import { APP_BASE_HREF, CommonModule } from '@angular/common'; +import { DoBootstrap, Injector, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';