angular-openvidu

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
• Development
• 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.

Link to the repository: https://github.com/alxhotel/angular-openvidu-demo

Features

• Join a group call
• Close group call
• Disable camera
• Mute microphone
• Toggle fullscreen video

Installation

1. Install angular-openvidu node module through npm:

   $ npm install angular-openvidu --save
   

2. Import OpenViduModule to your AppModule

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

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

3. Add hammer.js in your html:

   <script src="../node_modules/hammerjs/hammer.js"></script>
   

4. Deploy OpenVidu Server

   You will need a 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>

Propeties

Name	Type	Description
wsUrl	String, required	Websocket URL pointing to your OpenVidu Server
sessionId	String, required	An id for a session
participantId	String, required	An id for the participant joining the session

Events

This events are coming from openvidu-browser, AngularOpenVidu uses them to implement the logic.

These are the events AngularOpenVidu exposes for the user of the module.

To use them just do:

<openvidu (eventName)="myEventHandler()">
	Loading openvidu...
</openvidu>

Name	Params	Description
onRoomConnected	No params	triggers when the client has established a session with the server
onRoomClosed	No params	triggers when the room is closed
onLostConnection	No params	triggers when you can't establish a connection to the server
onParticipantJoined	({participantId: participantId})	triggers when a participant has joined your room
onParticipantLeft	({participantId: participantId})	triggers when a participant has left your room
onErrorMedia	({error: error})	triggers when an error occurs while trying to retrieve some media

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

2. CSS

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

Troubleshooting

Why does it keep saying "Joining room..."?

This can be for 2 reasons:

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

2. 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 ©