openvidu-library-angular 🔗

Check it on GitHub

OpenVidu Library Angular is one of the simplest and quickest tutorials, developed in Angular 9, to add videoconference capabilities to your existing web application. This tutorial uses openvidu-angular library.

Running this tutorial 🔗

1) Clone the repo:

git clone https://github.com/OpenVidu/openvidu-tutorials.git

2) You will need angular-cli (and of course NPM) to serve the Angular frontend. You can install it with the following command:

npm install -g @angular/cli@latest

3) Run the tutorial:

cd openvidu-tutorials/openvidu-library-angular
npm install
ng serve

4) OpenVidu Platform service must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need Docker CE):

# WARNING: this container is not suitable for production deployments of OpenVidu Platform
# Visit https://docs.openvidu.io/en/stable/deployment

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.16.0

5) Go to localhost:4200 to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of openvidu-server when you first try to join a video-call.

If you are using Windows, read this FAQ to properly run the tutorial

To learn some tips to develop with OpenVidu, check this FAQ

Understanding the code 🔗

This is a basic Angular project generated with angular-cli tool, and therefore you will see lots of configuration files and other stuff that doesn't really matter to us. We will focus on the following files under src/app/ folder

  • app.component.ts: defines AppComponent, main component of the app. It contains the functionalities for for handling the the events received from openvidu-angular.
  • app.component.html: HTML for AppComponent.
  • app.component.css: CSS for AppComponent.

We must include these elements: 🔗

1) First of all, obviously you have to install openvidu-angular:

npm install openvidu-angular --save

2) Angular Material is included in openvidu-angular neverthelesst you need to include a theme style in your application. If you're using the Angular CLI, you can add this to your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

3) Finally, you need to include Jquery script, the global variable and Material icons font in the index.html file:

<head>
<!--... other imports ...-->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>
      var global = global || window;
  </script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

app.module.ts 🔗

Inside of the app.module.ts you must import OpenviduSessionModule from openvidu-angular:

import { OpenviduSessionModule } from 'openvidu-angular';

Moreover, you need to include OpenviduSessionModule inside of imports section of NgModule:

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FormsModule,
    OpenviduSessionModule
  ]

Configuring OpenVidu Angular 🔗

app.component.html 🔗

As you can see here, you can use <opv-session></opv-session> component to embed openvidu session in your application in a very easy way. Our component will start hidden:

<div *ngIf="!session" id="join">
  <div id="join-dialog">
    <h1>Join a video session</h1>
    <form (submit)="joinSession()">
      <p>
        <label>Participant </label>
        <input type="text" id="userName" name="userName" [(ngModel)]="myUserName" required>
      </p>
      <p>
        <label>Session </label>
        <input type="text" id="sessionId" name="sessionId" [(ngModel)]="mySessionId" required>
      </p>
      <p class="text-center">
        <input type="submit" name="commit" value="Join!">
      </p>
    </form>
  </div>
</div>

<div *ngIf="session" id="session">
    <opv-session></opv-session>
</div>
app.component.ts 🔗

Method joinSession() gets the tokens which we provide to our component to connect to the session.

You can configure the opv-session with these parameters:

  • sessionName: the session name that will be displayed inside the component
  • user: the nickname that the user will have in the session
  • tokens: the retrieved token from OpenVidu Server
  • ovSettings: the configuration that the user want to have on the session
<opv-session
  [sessionName]="mySessionId"
  [user]="myUserName"
  [token]="tokens"
  [ovSettings]="ovSettings"
  (sessionCreated)="handlerSessionCreatedEvent($event)"
  (publisherCreated)="handlerPublisherCreatedEvent($event)"
  (error)="handlerErrorEvent($event)">
</opv-session>

The token must has inside of an array. If you want that the app allows the screen sharing you must include two differents tokens in the array. If you only add one, the app doesn't allow the screen sharing funcionality.

Moreover, opv-session emits events sessionCreated, publisherCreated and error, we can handle them with the next code in app.component.ts file:

  handlerSessionCreatedEvent(session: Session): void {
    // Do something
  }

  handlerPublisherCreatedEvent(publisher: Publisher): void {
    // Do something
  }

  handlerErrorEvent(event): void {
    // Do something
  }

Now, we will be able to use session and publisher in the same way as if we used openvidu-browser directly, and of course use openvidu-browser API

