angular-openvidu

AngularOpenVidu is a room videoconference component library for Angular.

It's written in TypeScript, with the guidelines from Angular Components.

To be able to work in the browser, AngularOpenVidu uses openvidu-browser to communicate with the OpenVidu Server.

To use AngularOpenVidu, WebRTC support is required (Chrome, Firefox, Opera).

Table of contents

• App Demo
• Features
• Installation
• Usage
• Structure
  • Component Tree
  • File Structure
• API
  • OpenViduDirective
  • OpenViduHangoutsComponent
  • OpenViduAppearinComponent
  • OpenViduGoToMeetingComponent
• Development
  • Dependencies
  • CSS
  • Tests
• Changelog
• Troubleshooting
• License

App Demo

In this demo you will see a use case of angular-openvidu, where you can test ALL the features included in this component.

Follow the instructions from the app's README to test it out.

Features

• Join a group call
• Close group call
• Disable camera
• Mute microphone
• Toggle fullscreen video
• Send messages to the participants of the call
• Create your own layout
• i18n - Localize labels and messages

Installation

1. Install angular-openvidu node module through npm:

   $ npm install angular-openvidu --save

2. Also install HammerJS node module (is a dependency of AngularMaterial):

   $ npm install @angular/material @angular/cdk @angular/animations hammerjs --save

3. Import OpenViduModule and hammerjs to your AppModule

   import { NgModule } from '@angular/core';
   import { BrowserModule  } from '@angular/platform-browser';
   import { FormsModule } from "@angular/forms";
   import { AppComponent } from './app.component';
   
   import { OpenViduModule } from 'angular-openvidu';
   import 'hammerjs';
   
   @NgModule({
     imports: [ BrowserModule, FormsModule, OpenViduModule ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
   })
   export class AppModule { }

   You may also find it useful to view the demo source.

4. Deploy OpenVidu Server

   You will need an OpenVidu Server.

   Follow the instructions in this page to deploy it with docker.

Usage

You are ready. Use it in your template:

<openvidu [wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId">
	Loading openvidu...
</openvidu>

Name	Type	Optional	Description
wsUrl	String	required	Websocket URL pointing to your OpenVidu Server
sessionId	String	required	An id for the session you want to join to
participantId	String	required	An id for the current participant joining the session

Note: openvidu is a selector for the OpenViduHangoutsComponent.

For more info checkout the OpenViduHangoutsComponent documentation

Structure

Component Tree

Below outlines a tree of how the components are arranged in the Angular component tree.

File Structure

The folder structure is aimed to encapsulate components into their own modules. In each component folder, it contains all the html, css, js for that component.

└── src
    ├── openvidu-template		-- root		directive with all the OpenVidu logic
    ├── openvidu-hangouts		-- root		component with a predefined layout for Hangouts
    │   └── stream-hangouts		-- stream	component for the Hangouts layout
    ├── openvidu-appearin		-- root		component with a predefined layout for AppearIn
    │   └── stream-appearin		-- stream	component for the AppearIn layout
    └── openvidu-gotomeeting	-- root		component with a predefined layout for GoToMeeting
        └── stream-gotomeeting	-- stream	component for the GoToMeeting layout

API

AngularOpenVidu has multiple predefined layouts that you can use out-of-the-box. But it also has a directive to let you build your own layout.

OpenViduDirective

The OpenViduDirective is used to build components for controlling your video chat instance. The directive selector is openvidu-template, either as an element or an attribute. It exports an API named openviduApi, which can then be used to build the video chat component.

Click here to see the documentation

OpenViduHangoutsComponent

This is the default component for creating a video chat.

It is implemented on top of the OpenViduDirective, and has a pre-set template and styles based on Google Hangouts. If you require a more customised video chat, you will need to use the OpenViduDirective and implement your own component.

Click here to see the documentation

OpenViduAppearinComponent

It is implemented on top of the OpenViduDirective, and has a pre-set template and styles based on AppearIn. If you require a more customised video chat, you will need to use the OpenViduDirective and implement your own component.

Click here to see the documentation

OpenViduGoToMeetingComponent

This is the default component for creating a video chat.

It is implemented on top of the OpenViduDirective, and has a pre-set template and styles based on GoToMeeting. If you require a more customised video chat, you will need to use the OpenViduDirective and implement your own component.

Click here to see the documentation

Development

To compile, just run:

$ npm run build

Then, you will see the module compiled in the /dist folder.

Things you need to know before contributing to this project:

1. Dependencies

These are the main modules that make up AngularOpenVidu:

Module	Version	Description
OpenVidu Browser		used to communicate with the OpenVidu Server
Angular Material		used to display the toolbar, buttons and animations
Angular BigScreen		used to toggle the fullscreen mode of the streaming
Split View		used to divide the screen in some predefined components

2. CSS

The CSS stylesheet is compiled from the SASS files with a custom gulp file

To build the SASS files just run:

$ gulp css

If you want to build the SASS files automatically every time there is a change, then run:

$ gulp watch

3. Tests

To test the component run:

$ npm run test

Changelog

You can find it here.

Troubleshooting

Why I get the error "global is not defined"?

Add this into the polyfills.ts file:

(window as any).global = window;

Why does it keep saying "Connecting..."?

You may be having some trouble connecting to the OpenVidu Server's websocket.

To make sure you are accepting its certificate go to:

• [IP]: Openvidu Server IP
• [PORT]: Openvidu Server port

https://[IP]:[PORT]/room

And make sure to accept its certificate. Then go back to the app and refresh the page.

Why does it keep saying "Joining room..." or "Loading camera..."?

If you are accessing the app through a host different from localhost then you need to enable HTTPS.

At least in Google Chrome, this is because: Any website which has integrated geolocation technology, screen-sharing, WebRTC and more, will now be required to be served from a secure (HTTPS) site.

You could use ngrok to make an SSL tunnel to your computer. Or you could create a self-signed certificate, but don't use it in production.

Create an SSL key:

• [SSL_KEY_PATH]: your SSL key path
• [SSL_CERT_PATH]: your SSL cert path

$ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout "[SSL_KEY_PATH]" -out "[SSL_CERT_PATH]"

To enable HTTPS just run angular-cli with this command:

$ ng serve --ssl true --ssl-key "[SSL_KEY_PATH]" --ssl-cert "[SSL_CERT_PATH]" --host=0.0.0.0

Since you are not using localhost, you need host=0.0.0.0 to listen for all IPs; you can change it to listen only for the IPs needed.

Got more questions?

Open an issue on the AngularOpenVidu issue tracker.

License

Apache Software License 2.0 ©