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
},
"node_modules/copy-anything": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
"integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"dependencies": {
"is-what": "^3.12.0"
"is-what": "^3.14.1"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/copy-webpack-plugin": {
@ -5534,9 +5537,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.51",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz",
"integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==",
"version": "1.4.52",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz",
"integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==",
"dev": true
},
"node_modules/emoji-regex": {
@ -8014,9 +8017,9 @@
}
},
"node_modules/karma": {
"version": "6.3.11",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz",
"integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==",
"version": "6.3.12",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz",
"integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==",
"dev": true,
"dependencies": {
"body-parser": "^1.19.0",
@ -12553,9 +12556,9 @@
}
},
"node_modules/rollup": {
"version": "2.66.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz",
"integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==",
"version": "2.66.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
"integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
"dev": true,
"bin": {
"rollup": "dist/bin/rollup"
@ -18490,12 +18493,12 @@
"dev": true
},
"copy-anything": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
"integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"requires": {
"is-what": "^3.12.0"
"is-what": "^3.14.1"
}
},
"copy-webpack-plugin": {
@ -19224,9 +19227,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.4.51",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz",
"integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==",
"version": "1.4.52",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz",
"integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==",
"dev": true
},
"emoji-regex": {
@ -21104,9 +21107,9 @@
}
},
"karma": {
"version": "6.3.11",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz",
"integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==",
"version": "6.3.12",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz",
"integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==",
"dev": true,
"requires": {
"body-parser": "^1.19.0",
@ -24555,9 +24558,9 @@
}
},
"rollup": {
"version": "2.66.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz",
"integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==",
"version": "2.66.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
"integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
"dev": true,
"requires": {
"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-dark-color: #f1f1f1;
}
html, body { height: 100%; overflow: hidden;}
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}

58
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 {
sessionName: string;
@ -7,18 +7,19 @@ export interface SessionConfig {
}
@Component({
template: ` <ov-videoconference
template: `<ov-videoconference
*ngIf="successParams"
[sessionName]="sessionConfig.sessionName"
[userName]="sessionConfig.userName"
[sessionName]="_sessionConfig.sessionName"
[userName]="_sessionConfig.userName"
[openviduServerUrl]="openviduServerUrl"
[openviduSecret]="openviduSecret"
[tokens]="sessionConfig.tokens"
></ov-videoconference>`,
[tokens]="_sessionConfig.tokens"
></ov-videoconference>`
})
export class OpenviduWebComponentComponent implements OnInit {
@Input() openviduServerUrl: string;
@Input() openviduSecret: string;
_sessionConfig: SessionConfig;
successParams: boolean = false;
@ -26,39 +27,38 @@ export class OpenviduWebComponentComponent implements OnInit {
ngOnInit(): void {}
@Input("sessionConfig")
@Input('sessionConfig')
set sessionConfig(config: SessionConfig | string) {
console.log("Webcomponent sessionConfig: ", config);
// setTimeout(() => {
if (typeof config === "string") {
console.log('Webcomponent sessionConfig: ', config);
if (typeof config === 'string') {
try {
console.log('STRING')
config = JSON.parse(config);
} catch (error) {
console.error("Unexpected JSON", error);
}
} 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");
}
console.error('Unexpected JSON', error);
throw 'Unexpected JSON';
}
}
// }, 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 {
const canGenerateToken =
!!config.sessionName &&
!!config.userName &&
!!this.openviduServerUrl &&
!!this.openviduSecret;
const hasToken =
!!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName;
console.log(config)
const canGenerateToken = !!config.sessionName && !!config.userName && !!this.openviduServerUrl && !!this.openviduSecret;
const hasToken = !!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName;
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 { DoBootstrap, Injector, NgModule } from "@angular/core";
import { APP_BASE_HREF, CommonModule } from "@angular/common";
import { createCustomElement, NgElement, WithProperties } from "@angular/elements";
import { OpenviduWebComponentComponent } from "./openvidu-webcomponent.component";
import { BrowserModule } from '@angular/platform-browser';
import { DoBootstrap, Injector, NgModule } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OpenviduAngularModule, VideoconferenceComponent } from "openvidu-angular";
import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component';
import { OpenviduAngularModule, VideoconferenceComponent } from 'openvidu-angular';
import { environment } from '../../environments/environment';
declare global {
interface HTMLElementTagNameMap {
'openvidu-webcomponent': NgElement & WithProperties<{ openviduServerUrl: string, openviduSecret: string}>;
}
}
import { createCustomElement } from '@angular/elements';
@NgModule({
declarations: [OpenviduWebComponentComponent],
imports: [
CommonModule,
BrowserModule,
OpenviduAngularModule.forRoot(environment),
],
imports: [CommonModule, BrowserModule, BrowserAnimationsModule, OpenviduAngularModule.forRoot(environment)],
// exports: [OpenviduWebComponentComponent],
providers: [{provide: APP_BASE_HREF, useValue: '/'} , VideoconferenceComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, VideoconferenceComponent]
})
export class OpenviduWebComponentModule implements DoBootstrap {
constructor(private injector: Injector) {}
ngDoBootstrap(): void {
const element = createCustomElement(OpenviduWebComponentComponent, {
injector: this.injector,
injector: this.injector
});
customElements.define("openvidu-webcomponent", element);
customElements.define('openvidu-webcomponent', element);
}
}