NOTE: New event names and properties have been defined (sessionCreated , publisherCreated previous ones are still available (joinSession and leaveSession) but deprecated.

In addiction, openvidu-library-angular allows you to have access to specifics internals variables such as OpenVidu Layout, Local User or Remotes User.

You can access to them through the following way:

1) You must assign a referece to the opv-session, inside of app.component.html with #ovSessionComponent:

<opv-session
  #ovSessionComponent
  [sessionName]="mySessionId"
  [user]="myUserName"
  [tokens]="tokens"
  [ovSettings]="ovSettings"
  (sessionCreated)="handlerSessionCreatedEvent($event)"
  (publisherCreated)="handlerPublisherCreatedEvent($event)"
  (error)="handlerErrorEvent($event)">
</opv-session>

2) You have to declare the openvidu component variable in app.component.ts:

@ViewChild('ovSessionComponent')
public ovSessionComponent: OpenviduSessionComponent;

3) After that, ovSessionComponent will provides us some methods to get the internal variables we need. These methods are:

  • (Deprecated method, use sessionCreated event instead) getSession: This method will provide you the Session. Check the Session documentation here
  • getLocalUser: This method will provide you the User. You can check the documentation about the User Class here
  • getOpenviduLayout: This method will return the OpenVidu Layout Object. You can check the information about the OpenVidu Layout Class here
  • getOpenviduLayoutOptions: This method will return the layout options. Click here to more information.
myMethod() {
  this.ovSession = this.ovSessionComponent.getSession();
  this.ovLocalUser = this.ovSessionComponent.getLocalUser();
  this.ovLayout = this.ovSessionComponent.getOpenviduLayout();
  this.ovLayoutOptions = this.ovSessionComponent.getOpenviduLayoutOptions();
}

We are invoking myMethod inside of handlerJoinSessionEvent.

4) Last but not least, you must establish the local variables like this:

import {OpenviduSessionComponent, StreamEvent, Session, Publisher, UserModel, OpenViduLayout, OpenViduLayoutOptions, OvSettingsModel} from 'openvidu-angular';

ovRemotesArray: UserModel[];
ovLocalUser: UserModel;
ovLayout: OpenViduLayout;
ovLayoutOptions: OpenViduLayoutOptions;
ovSettings: OvSettings;

Moreover, if you want to customize the interface of opv-session-component you can provide a parameter ovSettings to the component. Further details on this topic here.

And initializate it with the config properties:

this.ovSettings = {
  chat: false,
  autopublish: true,
  toolbarButtons: {
    audio: true,
    video: true,
    screenShare: true,
    fullscreen: true,
    layoutSpeaking: true,
    exit: true,
  }
};

Get a token from OpenVidu Server 🔗

WARNING: This makes this tutorial an insecure application. We need to ask OpenVidu Server for a user token in order to connect to our session. This process should entirely take place in our server-side, not in our client-side. But due to the lack of an application backend in this tutorial, the JavaScript code itself will perform the POST operations to OpenVidu Server 
this.getToken().then((token) => {
    // Save the 'token' in token variable
});

In a production environment we would perform this operations in our application backend, by making use of the REST API, OpenVidu Java Client or OpenVidu Node Client. Here we have implemented the POST requests to OpenVidu Server in a method getToken() that returns a Promise with the token. Without going into too much detail, this method performs two ajax requests to OpenVidu Server, passing OpenVidu Server secret to authenticate them:

  • First ajax request performs a POST to /openvidu/api/sessions (we send a customSessionId field to name the session with our sessionName value retrieved from HTML input)
  • Second ajax request performs a POST to /openvidu/api/sessions/<sessionId>/connection (the path requires the sessionId to assign the token to this same session)

You can inspect this method in detail in the GitHub repo.

Extra features of OpenVidu Angular 🔗

Alternatives to connect to OpenVidu Angular 🔗

In the example above, opv-session receives the sessionName, the user and the tokens parameters. If you want to let the opv-session get the tokens for you, you can just dispense with the tokens and provide two more attributes to it. This is only meant for developing purposes, as you need to hardcode the secret of your OpenVidu Server in the typescript code:

<opv-session [sessionName]="mySessionId" [user]="myUserName" [openviduServerUrl]="'https://localhost:4443'" [openviduSecret]="'MY_SECRET'"></opv-session>

OpenVidu Angular allows you to replace the default static resources (icons and images). You only have to go to src/assets/images/ and add your custom images files with the following names:

  • openvidu_globe.png: The application icon.
  • openvidu_logo.png: The application logo.
  • poster.png: The application image which will appear when a participant has the video muted.