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

View File

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

View File

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

View File

@ -264,32 +264,45 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
openviduAngularStreamTemplate: TemplateRef<any>;
/**
* @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();
}
/**

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 {
webcam: string;
screen?: string;

View File

@ -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';

View File

@ -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
* <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);
}
/**
@ -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
* <openvidu-webcomponent tokens='{"webcam":"TOKEN1", "screen":"TOKEN2"}'></openvidu-webcomponent>
*
* or
*
* @example
* <openvidu-webcomponent tokens='TOKEN1'></openvidu-webcomponent>
*
*/
@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');
}
}

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 { 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';