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

openvidu-components: Updated docs 

Updated build scripts docs
Added description for token parameter
pull/766/head
Carlos Santos 2022-11-21 12:26:48 +01:00
parent d19a8406bf
commit 170c835e3b
7 changed files with 140 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,79 +1,79 @@
{ {
"dependencies": { "dependencies": {
"@angular/animations": "14.2.8", "@angular/animations": "14.2.8",
"@angular/cdk": "14.2.6", "@angular/cdk": "14.2.6",
"@angular/common": "14.2.8", "@angular/common": "14.2.8",
"@angular/core": "14.2.8", "@angular/core": "14.2.8",
"@angular/flex-layout": "14.0.0-beta.41", "@angular/flex-layout": "14.0.0-beta.41",
"@angular/forms": "14.2.8", "@angular/forms": "14.2.8",
"@angular/material": "14.2.6", "@angular/material": "14.2.6",
"@angular/platform-browser": "14.2.8", "@angular/platform-browser": "14.2.8",
"@angular/platform-browser-dynamic": "14.2.8", "@angular/platform-browser-dynamic": "14.2.8",
"@angular/router": "14.2.8", "@angular/router": "14.2.8",
"autolinker": "4.0.0", "autolinker": "4.0.0",
"openvidu-browser": "2.24.0", "openvidu-browser": "2.24.0",
"rxjs": "7.5.7", "rxjs": "7.5.7",
"tslib": "2.3.1", "tslib": "2.3.1",
"zone.js": "0.11.4" "zone.js": "0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "14.2.7", "@angular-devkit/build-angular": "14.2.7",
"@angular/cli": "14.2.7", "@angular/cli": "14.2.7",
"@angular/compiler": "14.2.8", "@angular/compiler": "14.2.8",
"@angular/compiler-cli": "14.2.8", "@angular/compiler-cli": "14.2.8",
"@angular/elements": "14.2.8", "@angular/elements": "14.2.8",
"@compodoc/compodoc": "^1.1.19", "@compodoc/compodoc": "^1.1.19",
"@types/chai": "4.3.0", "@types/chai": "4.3.0",
"@types/mocha": "9.1.0", "@types/mocha": "9.1.0",
"@types/node": "16.11.6", "@types/node": "16.11.6",
"@types/selenium-webdriver": "4.1.5", "@types/selenium-webdriver": "4.1.5",
"chai": "4.3.6", "chai": "4.3.6",
"chromedriver": "106.0.1", "chromedriver": "106.0.1",
"codelyzer": "6.0.2", "codelyzer": "6.0.2",
"concat": "^1.0.3", "concat": "^1.0.3",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"http-server": "14.1.1", "http-server": "14.1.1",
"jasmine-core": "3.10.1", "jasmine-core": "3.10.1",
"jasmine-spec-reporter": "7.0.0", "jasmine-spec-reporter": "7.0.0",
"karma": "^6.3.9", "karma": "^6.3.9",
"karma-chrome-launcher": "3.1.1", "karma-chrome-launcher": "3.1.1",
"karma-coverage": "^2.0.3", "karma-coverage": "^2.0.3",
"karma-coverage-istanbul-reporter": "3.0.3", "karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1", "karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0", "karma-jasmine-html-reporter": "1.7.0",
"karma-junit-reporter": "2.0.1", "karma-junit-reporter": "2.0.1",
"karma-mocha-reporter": "2.2.5", "karma-mocha-reporter": "2.2.5",
"karma-notify-reporter": "1.3.0", "karma-notify-reporter": "1.3.0",
"mocha": "9.2.2", "mocha": "9.2.2",
"ng-packagr": "14.2.2", "ng-packagr": "14.2.2",
"selenium-webdriver": "4.5.0", "selenium-webdriver": "4.5.0",
"ts-node": "10.4.0", "ts-node": "10.4.0",
"tslint": "6.1.3", "tslint": "6.1.3",
"typescript": "4.8.4", "typescript": "4.8.4",
"webpack-bundle-analyzer": "^4.5.0" "webpack-bundle-analyzer": "^4.5.0"
}, },
"name": "openvidu-components-testapp", "name": "openvidu-components-testapp",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "ng build openvidu-components-testapp --configuration production", "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", "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: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: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", "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: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: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": "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:e2e-ci": "cross-env LAUNCH_MODE=CI npm run lib:e2e",
"lib:serve": "ng build openvidu-angular --watch", "lib:serve": "ng build openvidu-angular --watch",
"lib:test": "ng test openvidu-angular --no-watch --code-coverage", "lib:test": "ng test openvidu-angular --no-watch --code-coverage",
"lint": "ng lint", "lint": "ng lint",
"start": "ng serve --configuration development", "start": "ng serve --configuration development",
"start-prod": "npx http-server ./dist/openvidu-components-testapp/ --port 4200", "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", "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: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": "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:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e",
"webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/" "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/"
}, },
"version": "2.24.0" "version": "2.24.0"
} }

