Skip to content

openvidu-additional-panels#

Source code

The openvidu-additional-panels tutorial demonstrates how to add new panels to the videoconference, providing a more tailored user experience.

Adding new videoconference panels is made simple with the AdditionalPanelsDirective, which offers a straightforward way to replace and adapt the PanelComponent to your needs.

OpenVidu Components Angular

OpenVidu Components - Additional Panel

This tutorial combines the use of the ToolbarAdditionalPanelButtonsDirective and the AdditionalPanelsDirective to add new buttons to the toolbar and new panels to the videoconference. If you want to learn how to add new buttons to the toolbar, you can check the openvidu-toolbar-panel-buttons tutorial.

Running this tutorial#

1. Run OpenVidu Server#

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment

  2. Configure the local deployment

    cd openvidu-local-deployment/community
.\configure_lan_private_ip_windows.bat

    cd openvidu-local-deployment/community
./configure_lan_private_ip_macos.sh

    cd openvidu-local-deployment/community
./configure_lan_private_ip_linux.sh

  3. Run OpenVidu

    docker compose up

To use a production-ready OpenVidu deployment, visit the official deployment guide.

2. Download the tutorial code#

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git
git clone https://github.com/OpenVidu/openvidu-tutorials.git

3. Run the server application#

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node
  2. Install dependencies 
    npm install
  3. Run the application 
    npm start

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go
  2. Run the application 
    go run main.go

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby
  2. Install dependencies 
    bundle install
  3. Run the application 
    ruby app.rb

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java
  2. Run the application 
    mvn spring-boot:run

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python

  2. Create a python virtual environment

    python -m venv venv

  3. Activate the virtual environment

    .\venv\Scripts\activate

    . ./venv/bin/activate

    . ./venv/bin/activate

  4. Install dependencies

    pip install -r requirements.txt

  5. Run the application

    python app.py

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust
  2. Run the application 
    cargo run

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php
  2. Install dependencies 
    composer install
  3. Run the application 
    composer start

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet
  2. Run the application 
    dotnet run

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

4. Run the openvidu-additional-panels tutorial#

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-additional-panels

  2. Install the required dependencies:

      npm install

  3. Serve the application:

      npm start

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

Understanding the code#

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

  • main.ts: This file defines the root application component. It imports the OpenViduComponentsModule, where we configure the OpenVidu Components Angular library.
  • app/app.component.ts: This file defines the AppComponent, the primary and sole component of the application. It is responsible for requesting the OpenVidu token and passing it to the videoconference component, facilitating the connection to the OpenVidu Room.
  • styles.scss: This file defines the global styles of the application. Here, you can customize the UI of the OpenVidu Components Angular library.

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.

In your main.ts application file, import the it and configure it as follows:

// Other imports ...

import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';

const config: OpenViduComponentsConfig = {
    production: true,
};

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(
            OpenViduComponentsModule.forRoot(config)
            // Other imports ...
        ),
        provideAnimations(),
    ],
}).catch((err) => console.error(err));

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';

@Component({
  selector: 'app-root',
  template:`
    <!-- OpenVidu Video Conference Component -->
    <ov-videoconference
      [token]="token"
      [livekitUrl]="LIVEKIT_URL"
      (onTokenRequested)="onTokenRequested($event)"
    >
      <!-- Additional Toolbar Buttons -->
      <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
        <button mat-icon-button (click)="toggleMyPanel('my-panel1')">
          <mat-icon>360</mat-icon>
        </button>
        <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
          <mat-icon>star</mat-icon>
        </button>
      </div>

      <!-- Additional Panels -->
      <div *ovAdditionalPanels id="my-panels">
        @if (showExternalPanel) {
        <div id="my-panel1">
          <h2>NEW PANEL 1</h2>
          <p>This is my new additional panel</p>
        </div>
        } @if (showExternalPanel2) {
        <div id="my-panel2">
          <h2>NEW PANEL 2</h2>
          <p>This is another new panel</p>
        </div>
        }
      </div>
    </ov-videoconference>
  `,
  styles: [''],
  standalone: true,
  imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
})
export class AppComponent {
  // For local development, leave these variables empty
  // For production, configure them with correct URLs depending on your deployment

  APPLICATION_SERVER_URL = '';  // (1)!
  LIVEKIT_URL = ''; // (2)!

  // The name of the room to join.
  roomName = 'openvidu-additional-panels';  // (3)!

  // The token used to join the room.
  token!: string; // (4)!

  // Flags to control the visibility of external panels
  showExternalPanel: boolean = false; // (5)!
  showExternalPanel2: boolean = false; // (6)!

