openvidu-custom-participant-panel-item-elements 🔗

Check it on GitHub

The openvidu-custom-participant-panel-item-elements tutorial demonstrates how to replace the default participants panel item elements with custom ones.

This customization is possible thanks to the ParticipantsPanelItemElementsDirective, which provides us a simple way to customize the ParticipantsPanelItemComponent.


Running this tutorial 🔗

To run the tutorial you need the three components stated in OpenVidu application architecture: an OpenVidu deployment, your server application and your client application. In this order:

1. Run OpenVidu deployment 🔗

Using Docker Engine:

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

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.23.0

2. Run your preferred server application sample 🔗

For more information visit Application server.

3. Run the client application tutorial 🔗

You need NPM and Angular CLI to serve the application. Check them with the following command:

npm -v
ng v

To serve the tutorial:

# Using the same repository openvidu-tutorials from step 2

cd openvidu-tutorials/openvidu-components/openvidu-custom-participant-panel-item-elements
npm install
ng serve

Go to http://localhost:4200 to test the app once the server is running.

To test the application with other devices in your network, visit this FAQ


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 src/app/ folder:

  • app.module.ts: defines the AppComponent module where we import and configure the openvidu-angular library.
  • app.component.ts: defines AppComponent, main component of the app. It handles the request of OpenVidu tokens to pass them to the videoconference component, so it is able to connect to the OpenVidu session.

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

The VideoconferenceComponent needs the OpenVidu tokens to connect to the session. We request them on ngOnInit method. The VideoconferenceComponent will automatically use them to connect to the session when available.

<ov-videoconference
  *ngIf="connected"
  [tokens]="tokens"
  [toolbarDisplaySessionName]="false">
  <div *ovParticipantPanelItemElements="let participant">
    <button *ngIf="participant.local" (click)="leaveSession()">
      Leave
    </button>
  </div>
</ov-videoconference>
<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>

Inside of the ov-videoconference component we add the custom template tagged with the *ovParticipantPanelItemElements directive. You can see how the ParticipantPanelItemElementsDirective works here.

In this case, we simply add a custom button to the local participant item element that allows us to leave the session. We don't change the behavior of the remote participant item elements.

app.component.ts declares the following properties and methods:

APPLICATION_SERVER_URL = 'http://localhost:5000/';

sessionId = "participants-panel-directive-example";
tokens!: TokenModel;

connected = true;

constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }

async ngOnInit() {
  this.tokens = {
    webcam: await this.getToken(),
    screen: await this.getToken(),
  };
}

leaveSession() {
  this.openviduService.disconnect();
  this.connected = false;
}

getToken() {
  // Requesting tokens to the server application
}

Where:

  • APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  • sessionId: OpenVidu Session identifier. This is the session where the VideoconferenceComponent will connect to.
  • tokens: object where OpenVidu Tokens are stored. The VideoconferenceComponent uses this object to connect to the session.
  • connected: boolean flag that indicates if the local user is connected to the OpenVidu Session or not.
  • constructor method with dependency injection.
  • ngOnInit method where OpenVidu Tokens are requested.
  • leaveSession method that disconnects the local user from the OpenVidu Session. It is called when the user clicks on our custom Leave button.