The openvidu-custom-participants-panel tutorial shows how to replace the default participants panel, injecting our own with the aim of adapting the app to our needs.
Understanding the code 🔗
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
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
*ovParticipantsPanel. You can see how the
ParticipantsPanelDirective 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-custom-participants-panel 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.