  constructor(private httpClient: HttpClient) {
    this.configureUrls();
  }

  private configureUrls() {
    // If APPLICATION_SERVER_URL is not configured, use default value from local development
    if (!this.APPLICATION_SERVER_URL) {
      if (window.location.hostname === 'localhost') {
        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
      } else {
        this.APPLICATION_SERVER_URL =
          'https://' + window.location.hostname + ':6443/';
      }
    }

    // If LIVEKIT_URL is not configured, use default value from local development
    if (!this.LIVEKIT_URL) {
      if (window.location.hostname === 'localhost') {
        this.LIVEKIT_URL = 'ws://localhost:7880/';
      } else {
        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
      }
    }
  }

  ngOnInit() {
    this.subscribeToPanelToggling(); // (7)!
  }

  // Requests a token to join the room with the given participant name.
  async onTokenRequested(participantName: string) { // (8)!
    const { token } = await this.getToken(this.roomName, participantName);
    this.token = token;
  }

  // Subscribe to panel toggling events
  subscribeToPanelToggling() {
    this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => { // (9)!
      this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';
      this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';
    });
  }

  // Toggle the visibility of external panels
  toggleMyPanel(type: string) { // (10)!
    this.panelService.togglePanel(type);
  }

  // Retrieves a token to join the room with the given name and participant name.
  getToken(roomName: string, participantName: string): Promise<any> { // (11)!
    // Requesting token to the server application
  }
}
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. showExternalPanel: Flag to control the visibility of the first external panel.
  6. showExternalPanel2: Flag to control the visibility of the second external panel.
  7. subscribeToPanelToggling method that subscribes to panel toggling events.
  8. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  9. panelService.panelStatusObs observable that listens to panel toggling events.
  10. toggleMyPanel method that toggles the visibility of external panels.
  11. getToken method that requests a token to the server application.

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

  • APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  • LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  • roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  • token: OpenVidu Token used to connect to the OpenVidu Room.
  • showExternalPanel: Flag to control the visibility of the first external panel.
  • showExternalPanel2: Flag to control the visibility of the second external panel.
  • subscribeToPanelToggling method that subscribes to panel toggling events.
  • onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  • panelService.panelStatusObs observable that listens to panel toggling events.
  • toggleMyPanel method that toggles the visibility of external panels.
  • getToken method that requests a token to the server application.

Configure the URLs

When running OpenVidu locally, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for other deployment type, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {
    --ov-primary-color: #303030; /* Primary interface color */
    --ov-secondary-color: #3e3f3f; /* Secondary interface color */
    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */
    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */
    --ov-light-color: #e6e6e6; /* Light color for elements */

    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */

    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */
    --ov-text-color: #ffffff; /* Default text color */

    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */
    --ov-panel-background: #ffffff; /* Background color for panels */

    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */
    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */
    --ov-video-radius: 5px; /* Border-radius for video elements */
    --ov-panel-radius: 5px; /* Border-radius for panel elements */
}

Adding new panels#

The *ovPanel directive is used to replace the default videoconference panels with a custom ones. In the app.component.ts file, you can see the following code snippet:

@Component({
    selector: 'app-root',
    template: `
        <!-- OpenVidu Video Conference Component -->
        <ov-videoconference
            [token]="token"
            [livekitUrl]="LIVEKIT_URL"
            [toolbarDisplayRoomName]="false"
            (onTokenRequested)="onTokenRequested($event)"
        >
            <!-- Additional Toolbar Buttons -->
            <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
                <button mat-icon-button (click)="toggleMyPanel('my-panel1')">
                    <mat-icon>360</mat-icon>
                </button>
                <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
                    <mat-icon>star</mat-icon>
                </button>
            </div>

            <!-- Additional Panels -->
            <div *ovAdditionalPanels id="my-panels">
                @if (showExternalPanel) {
                <div id="my-panel1">
                    <h2>NEW PANEL 1</h2>
                    <p>This is my new additional panel</p>
                </div>
                } @if (showExternalPanel2) {
                <div id="my-panel2">
                    <h2>NEW PANEL 2</h2>
                    <p>This is another new panel</p>
                </div>
                }
            </div>
        </ov-videoconference>
    `,
    styles: [''],
    standalone: true,
    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],
})
export class AppComponent {
    // ...
}

In this code snippet, the *ovToolbarAdditionalPanelButtons directive is used to add new buttons to the toolbar and the *ovAdditionalPanels directive is used to add new panels to the videoconference.

When the user clicks on the buttons, the toggleMyPanel method is called to toggle the visibility of the new panels. These new panels are handled by the showExternalPanel and showExternalPanel2 flags.