smartvideo v0.0.33

Smartvideo

Welcome to Smartvideo project. This project was created with Stencil version 2.5.2. This is a widget that can be embedded into any front-end application to make videocall between mulitple participants.

Installation

To install this into you application, run the following command inside your project folder:

npm install smartvideo

Angular configuration

To use this webcomponent within an Angular CLI project is a two-step process. We need to:

1. Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components.
2. Call defineCustomElements() from main.ts (or some other appropriate place).

Including the Custom Elements Schema

Including the CUSTOM_ELEMENTS_SCHEMA in the module allows the use of the web components in the HTML markup without the compiler producing errors. This code should be added into the AppModule and in every other modules that use your custom elements. Here is an example of adding it to AppModule

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Calling defineCustomElements

A component collection built with Stencil includes a main function that is used to load the components in the collection. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from 'smartvideo/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements();

Edge and IE11 polyfills

If you want your custom elements to be able to work on older browsers, you should add the applyPolyfills() that surround the defineCustomElements() function.

import { applyPolyfills, defineCustomElements } from 'smartvideo/loader';
...
applyPolyfills().then(() => {
  defineCustomElements()
})

With this, you should be able to use the smartvideo component, but if you need further information you can check the Stencil Angular Documentation

React configuration

With an application built using the create-react-app script the easiest way to include the component library is to call defineCustomElements() from the index.js file. Note that in this scenario applyPolyfills is needed if you are targeting Edge or IE11.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { applyPolyfills, defineCustomElements } from 'smartvideo/loader';

// this should be in your application by default, depending in how the app was created
ReactDOM.render(<App />, document.getElementById('root'));

applyPolyfills().then(() => {
  defineCustomElements();
});

Vue configuration

In order to use the custom element library within the Vue app, the application must be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the main.js file.

Assuming you’ve run npm install --save smartvideo beforehand, and that smartvideo is the name of our made up Web Components that we have published to npm, you import the components into the 'main.js' file by

• importing the node module
• telling Vue to ignore the custom element tags (see docs)
• binding the Stenciljs component code to the window object

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from 'smartvideo/loader';

Vue.config.productionTip = false;

// Tell Vue to ignore all components defined in the smartvideo
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/test-\w*/];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App),
}).$mount('#app');

The components should then be available in any of the Vue components

Usage

To use the component anywhere in your application, it should be used as follows:

<smartvideo-app view="modal" app-mode="dialog"></smartvideo-app>

Props

• view: set the type of view for the application. Can be modal or main.

  • modal: the app is displayed in a modal.
  • main: the app is displayed in the same page.

• app-mode: set the app mode for the application. Can be dialog, room or url.

  • dialog: The params for initialization are passed in the dialog.
  • room: The params for initialization are passed in the component instance.
  • url: The params for initialization are passed by url.

Customization

To customize the theme of the application, you should create a theme.css file inside your project and reference it in the html. For example:

This file should contains the css vars used across the application. If any of the variables os not defined, it will use default color values:

• --sv-background-color: set the background color.

• --sv-button-background-color: set the button background color of the buttons.

• --sv-button-background-color-hover: set the button background color of the buttons when hovering.

• --sv-button-color: set the button font color of the buttons.

• --sv-font-color: set the font color.

• --sv-icon-color: set the icons color.

• --sv-input-background-color: set the input background color.

• --sv-input-color: set the input font color.

• --sv-logo-color: set the logo color.

• --sv-tooltip-background-color: set the tooltip background color.

• --sv-tooltip-color: set the tooltip font color.