openvidu-library-angular 🔗
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 componentuser
: the nickname that the user will have in the sessiontokens
: the retrieved token from OpenVidu ServerovSettings
: 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
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 🔗
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 acustomSessionId
field to name the session with oursessionName
value retrieved from HTML input) - Second ajax request performs a POST to
/openvidu/api/sessions/<sessionId>/connection
(the path requires thesessionId
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>
Change the OpenVidu logo 🔗
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.