openvidu-library-angular

Check it on GitHub

OpenVidu Library Angular is one of the simplest and quickest tutorials 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@6.2.4

3) Run the tutorial:

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

4) openvidu-server and Kurento Media Server 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):

docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.6.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 four elements:

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

npm install openvidu-angular --save

2) You also need to install openvidu-browser

npm install openvidu-browser --save

3) Angular Material must be included in your project

4) Finally, you need to include the Global variable script and Jquery in 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>
</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,
    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 token 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
  • token: the retrieved token from OpenVidu Server
<opv-session
  [sessionName]="mySessionId"
  [user]="myUserName"
  [token]="token"
  (leaveSession)="handlerLeaveSessionEvent($event)"
  (joinSession)="handlerJoinSessionEvent($event)"
  (error)="handlerErrorEvent($event)">
</opv-session>

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

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

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

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

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 API REST, 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 /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 /api/tokens (we send a session field 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 token parameters. If you want to let the opv-session get the token for you, you can just dispense with the token 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>