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

Fixed openvidu-webcomponent

pull/688/head
csantosm 2022-01-25 12:02:50 +01:00
parent a73230ac79
commit 3c1876769b
4 changed files with 74 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
openvidu-components-angular/package-lock.json generated
View File

@ -4579,12 +4579,15 @@
"dev": true "dev": true
}, },
"node_modules/copy-anything": { "node_modules/copy-anything": {
"version": "2.0.3", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"is-what": "^3.12.0" "is-what": "^3.14.1"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
} }
}, },
"node_modules/copy-webpack-plugin": { "node_modules/copy-webpack-plugin": {
@ -5534,9 +5537,9 @@
"dev": true "dev": true
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.51", "version": "1.4.52",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz",
"integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==", "integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -8014,9 +8017,9 @@
} }
}, },
"node_modules/karma": { "node_modules/karma": {
"version": "6.3.11", "version": "6.3.12",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz", "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz",
"integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==", "integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
@ -12553,9 +12556,9 @@
} }
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "2.66.0", "version": "2.66.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
"integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==", "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
"dev": true, "dev": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
@ -18490,12 +18493,12 @@
"dev": true "dev": true
}, },
"copy-anything": { "copy-anything": {
"version": "2.0.3", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-what": "^3.12.0" "is-what": "^3.14.1"
} }
}, },
"copy-webpack-plugin": { "copy-webpack-plugin": {
@ -19224,9 +19227,9 @@
"dev": true "dev": true
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.51", "version": "1.4.52",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz",
"integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==", "integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==",
"dev": true "dev": true
}, },
"emoji-regex": { "emoji-regex": {
@ -21104,9 +21107,9 @@
} }
}, },
"karma": { "karma": {
"version": "6.3.11", "version": "6.3.12",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz", "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz",
"integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==", "integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==",
"dev": true, "dev": true,
"requires": { "requires": {
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
@ -24555,9 +24558,9 @@
} }
}, },
"rollup": { "rollup": {
"version": "2.66.0", "version": "2.66.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
"integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==", "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
"dev": true, "dev": true,
"requires": { "requires": {
"fsevents": "~2.3.2" "fsevents": "~2.3.2"

3
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
View File

@ -71,3 +71,6 @@ $openvidu-components-theme: mat.define-light-theme((
--ov-light-color: #ffffff; --ov-light-color: #ffffff;
--ov-light-dark-color: #f1f1f1; --ov-light-dark-color: #f1f1f1;
} }
html, body { height: 100%; overflow: hidden;}
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}

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

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from "@angular/core"; import { Component, Input, OnInit } from '@angular/core';
export interface SessionConfig { export interface SessionConfig {
sessionName: string; sessionName: string;
@ -9,16 +9,17 @@ export interface SessionConfig {
@Component({ @Component({
template: `<ov-videoconference template: `<ov-videoconference
*ngIf="successParams" *ngIf="successParams"
[sessionName]="sessionConfig.sessionName" [sessionName]="_sessionConfig.sessionName"
[userName]="sessionConfig.userName" [userName]="_sessionConfig.userName"
[openviduServerUrl]="openviduServerUrl" [openviduServerUrl]="openviduServerUrl"
[openviduSecret]="openviduSecret" [openviduSecret]="openviduSecret"
[tokens]="sessionConfig.tokens" [tokens]="_sessionConfig.tokens"
></ov-videoconference>`, ></ov-videoconference>`
}) })
export class OpenviduWebComponentComponent implements OnInit { export class OpenviduWebComponentComponent implements OnInit {
@Input() openviduServerUrl: string; @Input() openviduServerUrl: string;
@Input() openviduSecret: string; @Input() openviduSecret: string;
_sessionConfig: SessionConfig;
successParams: boolean = false; successParams: boolean = false;
@ -26,39 +27,38 @@ export class OpenviduWebComponentComponent implements OnInit {
ngOnInit(): void {} ngOnInit(): void {}
@Input("sessionConfig") @Input('sessionConfig')
set sessionConfig(config: SessionConfig | string) { set sessionConfig(config: SessionConfig | string) {
console.log("Webcomponent sessionConfig: ", config); console.log('Webcomponent sessionConfig: ', config);
// setTimeout(() => { if (typeof config === 'string') {
if (typeof config === "string") {
try { try {
console.log('STRING')
config = JSON.parse(config); config = JSON.parse(config);
} catch (error) { } catch (error) {
console.error("Unexpected JSON", error); console.error('Unexpected JSON', error);
} throw 'Unexpected JSON';
} else {
if (this.isEmpty(config)) {
// Leaving session when sessionConfig is empty
} else {
this.successParams = this.isCorrectParams(config);
if (!this.successParams) {
console.error("Parameters received are incorrect: ", config);
console.error("Session cannot start");
}
} }
} }
// }, 200); if (this.isEmpty(<SessionConfig>config)) {
// Leaving session when sessionConfig is empty
} else {
console.log("URL",this.openviduServerUrl);
console.log('SECRET',this.openviduSecret);
this.successParams = this.isCorrectParams(<SessionConfig>config);
this._sessionConfig = <SessionConfig>config;
if (!this.successParams) {
console.error('Parameters received are incorrect: ', config);
console.error('Session cannot start');
}
}
} }
private isCorrectParams(config: SessionConfig): boolean { private isCorrectParams(config: SessionConfig): boolean {
const canGenerateToken =
!!config.sessionName && console.log(config)
!!config.userName && const canGenerateToken = !!config.sessionName && !!config.userName && !!this.openviduServerUrl && !!this.openviduSecret;
!!this.openviduServerUrl && const hasToken = !!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName;
!!this.openviduSecret;
const hasToken =
!!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName;
return canGenerateToken || hasToken; return canGenerateToken || hasToken;
} }

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

@ -1,37 +1,29 @@
import { BrowserModule } from "@angular/platform-browser"; import { BrowserModule } from '@angular/platform-browser';
import { DoBootstrap, Injector, NgModule } from "@angular/core"; import { DoBootstrap, Injector, NgModule } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from "@angular/common"; import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { createCustomElement, NgElement, WithProperties } from "@angular/elements"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OpenviduWebComponentComponent } from "./openvidu-webcomponent.component";
import { OpenviduAngularModule, VideoconferenceComponent } from "openvidu-angular"; import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';
import { OpenviduAngularModule, VideoconferenceComponent } from 'openvidu-angular';
import { environment } from '../../environments/environment'; import { environment } from '../../environments/environment';
import { createCustomElement } from '@angular/elements';
declare global {
interface HTMLElementTagNameMap {
'openvidu-webcomponent': NgElement & WithProperties<{ openviduServerUrl: string, openviduSecret: string}>;
}
}
@NgModule({ @NgModule({
declarations: [OpenviduWebComponentComponent], declarations: [OpenviduWebComponentComponent],
imports: [ imports: [CommonModule, BrowserModule, BrowserAnimationsModule, OpenviduAngularModule.forRoot(environment)],
CommonModule,
BrowserModule,
OpenviduAngularModule.forRoot(environment),
],
// exports: [OpenviduWebComponentComponent], // exports: [OpenviduWebComponentComponent],
providers: [{provide: APP_BASE_HREF, useValue: '/'} , VideoconferenceComponent], providers: [{ provide: APP_BASE_HREF, useValue: '/' }, VideoconferenceComponent]
}) })
export class OpenviduWebComponentModule implements DoBootstrap { export class OpenviduWebComponentModule implements DoBootstrap {
constructor(private injector: Injector) {} constructor(private injector: Injector) {}
ngDoBootstrap(): void { ngDoBootstrap(): void {
const element = createCustomElement(OpenviduWebComponentComponent, { const element = createCustomElement(OpenviduWebComponentComponent, {
injector: this.injector, injector: this.injector
}); });
customElements.define("openvidu-webcomponent", element); customElements.define('openvidu-webcomponent', element);
} }
} }