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).

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

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.

• 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

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.

You are ready. Use it in your template:

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

Note: openvidu is a selector for the OpenViduHangoutsComponent.

For more info checkout the OpenViduHangoutsComponent documentation

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

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

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.

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

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

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

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

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:

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

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

To test the component run:

$ npm run test

You can find it here.

Add this into the polyfills.ts file:

(window as any).global = window;

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.

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.

Open an issue on the AngularOpenVidu issue tracker.

Apache Software License 2.0 ©