openvidu-toolbar-buttons 🔗

Check it on GitHub

The openvidu-toolbar-buttons tutorial shows how to add new additional buttons to the default toolbar.

This customization is possible thanks to the ToolbarAdditionalButtonsDirective, which provides us a simple way to customizing the ToolbarComponent.

Understanding the code 🔗

openvidu-toolbar-buttons is not production ready videconference app because it's using an insecure communication for requesting the token to OpenVidu Server. We highly recommend do this in the backend side.

This is an 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.module.ts: Define the AppComponent module where we import and configure the openvidu-angular library.
  • app.component.ts: defines AppComponent, main component of the app. It contains the functionalities for requesting the OpenVidu token for setting them up to the videoconference component and start the session.
  • app.component.html: HTML for AppComponent.

Configure openvidu-angular 🔗

First, we need to install the openvidu-angular library. You can check how to do that here.


The VideoconferenceComponent needs the tokens for connecting to the session. We will requesting them when the users clicks on the joinButton so we call to onJoinButtonClicked method when this is happening. After requesting the token, the VideoconferenceComponent will use them for connecting to the session.

<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
  ...
</ov-videoconference>

Inside of the ov-videoconference component, we will add the custom template tagged with the *ovToolbarAdditionalButtons. You can see how the ToolbarAdditionalButtonsDirective works here.

Running this tutorial 🔗

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

npm -v
ng v

2) Clone the repo:

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

3) Run the tutorial:

cd openvidu-tutorials/openvidu-components/openvidu-toolbar-button
npm install
ng serve

4) OpenVidu 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):

# 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.22.0

5) Go to http://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