openvidu-toggle-hand#
The openvidu-toggle-hand tutorial demonstrates how to add a toggle hand feature to the OpenVidu Components Angular library.
The toggle hand feature allows participants to raise and lower their hand during a videoconference. This feature is useful for participants to signal that they want to speak or ask a question.
This tutorial combines the use of the ToolbarAdditionalButtonsDirective, the StreamDirective and the ParticipantsPanelItemElementsDirective to create a custom toolbar button, a custom stream component element and a custom participant panel item element. Check the openvidu-toolbar-buttons and the openvidu-custom-stream tutorials documentation for learning more about these directives.
Running this tutorial#
1. Run OpenVidu Server#
-
Download OpenVidu
-
Configure the local deployment
-
Run OpenVidu
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 -b 3.0.0-beta3
git clone https://github.com/OpenVidu/openvidu-tutorials.git -b 3.0.0-beta3
3. Run the server application#
To run this server application, you need Node installed on your device.
- Navigate into the server directory
- Install dependencies
- Run the application
To run this server application, you need Go installed on your device.
- Navigate into the server directory
- Run the application
To run this server application, you need Ruby installed on your device.
- Navigate into the server directory
- Install dependencies
- Run the application
To run this server application, you need Java and Maven installed on your device.
- Navigate into the server directory
- Run the application
To run this server application, you need Python 3 installed on your device.
-
Navigate into the server directory
-
Create a python virtual environment
-
Activate the virtual environment
-
Install dependencies
-
Run the application
To run this server application, you need Rust installed on your device.
- Navigate into the server directory
- Run the application
To run this server application, you need PHP and Composer installed on your device.
- Navigate into the server directory
- Install dependencies
- Run the application
To run this server application, you need .NET installed on your device.
- Navigate into the server directory
- Run the application
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-toggle-hand tutorial#
To run the client application tutorial, you need Node installed on your development computer.
-
Navigate into the application client directory:
-
Install the required dependencies:
-
Serve the application:
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 theOpenViduComponentsModule
, 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. -
app/models/participant-app.model.ts
: Contains theParticipantAppModel
class that extends theParticipantModel
class to add the ability to raise and lower the hand.
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:
-
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:
Replace
your-project-name
with the desired name for your project. -
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:
-
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:
-
Import and use OpenVidu Components Angular
To use OpenVidu Components Angular in your application, you need to:
- Import the
OpenViduComponentsModule
in your Angular application. - Configure the module with the
OpenViduComponentsConfig
object. - Add the component to your template file.
- Assign the OpenVidu token and LiveKit URL to the component.
- Customize the appearance of the components using CSS variables.
- Import the
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 {
ParticipantModel,
ParticipantService,
OpenViduComponentsModule
} from 'openvidu-components-angular';
enum DataTopicApp {
HAND_TOGGLE = 'handToggle'
}
@Component({
selector: 'app-root',
template:`
<!-- OpenVidu Video Conference Component -->
<ov-videoconference
[prejoin]="true"
[token]="token"
[livekitUrl]="LIVEKIT_URL"
(onTokenRequested)="onTokenRequested($event)"
(onRoomCreated)="handleRemoteHand($event)"
>
<div *ovToolbarAdditionalButtons>
<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
<mat-icon matTooltip="Toggle hand">front_hand</mat-icon>
</button>
</div>
<div *ovStream="let track" style="height: 100%">
<ov-stream [track]="track"></ov-stream>
@if (track.participant.hasHandRaised) {
<mat-icon @inOutHandAnimation id="hand-notification">front_hand</mat-icon>
}
</div>
<div *ovParticipantPanelItemElements="let participant">
@if (participant.hasHandRaised) {
<mat-icon>front_hand</mat-icon>
}
</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-toggle-hand'; // (3)!
// The token used to join the room.
token!: string; // (4)!
// Whether the local participant has raised their hand.
hasHandRaised: boolean = false; // (5)!
constructor(private httpClient: HttpClient, private participantService: ParticipantService) {
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/';
}
}
}
// Requests a token to join the room with the given participant name.
async onTokenRequested(participantName: string) { // (6)!
const { token } = await this.getToken(this.roomName, participantName);
this.token = token;
}
// Handles the reception of a remote hand-raising event.
handleRemoteHand(room: Room) { // (7)!
// Subscribe to hand toggling events from other participants
room.on(RoomEvent.DataReceived, (payload: Uint8Array, participant?: RemoteParticipant, _?: DataPacket_Kind, topic?: string) => { // (8)!
if (topic === DataTopicApp.HAND_TOGGLE) {
const p = this.participantService.getRemoteParticipantBySid(participant.sid); // (9)!
if (p) {
(<ParticipantAppModel>p).toggleHandRaised(); // (10)!
}
this.participantService.updateRemoteParticipants(); // (11)!
}
});
}
// Handles the local hand-raising event.
async handleLocalHand() { // (12)!
// Get local participant with ParticipantService
const participant = <ParticipantAppModel>this.participantService.getLocalParticipant(); // (13)!
// Toggle the participant hand with the method we wil add in our ParticipantAppModel
participant.toggleHandRaised(); // (14)!
// Refresh the local participant object for others component and services
this.participantService.updateLocalParticipant(); // (15)!
// Send a signal with the new value to others participant using the openvidu-browser signal
const strData = JSON.stringify({});
const data: Uint8Array = new TextEncoder().encode(strData);
const options: DataPublishOptions = { topic: DataTopicApp.HAND_TOGGLE };
await this.participantService.publishData(data, options); // (16)!
}
// Retrieves a token to join the room with the given name and participant name.
getToken(roomName: string, participantName: string): Promise<any> { // (17)!
// Requesting token to the server application
}
}
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.hasHandRaised
: Boolean that indicates if the local participant has raised their hand.onTokenRequested
method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.handleRemoteHand
method that handles the reception of a remoteHAND_TOGGLE
event.on
method that subscribes to theDataReceived
event to handle the reception of a remoteHAND_TOGGLE
event.getRemoteParticipantBySid
method that retrieves a remote participant by its unique ID.toggleHandRaised
method that toggles the hand raising status of a remote participant.updateRemoteParticipants
method that updates the list of remote participants.handleLocalHand
method that handles the localHAND_TOGGLE
event.getLocalParticipant
method that retrieves the local participant.toggleHandRaised
method that toggles the hand raising status of the local participant.updateLocalParticipant
method that updates the local participant.publishData
method that sends a signal to other participants.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.hasHandRaised
: Boolean that indicates if the local participant has raised their hand.onTokenRequested
method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.handleRemoteHand
method that handles the reception of a remoteHAND_TOGGLE
event.on
method that subscribes to theDataReceived
event to handle the reception of a remoteHAND_TOGGLE
event.getRemoteParticipantBySid
method that retrieves a remote participant by its unique ID.toggleHandRaised
method that toggles the hand raising status of a remote participant.updateRemoteParticipants
method that updates the list of remote participants.handleLocalHand
method that handles the localHAND_TOGGLE
event.getLocalParticipant
method that retrieves the local participant.toggleHandRaised
method that toggles the hand raising status of the local participant.updateLocalParticipant
method that updates the local participant.publishData
method that sends a signal to other participants.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 ParticipantAppModel
class extends the ParticipantModel
class to add the ability to raise and lower the hand.
import { ParticipantModel, ParticipantProperties } from 'openvidu-components-angular';
// Represents a participant in the application, with the ability to raise their hand.
export class ParticipantAppModel extends ParticipantModel {
// Indicates whether the participant has raised their hand.
hasHandRaised: boolean;
// Creates a new instance of ParticipantAppModel.
constructor(props: ParticipantProperties) {
super(props);
this.hasHandRaised = false;
}
// Toggles the participant's hand raised status.
toggleHandRaised() {
this.hasHandRaised = !this.hasHandRaised;
}
}
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 */
}