8
openvidu-components-angular/projects/openvidu-angular/doc/.compodocrc.json
View File

@ -1,6 +1,6 @@
{ {
"name": "OpenVidu Angular Documentation", "name": "OpenVidu Angular Documentation",
"output": "../../docs/openvidu-angular", "output": "./docs/openvidu-angular",
"hideGenerator": true, "hideGenerator": true,
"disableLifeCycleHooks": true, "disableLifeCycleHooks": true,
"disableProtected": true, "disableProtected": true,
@ -14,7 +14,7 @@
"disableStyleTab": true, "disableStyleTab": true,
"disableDependencies": true, "disableDependencies": true,
"theme": "gitbook", "theme": "gitbook",
"customFavicon": "doc/favicon.ico", "customFavicon": "./projects/openvidu-angular/doc/favicon.ico",
"extTheme": "doc/" "extTheme": "./projects/openvidu-angular/doc/",
"tsconfig": "./projects/openvidu-angular/doc/tsconfig.doc.json"
} }

55
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -264,32 +264,45 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
openviduAngularStreamTemplate: TemplateRef<any>; openviduAngularStreamTemplate: TemplateRef<any>;
/** /**
* @param {TokenModel} tokens The tokens parameter must be an object with `webcam` and `screen` fields. * Tokens parameter is required to grant a participant access to a Session.
* Both of them are `string` type. See {@link TokenModel} * 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() @Input()
set tokens(tokens: TokenModel) { set tokens(tokens: TokenModel) {
let openviduEdition;
if (!tokens || !tokens.webcam) { if (!tokens || !tokens.webcam) {
this.log.w('No tokens received'); this.log.e('No tokens received');
} else { throw new Error("No token(s) received.");
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();
} }
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();
} }
/** /**

9
openvidu-components-angular/projects/openvidu-angular/src/lib/models/token.model.ts
View File

@ -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 { export interface TokenModel {
webcam: string; webcam: string;
screen?: string; screen?: string;

16
openvidu-components-angular/src/app/app.module.ts
View File

@ -1,20 +1,20 @@
import { BrowserModule } from '@angular/platform-browser';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { NgModule } from '@angular/core'; 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 { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu'; 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 { 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 { 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 // openvidu-angular
import { OpenViduAngularModule } from 'openvidu-angular'; import { OpenViduAngularModule } from 'openvidu-angular';

20
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -1,5 +1,5 @@
import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { OpenViduService, TokenModel, ParticipantAbstractModel, RecordingInfo } from 'openvidu-angular'; import { OpenViduService, ParticipantAbstractModel, RecordingInfo, TokenModel } from 'openvidu-angular';
import { Session } from 'openvidu-browser'; import { Session } from 'openvidu-browser';
/** /**
@ -345,7 +345,7 @@ export class OpenviduWebComponentComponent implements OnInit {
* @example * @example
* <openvidu-webcomponent toolbar-captions-button="false"></openvidu-webcomponent> * <openvidu-webcomponent toolbar-captions-button="false"></openvidu-webcomponent>
*/ */
@Input() set toolbarCaptionsButton(value: string | boolean) { @Input() set toolbarCaptionsButton(value: string | boolean) {
this._toolbarCaptionsButton = this.castToBoolean(value); this._toolbarCaptionsButton = this.castToBoolean(value);
} }
/** /**
@ -542,27 +542,33 @@ export class OpenviduWebComponentComponent implements OnInit {
ngOnInit(): void {} 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 * @example
* <openvidu-webcomponent tokens='{"webcam":"TOKEN1", "screen":"TOKEN2"}'></openvidu-webcomponent> * <openvidu-webcomponent tokens='{"webcam":"TOKEN1", "screen":"TOKEN2"}'></openvidu-webcomponent>
* *
* or
* *
* @example
* <openvidu-webcomponent tokens='TOKEN1'></openvidu-webcomponent> * <openvidu-webcomponent tokens='TOKEN1'></openvidu-webcomponent>
*
*/ */
@Input('tokens') @Input('tokens')
set tokens(value: TokenModel | string) { set tokens(value: TokenModel | string) {
console.debug('Webcomponent tokens: ', value); // console.debug('Webcomponent tokens: ', value);
try { try {
this._tokens = this.castToJson(value); this._tokens = this.castToJson(value);
this.success = !!this._tokens?.webcam && !!this._tokens?.screen; this.success = !!this._tokens?.webcam && !!this._tokens?.screen;
} catch (error) { } catch (error) {
if (typeof value === 'string' && value !== '') { if (typeof value === 'string' && value !== '') {
console.debug('Sigle token received.'); console.debug('Single token received.');
this._tokens = { webcam: value }; this._tokens = { webcam: value };
this.success = true; this.success = true;
} else { } else {
console.error(error); console.error(error);
console.error('Parameters received are incorrect: ', value); console.error('Tokens parameter received is incorrect: ', value);
console.error('Session cannot start'); console.error('Session cannot start');
} }
} }

4
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts
View File

@ -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 { 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component'; import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';