This section compares OpenVidu to other videoconference/streaming solutions, to better understand what it is, what it is not, and what advantages and disadvantages it may have over them.
First of all, and perhaps the most obvious question, how does OpenVidu differ from LiveKit, and what kind of relationship is there between them? This can be answer with four simple points:
-
-
OpenVidu is a fork of LiveKit. It is 100% compatible with LiveKit: any application built for LiveKit is compatible with OpenVidu.
-
OpenVidu is a superset of LiveKit. It provides all of the open source features of LiveKit and supports all of its SDKs, but it also extends LiveKit with extra features, APIs and internal enhancements, most notably integration with mediasoup.
-
OpenVidu is a production-ready self-hosted solution. It offers an easy deployment process to self-host a high performance, fault tolerant, scalable and observable cluster. OpenVidu provides an interactive installer that manages all of the complexities, so you can quickly host a production deployment that would otherwise require advanced devops/SRE expertise.
-
OpenVidu is a support team for self-hosted deployments. The OpenVidu team is made up of real-time experts with over a decade of experience in the field. We specialize in customer support and are always ready to help you bring your ideas to life.
-
-
-
-
-OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your cluster.
-
-
LiveKit Open Source is probably the most advanced and feature-rich open source WebRTC stack available today. It has a simple but very versatile API design, and has a large collection of SDKs to integrate into your application on both the frontend and backend. Regardless of your technology stack, there is sure to be a LiveKit Open Source SDK available for you! This is why OpenVidu is fully compatible with LiveKit protocols. You can use any LiveKit SDK to build your application, and it will work seamlessly with an OpenVidu deployment.
-
What does OpenVidu Community bring over LiveKit Open Source?
-
With OpenVidu Community you get a handful of features on top of LiveKit Open Source that will help with the development of your application:
-
-
Egress and Ingress services already integrated with a Redis instance: LiveKit allows you to export media from a Room (for example recording it) or import media into a Room (for example ingesting a video file), using Egress and Ingress services respectively. These modules are independent of LiveKit Server and must be correctly configured and connected via a shared Redis. When running OpenVidu Community you will have all these services properly integrated, so you can focus on developing your app without worrying about anything else.
-
S3 compatible storage for Egress recordings: OpenVidu Community comes with an S3 compatible storage already configured to store Egress recordings (Minio).
-
Administration dashboard to monitor your Rooms: OpenVidu comes with an administration dashboard that allows you to monitor the status of your Rooms. Not only in real time, but also historically: the number of participants, the number of published tracks, Egress and Ingress processes... This is a great tool to have when developing your app, as it can help spotting issues and debugging your application's logic. See more.
-
OpenVidu Call: a fully-fledged videoconference application that you can customize and adapt to your needs. See more.
-
Powerful and easy to use local development environment: OpenVidu provides a Docker Compose based deployment designed for development and testing devices on your local network. It comes with automatic certificate management that makes it easy to test mobile devices in your LAN. See more.
Deploying LiveKit Open Source in production requires devops/SRE experience to operate your own network of media servers, load balance between them, maintain high uptime and monitor the health of your deployment. OpenVidu Pro makes this an easy process, hiding most of the complexities of such an advanced deployment. With OpenVidu Pro you can self-host a fault-tolerant, scalable and observable cluster, while doubling the original LiveKit Open Source performance to handle twice as many media streams with the same hardware.
LiveKit Cloud is the official SaaS solution for LiveKit. They manage the infrastructure, with a pricing model based on the total bandwidth consumed by your application. It offers certain advantages over LiveKit Open Source:
-
-
Analytics and telemetry dashboard. LiveKit Open Source does not export any metrics or logs out-of-the-box.
-
Massive Rooms for livestreams, where a theoretically unlimited number of viewers can be established for published tracks. In LiveKit Open Source one Room must fit in a single server. LiveKit Cloud overcomes this limitation with a mesh architecture where one media server can connect to other media servers to distribute the load.
-
-
Where does OpenVidu Pro stand in relation to LiveKit Cloud? OpenVidu Pro aims to deliver the same advanced benefits as LiveKit Cloud, but as a self-hosted solution. We intend to provide a performant, fault tolerant, scalable and observable cluster that is easy to deploy, configure and administrate in your own infrastructure. For now, OpenVidu Pro brings:
-
-
OpenVidu Pro provides a complete observability stack with Grafana, Loki, Promtail and Mimir, as well as OpenVidu Dashboard to visualize the data. See more.
-
We are currently working on supporting the same scalability as LiveKit Cloud to support big videoconferences and massive live streams. See more.
The main difference between OpenVidu and these services is who owns the infrastructure, and where your users' data flows. All these SaaS solutions provide:
-
-
A public endpoint that your application connects to, so all media is routed through their servers.
-
Different sets of SDKs to integrate with your application. Some more complete than others, and maybe some low-code options.
-
A pricing model usually based on one of this two options: minutes-per-participant or total GBs of bandwidth consumed.
-
-
Using a SaaS provider is a great option for some use cases, but not all. OpenVidu is designed to be self-hosted. This allows you to have full control over your infrastructure and data, taking the most out of your own resources and complying with the most strict regulations. While having the best features provided by SaaS: scalability, fault tolerance, observability. See Production ready for more information.
These are all media servers. More specifically, they fall under the umbrella of the so-called SFUs (Selective Forwarding Units): they are able to receive media streams from different clients and selectively forward them to other clients, usually without transcoding or mixing the media.
-
SFUs are generally low-level tools. Using them directly to implement real-time applications requires a deep understanding of signaling protocols, codecs, networking and other low-level concepts. OpenVidu is a higher-level abstraction compared to SFUs. It internally uses SFUs to rely the media streams (more specifically Pion and mediasoup), but hides all complexities to offer a simpler way to develop videoconferencing and live streaming applications.
mediasoup is a WebRTC SFU. It is a minimalist media server with a super low level API that allows building custom real-time applications. Compared to other SFUs, mediasoup is well known for its outstanding performance.
-
OpenVidu uses mediasoup internally to transmit media streams. We have embedded mediasoup as the WebRTC engine right at the core of LiveKit Open Source, which allows OpenVidu to offer the fantastic APIs and SDKs of LiveKit while providing the cutting-edge performance of mediasoup. Learn more about mediasoup integration in section Performance.
All these well-known video conferencing tools are final applications that provide little to no customization at all. They are proprietary, closed-source apps designed to be used as-is, and they are not intended to be integrated into other systems.
-
OpenVidu is inherently different, as it provides a set of APIs and SDKs to integrate real-time video capabilities into your own application. In other words: with OpenVidu you can easily build your own custom Microsoft Teams, Google Meet or Zoom-like application. See Use cases for some examples of what you can build with OpenVidu.
This page is a collection of the most common operations you may want to perform in your application while integrating OpenVidu. Depending on the scope of the operation, these operations will be performed on the client side using a LiveKit Client SDK, or on the server side using a LiveKit Server SDK (or directly using the HTTP server API). Consider the architecture of an OpenVidu application:
-
-
-
-
You can use this page as a cheat sheet to know at a glance how to do something, and you have links to the LiveKit reference documentation of each operation for a more detailed explanation.
-
-
All client side operations are exemplified using the LiveKit JS Client SDK. For other client SDKs, refer to the corresponding LiveKit reference documentation.
The application client needs an access token to connect to a Room. This token must be generated by the application server. Visit LiveKit reference documentation to learn how to generate access tokens:
To connect to a Room you need the URL of your OpenVidu deployment (which is a WebSocket URL) and the access token generated by your application server.
You can directly publish the default camera and microphone of the device using methods setCameraEnabled and setMicrophoneEnabled of the LocalParticipant object:
-
// Publish a video track from the default camera
-awaitroom.localParticipant.setCameraEnabled(true);
-// Publish an audio track from the default microphone
-awaitroom.localParticipant.setMicrophoneEnabled(true);
-
-
It is also possible to publish both of them at the same time using method LocalParticipant.enableCameraAndMicrophone, which has the advantage of showing a single permission dialog to the user:
-
// Publish both default video and audio tracks triggering a single permission dialog
-awaitroom.localParticipant.enableCameraAndMicrophone();
-
-
To craft a custom Track, you can use the LocalParticipant.createTracks method and publish them with LocalParticipant.publishTrack:
The second boolean parameter indicates if the local Track should be stopped. This usually means freeing the device capturing it (switching off the camera LED, for example).
You can share information between Participants of a Room in different ways.
-
First of all, you can set Room metadata that will be available for all clients in the Room object. You do so in your application server when calling the CreateRoom API (available for all LiveKit Server SDKs and the HTTP Server API). The Room metadata will be available in the client side like this:
-
console.log(room.metadata);
-
-
You can update the Room metadata at any time from your application server with the UpdateRoomMetadata API (available for all LiveKit Server SDKs and the HTTP Server API). The client side will be notified of the change with the roomMetadataChanged event of the Room object:
Secondly, you can also set Participant metadata. You do so when creating an access token in your application server, setting metadata field of the JWT.
-
Participants can also update their own metadata from the client side, if their access token was created with grant canUpdateOwnMetadata.
The client side will be notified of the change with the participantMetadataChanged event of the Room and/or Participant object:
-
// To handle all metadata changes of all participants
-room.on(RoomEvent.ParticipantMetadataChanged,(previousMetadata:string,participant)=>{
-console.log('New metadata for participant',participant.identity,participant.metadata);
-});
-
-// To handle only metadata changes of a specific participant
-participant.on(ParticipantEvent.ParticipantMetadataChanged,(previousMetadata)=>{
-console.log('New metadata for participant',participant.identity,participant.metadata);
-});
-
The DataPublishOptions allow setting the reliability of the message (depending on the nature of the message it can be sent as a reliable or lossy message), a topic to easily filter messages, and the participants that will receive the message.
-
The client side will be notified of the message with the dataReceived event of the Room and/or Participant object:
-
// To receive all messages from the Room
-room.on(RoomEvent.DataReceived,(payload:Uint8Array,participant:Participant,kind:DataPacket_Kind)=>{
-conststrData=newTextDecoder().decode(payload);
-console.log('Received data from',participant.identity,strData);
-});
-
-// To receive messages only from a specific participant
-participant.on(ParticipantEvent.DataReceived,(payload:Uint8Array,kind:DataPacket_Kind)=>{
-conststrData=newTextDecoder().decode(payload);
-console.log('Received data from',participant.identity,strData);
-});
-
Except for the generation of access tokens, it is possible for all the logic of your application to be contained entirely on the client side. Nonetheless, some use cases may require the management of the Rooms from the server side.
-
These operations are only available in the server SDKs, and not in the client SDKs:
-
-
Closing a Room. From the client side, a user can only leave his own Room.
-
Removing any Participant from a Room. From the client side, a user can only leave his own Room.
-
Muting any Track of any Participant. From the client side, a user can only mute/unmute his own Tracks.
-
Updating the metadata of any Participant. From the client side, a user can only update his own metadata.
-
Updating the metadata of the Room. From the client side this is not possible.
-
Egress operations. Egress cannot be started and stopped on demand by users from the client side.
-
Ingress operations. Ingress cannot be started and stopped on demand by users from the client side.
-
-
You have here the complete list of the server-side operations, documented for the HTTP Server API. All the LiveKit Server SDKs have the same operations.
You can also create custom screen tracks, for example capturing the audio of the screen and fine-tuning the video capture options (checkout the ScreenTrackOptions interface for detailed information):
Your application server may receive webhooks coming from the OpenVidu deployment. These webhooks inform about events happening in the Rooms, including when a Room is created and finished, when a Participant joins and leaves a Room, when a Track is published and unpublished, and when Egress/Ingress operations take place in a Room.
2. Use LiveKit Server SDK in your application server#
-
OpenVidu is fully compatibly with LiveKit APIs. This means that any LiveKit Server SDK can be used in your application server.
-
The only mandatory task to perform in your application server is:
-
-
Creating access tokens. Your Participants will only be able to connect to your Rooms by using a valid access token. Visit the official documentation about Authentication to learn how to generate access tokens and which permissions you can assign to them.
-
-
There are also other optional tasks that you can perform from your application server, depending on your requirements:
-
-
Manage your Rooms and Participants: although most of your application logic will be in the frontend, you can also manage the logic of your Rooms and Participants from the security of your application backend. You can list, create, update and destroy Rooms and Participants. This is the official LiveKit documentation with all the available methods of the RoomServiceClient exposed by the Server API. These methods are also available in all LiveKit Server SDKs.
-
Manage Egress and Ingress: if your application needs some kind of recording, broadcasting or media ingestion, this operations must all be performed by your application server.
-
Receive Webhook events: you can also listen to Webhook events in your application backend. In this way you can react to events happening in your Rooms: a Room has started, a Room has finished, a Participant has joined a Room, a Track has been published... Visit the official documentation about Webhooks.
-
Publish Tracks from your backend: this is only for advanced applications that require server-side media publishing. Publishing media from your backend is possible by using LiveKit CLI, Python SDK, Go SDK, Node SDK or Rust SDK.
-
-
To get you started, here is a list of all available LiveKit Server SDKs and an application server tutorial using them. These tutorials are all set up to generate access tokens and receive webhook events, so they are perfect starting points for your application server.
There is no .NET SDK for LiveKit available. Visit the tutorial to learn how to create tokens and receive Webhook events directly from your .NET application server.
-
-
-
-
If your backend technology does not have its own SDK, you have two different options:
There are two main strategies to build the UI of your client application:
-
-
Use a high-level UI Components library: you can use Angular Components and React Components to quickly set up your UI with building blocks that manage the events and state of the Room for you.
-
Use a low-level client SDK: if you want extensive control and maximum flexibility when designing your UI, use any of the LiveKit Client SDKs.
-
-
The table below summarizes the key differences between these two strategies to help you make an informed decision:
-
-
-
-
-
UI Components
-
Low-level client SDKs
-
-
-
-
-
What is it?
-
Frontend libraries offering videoconferencing components to build your own application. There are Angular Components or React Components
-
Integrate OpenVidu from scratch in your web, mobile or desktop application using LiveKit Client SDKs
-
-
-
Pros
-
Very flexible components: adapt, extend or replace any component
Have your first version running in minutes, work on your customizations from there
Easily keep your client code up to date with the latest features
-
Unlimited level of customization: build your own UI from scratch as you please
Available for all client platforms: browsers, iOS, Android, Flutter, React Native, Unity...
-
-
-
Cons
-
Only available for Angular and React web apps
-
Higher complexity, although there are plenty of tutorials to smooth the learning curve
Whatever strategy you choose to build the UI of your application, most common steps to perform are:
-
-
Connect to a Room with an access token: the application client will connect to a Room with an access token generated by your application server. Once connected, the client becomes a Participant of the Room.
-
Publish Tracks to the Room: the application client may create Tracks of any kind (audio from the microphone, video from the camera device, screen sharing from an application...) and publish them to the Room.
-
Subscribe to Tracks from other Participants: the application client may receive the Tracks published by other Participants in the Room. It is possible to perform selective subscription, so the client can choose which Tracks to specifically subscribe to.
-
Mute and unmute Tracks: the application client may mute and unmute its own Tracks, and also may disable the reception of any Track published by other Participants.
-
-
Of course, depending on the use case, this may not be necessary for all users, or other additional steps may need to be taken. For example, in a live streaming application, only presenters will publish Tracks, while all other viewers will only subscribe to them. Or it is possible that users may need exchange messages through a chat. Each specific application will need to refine its use of the UI Components or client SDKs to meet its requirements.
-
Here is the list of all LiveKit Client SDKs: LiveKit Client SDKs. Below is a list of application client tutorials, which are perfect starting points for your client application.
You have different options to deploy OpenVidu in a production-ready environment, depending on the level of scalability, fault tolerance and observability you need. See Deployment types for more information.
OpenVidu is a platform that allows you to implement real-time applications. You can build your brand new OpenVidu app from scratch, but it is also very easy to integrate OpenVidu in your already existing application.
-
OpenVidu is based on WebRTC technology and allows developing any kind of use case you can imagine: one-to-one calls, video conference rooms, massive live streaming events, management and processing of drones and camera feeds...
-
OpenVidu is built on the best open source technologies: LiveKit, from which it inherits all its amazing SDKs to integrate it into your front-end and back-end applications, and mediasoup, from which it inherits the best performance and optimization for media routing.
-
-
-
-
-OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your self-hosted, production-grade cluster.
-
-
OpenVidu is a super versatile platform that can be used to build just about any kind of real-time application you can think of. Most common use cases can be classified into one of the following categories:
Video conferencing rooms are virtual spaces where two or more users can send video and audio and interact with each other in real-time. They can scale in size, from a simple 1-to-1 call to a massive video conference with thousands of participants. For example:
-
-
A 1-to-1 video-call center to attend your customers face to face.
-
An e-health application where doctors can treat their patients directly from it, in a private and secure manner using end-to-end encryption.
-
A banking application where customers may sign a contract, live and recording the call as proof of it.
-
A webinar platform where speakers can give their talks to large audiences, with the possibility of viewers temporarily turning their cameras to ask questions.
Live streaming applications allow one publisher to broadcast video to many viewers. It can be a single video feed, multiple video feeds (webcam and screen share) or there could be even multiple publishers. The general rule is that the ratio of viewers to publishers is very high, in the order of thousands.
-
Ultra-low latency live streaming (below 300ms) allows for actual real-time interaction between the viewers and the publishers. This differs from traditional live streaming platforms where the latency is usually in the order of seconds. In this way you can build applications like:
-
-
A TEDx-like application, where a speaker can give a talk to a massive audience of thousands of viewers, which may communicate through a chat. Real time subtitles and translations can be added to the stream.
-
An application to stream sport events, where viewers can switch between different cameras to watch the game from different angles to increase fan engagement.
-
A global live auction platform where the auctioneer can be seen by the bidders in real-time with sub-second latency all around the world.
The future lies in the integration of cameras and sensors in all kinds of devices, everywhere: industry, homes, public spaces, emergency services... OpenVidu can be used to receive and process video and audio streams from these devices, and doing so in real-time. For example:
-
-
A security system to receive the feed of IP cameras and sending an alert when detecting a person.
-
A drone control system to receive the video feed from each drone camera and securely record it. Any other sensor reading could also be sent to be synchronized later with the recorded video feed.
-
A real-time translation app that uses the latest AI models to provide high-quality translations of spoken language in real time.
Your OpenVidu deployment: provides all the necessary infrastructure for streaming real-time audio and video. It is built upon LiveKit server and mediasoup server. It can usually be treated as a black box in which its internal aspects are not important: you just deploy it and connect your application to it. It can be a single server or a cluster, deployed on premises or in your cloud provider.
-
Your Application client: runs in your user devices and interacts with the OpenVidu server through any LiveKit client SDK. As OpenVidu server is 100% compatible with LiveKit protocol, you can integrate any LiveKit client SDK in your Application client. Your users will join rooms as participants to send and receive real-time audio and video tracks. It needs a token generated by the Application server to join a room.
-
Your Application server: interacts with the OpenVidu deployment through any LiveKit server SDK. As OpenVidu server is 100% compatible with LiveKit protocol, you can integrate any LiveKit server SDK in your application server. At a minimum, it is responsible for the generation of tokens for the Application client to join a room. But you can implement your own business logic managing rooms, participants and tracks from the safety of your Application server.
A Room is a virtual space where Participants can connect to send and receive media Tracks. Two Participants can only communicate if they are connected to the same Room.
A Participant is a user connected to a specific Room. Each Participant can publish as many video and audio Tracks as needed, and subscribe to any other Participant's Tracks, as long as they are connected to the same Room.
A Track is a data flow of audio or video. Participants create them from a local media source (a webcam, a microphone, a screen share) and publish them into a Room. Other Participants of the same Room can subscribe to them.
-
With these three concepts you can build any kind of real-time application you can think of. The figure below shows two simple examples.
-
-
-
-
-
-Room "Daily meeting" has 2 Participants: "Alice" is publishing Track "Webcam" and "Mic" and is receiving Track "Screen" from "Bob". "Bob" is publishing Track "Screen" and receiving Tracks "Webcam" and "Mic" from "Alice".
-
-
-
-
-
-
-Room "Remote support" has 3 Participants: Participant "Dan" is not publishing any Track, but receiving all Tracks in the Room. Participant "Erin" is only receiving Track "Mic" from Participant "Carol", but not Track "Screen".
-
-
OpenViduCOMMUNITY: free to use. It is a single-server deployment and provides a custom LiveKit distribution with Egress, Ingress, S3 storage and monitoring. Ideal for development and testing, but also for medium-scale production deployments. You can host hundreds of simultaneous participants in your rooms by running OpenVidu Community in a sufficiently powerful server!
-
OpenViduPRO: OpenVidu commercial edition. It is a multi-server deployment with all the features of OpenVidu Community plus 2x performance, scalability, fault tolerance and improved monitoring and observability. Ideal for large-scale production deployments with heavy traffic that require the highest standards. You can start with OpenVidu Community and upgrade to OpenVidu Pro when needed.
For applications with dynamic user load that require scalability
-
For applications where both scalability and fault tolerance are critical
-
-
-
Features
-
Friendly Docker Compose setup with Redis, Egress, Ingress, S3 storage and observability. With automatic certificate management to test across devices in your network
-
Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability
-
Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability
-
Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance
Introducing OpenVidu Call, the premier videoconference application that showcases the full potential of the OpenVidu platform. OpenVidu Call is not just any videoconferencing tool; it’s the default and flagship app built with the robust and versatile OpenVidu Components.
To use a production-ready OpenVidu deployment, visit the official deployment guide.
-
-
Configure Webhooks
-
OpenVidu Call have an endpoint to receive webhooks from OpenVidu. For this reason, when using a production deployment you need to configure webhooks to point to your local application server in order to make it work. Check the Send Webhooks to a Local Application Server section for more information.
-
-
-
-
-
-
Accessible via openvidu-local-deployment
-
A pre-built OpenVidu Call application is launched as part of the openvidu-local-deployment and it can be accessible by visiting http://localhost:7880/openvidu-call/.
-
If you want to explore and run the OpenVidu Call code locally, follow the instructions below.
The OpenVidu Call architecture is divided into two main components:
-
-
frontend: which is the client-side application built with Angular and OpenVidu Components.
-
backend: which is the server-side application built with Node.js and Express and uses the LiveKit Server SDK library to interact with the OpenVidu Server.
-
-
-
-
-OpenVidu Call Architecture
-
-
-
-
-
The client-side application built with Angular that provides the user interface for the videoconference. It uses the OpenVidu Components library to create the videoconference layout with ease.
-
The project architecture is divided into the following directories:
-
-
guards: Contains the guards that handle the authentication.
-
models: Contains the models that define the data structures.
-
pages: Contains the components that define the different pages of the application.
-
services: Contains the services that interact with the backend in a RESTful manner.
-
-
Additionally, the project hosts the following files:
-
-
app.component.ts: The main file that initializes the Angular application.
-
app-routes.ts: Contains the routes that define the application navigation.
-
app,config.ts: Contains the configuration settings for the application. This file is where import for the OpenVidu Angular Components are defined.
-
-
-
-
The server-side application built with Node.js and Express that manages the communication between the OpenVidu Server and the frontend.
-
It uses the LiveKit Server SDK library to interact with the OpenVidu Server and handle the authentication, videoconference rooms, recordings, broadcasts, and other features.
-
The project architecture is divided into the following directories:
-
-
controllers: Contains the controllers that handle the HTTP requests.
-
services: Contains the services that interact with the OpenVidu Server.
-
models: Contains the models that define the data structures.
-
helpers: Contains the helper functions.
-
-
Additionally, the project hosts the following files:
-
-
server.ts: The main file that initializes the Express application.
-
routes.ts: Contains the routes that define the API endpoints.
-
config.ts: Contains the configuration settings for the application.
OpenVidu Call provides user authentication to ensure that only authorized users can access the videoconference rooms. The authentication process is handled by the backend, which uses Basic Authentication to verify the user credentials.
The advanced features of OpenVidu Call enhance the video conferencing experience by providing additional functionalities that improve collaboration and productivity.
-
-
-
-
Speaker Detection
-
-
Highlights the active speaker automatically, making it easier for participants to follow the conversation
-
-
-
Automatic Reconnection
-
-
Ensures that users are automatically reconnected to the call in case of temporary network issues
-
-
-
Recording
-
-
Supports recording of video conferences for later playback
-
-
-
Broadcasting (Live Streaming)
-
-
Allows live streaming of the video conference to platforms like YouTube, Twitch, and others for a wider audience
-
-
-
Virtual Backgrounds
-
-
Enables users to use virtual backgrounds during the call, enhancing privacy and professionalism
OpenVidu Call offers a straightforward authentication system enabling users to join rooms with a single click.
-
Additionally, it automatically generates unique room names, providing a distinct URL for each room. This allows users to easily share the URL with friends and colleagues to join the room.
-
-
-
-
-
-
-
-
-
-
-
Setting up your room
-
OpenVidu Call provides users with various options and configurations to personalize their experience before and after entering a room.
-
This includes testing and selecting audio and video devices, choosing a nickname, and adjusting the preferred language.
-
-
-
-
-
-
-
-
-
Multi-party videoconference
-
OpenVidu Call offers a multi-party videoconference feature that allows users to connect with multiple participants in a single room.
-
Flexible and easy to use, it allows you to see all participants at once, making it ideal for team meetings, webinars, and more.
-
-
-
-
-
-
-
-
-
-
-
Chatting time!
-
Chatting is an essential feature for any videoconference application.
-
OpenVidu Call offers a chat feature that allows users to communicate with each other during a videoconference.
-
-
-
-
-
-
-
-
-
Recording your sessions for posterity
-
Recording your videoconference sessions is a great way to keep a record of important meetings, webinars, and more.
-
Record, playback, download and share your videoconference sessions with OpenVidu Call's recording feature.
-
-
-
-
-
-
-
-
-
-
-
Background effects
-
Virtual backgrounds are a fun and useful feature that allows users to change their background during a videoconference.
-
OpenVidu Call offers a virtual background feature that allows users to choose from a variety of backgrounds for enhancing privacy and professionalism.
-
-
-
-
-
-
-
-
-
Recording Management
-
Allow administrators to manage recordings, including deleting, downloading, and sharing them.
-
The admin dashboard provides a simple interface to manage all recordings.
-
-
-
-
-
-
- And much more...
-
-
-
-
-
-
-
Broadcasting (Live Streaming)
-
Allows live streaming of the video conference to platforms like YouTube, Twitch, and others for a wider audience
-
-
-
Automatic Reconnection
-
Ensures that users are automatically reconnected to the call in case of temporary network issues
-
-
-
Speaker Detection
-
Highlights the active speaker automatically, making it easier for participants to follow the conversation
-
-
-
Screen Sharing
-
-
Allow users to share their screen and their camera at the same time with other participants in the call
-
-
-
Fullscreen Mode
-
-
Offers a fullscreen mode for users to focus on the videoconference without any distractions
-
-
-
Powerful Layout
-
Offers a powerful layout where users can view multiple participants simultaneously in a grid layout or focus on a single participant
-
-
-
-
-
-
- All the features you need to quickly build your perfect real-time application
-
Provides event notifications that fire when start broadcasting button is clicked.
-It provides the BroadcastingStartRequestedEvent payload as event data.
Provides event notifications that fire when stop broadcasting button is clicked.
-It provides the BroadcastingStopRequestedEvent payload as event data.
Provides event notifications that fire when delete recording button has been clicked.
-It provides the RecordingDeleteRequestedEvent payload as event data.
Provides event notifications that fire when download recording button has been clicked.
-It provides the RecordingDownloadClickedEvent payload as event data.
Provides event notifications that fire when stop recording button has been clicked.
-It provides the RecordingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
API Directives
-
With the following directives you can modify the default User Interface with the aim of fully customizing your videoconference application.
Provides event notifications that fire when load more button has been clicked.
-The recordings should be updated using the REST API with the continuation token.
-
-
-
-
-
-
-
-
-
-
- onLogoutRequested
-
-
-
-
- Type : EventEmitter<void>
-
-
-
-
-
-
Provides event notifications that fire when logout button has been clicked.
Provides event notifications that fire when start broadcasting button is clicked.
-It provides the BroadcastingStartRequestedEvent payload as event data.
Provides event notifications that fire when stop broadcasting button is clicked.
-It provides the BroadcastingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
API Directives
-
With the following directives you can modify the default User Interface with the aim of fully customizing your videoconference application.
It is also providing us a way to replace the {@link StreamComponent Stream Component} (which is hosted inside of it) with a custom one.
-It will recognise the following directive in a child element.
The PanelComponent is hosted inside of the VideoconferenceComponent.
-It is in charge of displaying the videoconference panels providing functionalities to the videoconference app
-such as the chat (ChatPanelComponent) and list of participants (ParticipantsPanelComponent)
-
-
-
-
-
-
Implements
-
-
- OnInit
-
-
-
-
-
Metadata
-
-
-
-
-
changeDetection
-
ChangeDetectionStrategy.OnPush
-
-
-
-
-
-
-
-
-
-
-
-
-
-
selector
-
ov-panel
-
-
-
-
-
-
styleUrls
-
./panel.component.scss
-
-
-
-
-
-
templateUrl
-
./panel.component.html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Outputs
-
-
-
-
-
- onActivitiesPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ActivitiesPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the activities panel status has been changed.
-It provides the new status of the activities panel represented by the ActivitiesPanelStatusEvent object.
-
-
-
-
-
-
-
-
-
-
- onChatPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ChatPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the chat panel status has been changed.
-It provides the new status of the chat panel represented by the ChatPanelStatusEvent object.
-
-
-
-
-
-
-
-
-
-
- onParticipantsPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ParticipantsPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the participants panel status has been changed.
-It provides the new status of the participants panel represented by the ParticipantsPanelStatusEvent object.
-
-
-
-
-
-
-
-
-
-
- onSettingsPanelStatusChanged
-
-
-
-
- Type : EventEmitter<SettingsPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the settings panel status has been changed.
-It provides the new status of the settings panel represented by the SettingsPanelStatusEvent object.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Structural Directives
-
With these kind of directives you can replace the default PanelComponent with your own component. You can also add your own components to the default ones.
The ParticipantPanelItemComponent is hosted inside of the ParticipantsPanelComponent.
-It is in charge of displaying the participants information inside of the ParticipansPanelComponent.
It is also providing us a way to add additional buttons to the default participant panel item.
-It will recognise the following directive in a child element.
The ParticipantsPanelComponent is hosted inside of the PanelComponent.
-It is in charge of displaying the participants connected to the session.
-This component is composed by the ParticipantPanelItemComponent.
As the ParticipantsPanelComponent is composed by ParticipantPanelItemComponent, it is also providing us a way to replace the participant item with a custom one.
-It will recognise the following directive in a child element.
Provides event notifications that fire when delete recording button has been clicked.
-It provides the RecordingDeleteRequestedEvent payload as event data.
Provides event notifications that fire when download recording button has been clicked.
-It provides the RecordingDownloadClickedEvent payload as event data.
Provides event notifications that fire when stop recording button has been clicked.
-It provides the RecordingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
API Directives
-
With the following directives you can modify the default User Interface with the aim of fully customizing your videoconference application.
The StreamComponent is hosted inside of the LayoutComponent.
-It is in charge of displaying the participant video stream in the videoconference layout.
With these kind of directives you can replace the default StreamComponent with your own component. You can also add your own components to the default ones.
The ToolbarComponent is hosted inside of the VideoconferenceComponent.
-It is in charge of displaying the participants controlls for handling the media, panels and more videoconference features.
-
-
-
-
-
-
Implements
-
-
- OnInit
- OnDestroy
- AfterViewInit
-
-
-
-
-
Metadata
-
-
-
-
-
changeDetection
-
ChangeDetectionStrategy.OnPush
-
-
-
-
-
-
-
-
-
-
-
-
-
-
selector
-
ov-toolbar
-
-
-
-
-
-
styleUrls
-
./toolbar.component.scss
-
-
-
-
-
-
templateUrl
-
./toolbar.component.html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Outputs
-
-
-
-
-
- onAudioEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false).
Provides event notifications that fire when stop broadcasting has been requested.
-It provides the BroadcastingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
- onFullscreenEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the fullscreen state changes, providing information about if the fullscreen is enabled (true) or disabled (false).
Provides event notifications that fire when stop recording has been requested.
-It provides the RecordingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
- onRoomDisconnected
-
-
-
-
- Type : EventEmitter<void>
-
-
-
-
-
-
This event is emitted when the room has been disconnected.
-
-
-
-
-
-
-
-
-
-
- onScreenShareEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the screen share state changes, providing information about if the screen share is enabled (true) or disabled (false).
-
-
-
-
-
-
-
-
-
-
- onVideoEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Structural Directives
-
With these kind of directives you can replace the default ToolbarComponent with your own component. You can also add your own components to the default ones.
The VideoconferenceComponent is the parent of all OpenVidu components.
-It allow us to create a modern, useful and powerful videoconference apps with ease.
-
-
-
-
-
-
Implements
-
-
- OnInit
- OnDestroy
- AfterViewInit
-
-
-
-
-
Metadata
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
selector
-
ov-videoconference
-
-
-
-
-
-
styleUrls
-
./videoconference.component.scss
-
-
-
-
-
-
templateUrl
-
./videoconference.component.html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Outputs
-
-
-
-
-
- onActivitiesPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ActivitiesPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the activities panel status has been changed.
-It provides the new status of the activities panel as ActivitiesPanelStatusEvent payload.
-
-
-
-
-
-
-
-
-
-
- onAudioDeviceChanged
-
-
-
-
- Type : EventEmitter<CustomDevice>
-
-
-
-
-
-
This event is emitted when the selected audio device changes, providing information about the new custom device that has been selected.
-
-
-
-
-
-
-
-
-
-
- onAudioEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the audio state changes, providing information about if the audio is enabled (true) or disabled (false).
Provides event notifications that fire when start broadcasting button is clicked.
-It provides the BroadcastingStartRequestedEvent payload as event data.
Provides event notifications that fire when stop broadcasting button is clicked.
-It provides the BroadcastingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
- onChatPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ChatPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the chat panel status has been changed.
-It provides the new status of the chat panel as ChatPanelStatusEvent payload.
-
-
-
-
-
-
-
-
-
-
- onFullscreenEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
The event is emitted when the fullscreen state changes, providing information about if the fullscreen is enabled (true) or disabled (false).
Provides event notifications that fire when local participant is created.
-It provides the ParticipantModel payload as event data.
-
-
-
-
-
-
-
-
-
-
- onParticipantsPanelStatusChanged
-
-
-
-
- Type : EventEmitter<ParticipantsPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the participants panel status has been changed.
-It provides the new status of the participants panel as ParticipantsPanelStatusEvent payload.
-
-
-
-
-
-
-
-
-
-
- onReadyToJoin
-
-
-
-
- Type : EventEmitter<void>
-
-
-
-
-
-
Provides event notifications that fire when the participant is ready to join to the room. This event is only emitted when the prejoin page has been shown.
Provides event notifications that fire when delete recording button has been clicked.
-It provides the RecordingDeleteRequestedEvent payload as event data.
Provides event notifications that fire when stop recording button has been clicked.
-It provides the RecordingStopRequestedEvent payload as event data.
-
-
-
-
-
-
-
-
-
-
- onRoomCreated
-
-
-
-
- Type : EventEmitter<Room>
-
-
-
-
-
-
Provides event notifications that fire when OpenVidu Room is created.
-It provides the Room payload as event data.
-
-
-
-
-
-
-
-
-
-
- onRoomDisconnected
-
-
-
-
- Type : EventEmitter<void>
-
-
-
-
-
-
Provides event notifications that fire when the room has been disconnected.
-
-
-
-
-
-
-
-
-
-
- onScreenShareEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the screen share state changes, providing information about if the screen share is enabled (true) or disabled (false).
-
-
-
-
-
-
-
-
-
-
- onSettingsPanelStatusChanged
-
-
-
-
- Type : EventEmitter<SettingsPanelStatusEvent>
-
-
-
-
-
-
This event is fired when the settings panel status has been changed.
-It provides the new status of the settings panel as SettingsPanelStatusEvent payload.
-
-
-
-
-
-
-
-
-
-
- onTokenRequested
-
-
-
-
- Type : EventEmitter<string>
-
-
-
-
-
-
Provides event notifications that fire when videconference is ready to received the token.
-This event emits the participant name as data.
-
-
-
-
-
-
-
-
-
-
- onVideoDeviceChanged
-
-
-
-
- Type : EventEmitter<CustomDevice>
-
-
-
-
-
-
This event is emitted when the selected video device changes, providing information about the new custom device that has been selected.
-
-
-
-
-
-
-
-
-
-
- onVideoEnabledChanged
-
-
-
-
- Type : EventEmitter<boolean>
-
-
-
-
-
-
This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Structural Directives
-
The VideoconferenceComponent also offers the option to tailor the default templates to your preferences using a custom template.
The *ovActivitiesPanel directive empowers you to effortlessly substitute the default activities panel template with a custom one.
-
In the example below, we showcase how to replace the activities template with a custom one.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-import { OpenViduComponentsModule } from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <!-- Custom activities panel -->
- <div *ovActivitiesPanel id="my-panel">
- <h3>ACTIVITIES</h3>
- <div>CUSTOM ACTIVITIES</div>
- </div>
- </ov-videoconference>
- `,
- styles: `
- #my-panel {
- background: #aafffc;
- height: 100%;
- overflow: hidden;
- text-align: center;
- }
- `,
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
- roomName = 'custom-activities-panel';
- token!: string;
-
- constructor(private httpClient: HttpClient) {
- this.configureUrls();
- }
-
- 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/';
- }
- }
- }
-
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- if (error.status === 404) {
- throw {
- status: error.status,
- message: 'Cannot connect with backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
For a step-by-step tutorial on how to replace the activities template with just a few lines of code,
-check out our comprehensive guide: Customizing the Activities Panel.
The *ovChatPanel directive empowers you to effortlessly substitute the default chat panel template with a custom one.
-
In the example below, we showcase how to replace the chat template with a custom one.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import {
- DataPacket_Kind,
- DataPublishOptions,
- DataTopic,
- ParticipantService,
- RemoteParticipant,
- Room,
- RoomEvent,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <!-- OpenVidu Video Conference Component -->
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- [toolbarDisplayRoomName]="false"
- (onTokenRequested)="onTokenRequested($event)"
- (onRoomCreated)="onRoomCreated($event)"
- >
- <!-- Chat Panel -->
- <div *ovChatPanel id="my-panel">
- <h3>Chat</h3>
- <div>
- <ul>
- @for (msg of messages; track msg) {
- <li>{{ msg }}</li>
- }
- </ul>
- </div>
- <input value="Hello" #input />
- <button (click)="send(input.value)">Send</button>
- </div>
- </ov-videoconference>
- `,
- styles: `
- #my-panel {
- background: #aafffc;
- height: 100%;
- overflow: hidden;
- text-align: center;
- }
- `,
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'chat-panel-directive-example';
- token!: string;
- messages: string[] = [];
-
- 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/';
- }
- }
- }
-
- // Function to request a token when a participant joins the room
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Event handler for room creation
- onRoomCreated(room: Room) {
- room.on(
- RoomEvent.DataReceived,
- (
- payload: Uint8Array,
- participant?: RemoteParticipant,
- _?: DataPacket_Kind,
- topic?: string
- ) => {
- if (topic === DataTopic.CHAT) {
- const { message } = JSON.parse(new TextDecoder().decode(payload));
- const participantName = participant?.name || 'Unknown';
- this.messages.push(message);
- console.log(`Message received from ${participantName}:`, message);
- }
- }
- );
- }
-
- // Function to send a chat message
- async send(message: string): Promise<void> {
- const strData = JSON.stringify({ message });
- const data: Uint8Array = new TextEncoder().encode(strData);
- const options: DataPublishOptions = { topic: DataTopic.CHAT };
- await this.participantService.publishData(data, options);
- this.messages.push(message);
- }
-
- // Function to get a token from the server
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
-
For a step-by-step tutorial on how to replace the chat template with just a few lines of code,
-check out our comprehensive guide: Customizing the Chat Panel.
The langOptions directive allows to set the application language options.
-It will override the application languages provided by default.
-This propety is an array of objects which must comply with the LangOption interface.
Note: If you want to add a new language, you must add a new object with the name and the language code (e.g. { name: 'Custom', lang: 'cus' })
-and then add the language file in the assets/lang folder with the name cus.json.
The *ovLayout directive empowers you to replace the default room layout with a customized one.
-
To ensure that the default StreamComponent functions correctly with participant tracks, you can access all local tracks using the tracks accessor.
-Extracting streams from remote participants can be more complex, but openvidu-angular simplifies the process with the RemoteParticipantTracksPipe, which facilitates the extraction of each participant's stream.
-
In the example below, take note of the HTML template's structure. The *ngFor statements employ the | tracks pipe to handle tracks effectively.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { lastValueFrom, Subscription } from 'rxjs';
-import {
- ParticipantModel,
- ParticipantService,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-import { NgClass } from '@angular/common';
-
-@Component({
- selector: 'app-root',
- template: `
- <!-- OpenVidu Video Conference Component -->
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <!-- Custom Layout for Video Streams -->
- <div *ovLayout>
- <div class="container">
- <!-- Local Participant's Tracks -->
- @for (track of localParticipant.tracks; track track) {
- <div
- class="item"
- [ngClass]="{
- hidden:
- track.isAudioTrack && !track.participant.onlyHasAudioTracks
- }"
- >
- <ov-stream [track]="track"></ov-stream>
- </div>
- }
-
- <!-- Remote Participants' Tracks -->
- @for (track of remoteParticipants | tracks; track track) {
- <div
- class="item"
- [ngClass]="{
- hidden:
- track.isAudioTrack && !track.participant.onlyHasAudioTracks
- }"
- >
- <ov-stream [track]="track"></ov-stream>
- </div>
- }
- </div>
- </div>
- </ov-videoconference>
- `,
- styles: `
- .container {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .item {
- flex: 0 50%;
- height: 250px;
- margin-bottom: 2%;
- }
- .hidden {
- display: none;
- }
- `,
- standalone: true,
- imports: [OpenViduComponentsModule, NgClass],
-})
-export class AppComponent implements OnInit, OnDestroy {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'custom-layout';
- token!: string;
-
- // Participant-related properties
- localParticipant!: ParticipantModel;
- remoteParticipants!: ParticipantModel[];
- localParticipantSubs!: Subscription;
- remoteParticipantsSubs!: Subscription;
-
- 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/';
- }
- }
- }
-
- ngOnInit() {
- // Subscribe to participants' updates
- this.subscribeToParticipants();
- }
-
- // Function to request a token when a participant joins the room
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- ngOnDestroy() {
- // Unsubscribe from participant updates to prevent memory leaks
- this.localParticipantSubs.unsubscribe();
- this.remoteParticipantsSubs.unsubscribe();
- }
-
- // Subscribe to updates for local and remote participants
- subscribeToParticipants() {
- this.localParticipantSubs =
- this.participantService.localParticipant$.subscribe((p) => {
- if (p) this.localParticipant = p;
- });
-
- this.remoteParticipantsSubs =
- this.participantService.remoteParticipants$.subscribe(
- (participants) => {
- this.remoteParticipants = participants;
- }
- );
- }
-
- // Function to get a token from the server
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
-
For a comprehensive guide on implementing custom layouts, please refer to the associated tutorial here.
The livekitUrl directive sets the livekitUrl to grant a participant access to a Room.
-This Livekit Url will be use by each participant when connecting to a Room.
The *ovParticipantPanelItem directive allows you to customize the default participant panel item template within the ParticipantsPanelComponent.
-
With the ovParticipantPanelItem directive, you can access the participant object from its context using the let keyword and referencing the participant
-variable as follows: *ovParticipantPanelItem="let participant". This allows you to access the ParticipantModel object.
-
In the example below, we demonstrate how to replace the participant panel item template with just a few lines of code.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import { MatIcon } from '@angular/material/icon';
-import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
-import { MatIconButton } from '@angular/material/button';
-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)"
- >
- <!-- Participant Panel Items -->
- <div *ovParticipantPanelItem="let participant" style="display: flex">
- <p>{{ participant.name }}</p>
-
- <!-- More Options Menu -->
- <button mat-icon-button [matMenuTriggerFor]="menu">
- <mat-icon>more_vert</mat-icon>
- </button>
-
- <!-- Menu Content -->
- <mat-menu #menu="matMenu">
- <button mat-menu-item>Button 1</button>
- <button mat-menu-item>Button 2</button>
- </mat-menu>
- </div>
- </ov-videoconference>
- `,
- styles: [],
- standalone: true,
- imports: [
- OpenViduComponentsModule,
- MatIconButton,
- MatMenuTrigger,
- MatIcon,
- MatMenu,
- MatMenuItem,
- ],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'participant-panel-item';
- token!: string;
-
- 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/';
- }
- }
- }
-
- // Function to request a token when a participant joins the room
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Function to get a token from the server
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
For a detailed tutorial on customizing participant panel items, please visit this link.
The *ovParticipantPanelItemElements directive allows you to incorporate additional elements into the ParticipantPanelItemComponent.
-In the example below, we demonstrate how to add a simple button for disconnecting from the session.
-
With the *ovParticipantPanelItemElements directive, you can access the participant object within its context using the let keyword and referencing the participant variable as follows: *ovParticipantPanelItem="let participant".
-This enables you to access the ParticipantModel object and activate the button exclusively for the local participant.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import {
- OpenViduService,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <!-- OpenVidu Video Conference Component -->
- @if (connected) {
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- [toolbarDisplayRoomName]="false"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <!-- Participant Panel Item Elements -->
- <div *ovParticipantPanelItemElements="let participant">
- <!-- Leave Button for Local Participant -->
- @if (participant.isLocal) {
- <button (click)="leaveSession()">Leave</button>
- }
- </div>
- </ov-videoconference>
- }
-
- <!-- Session Disconnected Message -->
- @if (!connected) {
- <div style="text-align: center;">Session disconnected</div>
- }
- `,
- styles: [],
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'participant-panel-item-elements';
- token!: string;
-
- // Flag to indicate session connection status
- connected = true;
-
- constructor(
- private httpClient: HttpClient,
- private openviduService: OpenViduService
- ) {
- 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/';
- }
- }
- }
-
- // Function to request a token when a participant joins the room
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Function to leave the session
- async leaveSession() {
- await this.openviduService.disconnectRoom();
- this.connected = false;
- }
-
- // Function to get a token from the server
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
For a comprehensive tutorial on adding elements to participant panel items, please visit this link.
The *ovParticipantsPanel directive empowers you to substitute the default participants panel template with a customized one.
-In the following example, we demonstrate how to replace the participants template with just a few lines of code.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { lastValueFrom, Subscription } from 'rxjs';
-
-import {
- ParticipantModel,
- ParticipantService,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <!-- OpenVidu Video Conference Component -->
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <!-- Custom Participants Panel -->
- <div *ovParticipantsPanel id="my-panel">
- <ul id="local">
- <li>{{ localParticipant.name }}</li>
- </ul>
- <ul id="remote">
- @for (p of remoteParticipants; track p) {
- <li>{{ p.name }}</li>
- }
- </ul>
- </div>
- </ov-videoconference>
- `,
- styles: `
- #my-panel {
- background: #faff7f;
- height: 100%;
- overflow: hidden;
- }
- #my-panel > #local {
- background: #a184ff;
- }
- #my-panel > #remote {
- background: #7fb8ff;
- }
- `,
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent implements OnInit, OnDestroy {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'custom-participants-panel';
- token!: string;
-
- // Participant-related properties
- localParticipant!: ParticipantModel;
- remoteParticipants!: ParticipantModel[];
- localParticipantSubs!: Subscription;
- remoteParticipantsSubs!: Subscription;
-
- 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/';
- }
- }
- }
-
- // Subscribes to updates for local and remote participants.
- ngOnInit() {
- this.subscribeToParticipants();
- }
-
- // Unsubscribes from updates for local and remote participants to prevent memory leaks.
- ngOnDestroy() {
- this.localParticipantSubs.unsubscribe();
- this.remoteParticipantsSubs.unsubscribe();
- }
-
- // Function called when a participant requests a token to join the room.
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Subscribes to updates for local and remote participants.
- subscribeToParticipants() {
- this.localParticipantSubs =
- this.participantService.localParticipant$.subscribe((p) => {
- if (p) this.localParticipant = p;
- });
-
- this.remoteParticipantsSubs =
- this.participantService.remoteParticipants$.subscribe(
- (participants) => {
- this.remoteParticipants = participants;
- }
- );
- }
-
- // Sends a request to the server to obtain a token for a participant.
- async getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
For a comprehensive tutorial on customizing the participants panel, please visit this link.
The *ovStream directive empowers you to substitute the default StreamComponent template with a custom one.
-In the example below, we demonstrate how to customize the position and styles of a participant's nickname by replacing the default stream component.
-
With the ovStream directive, you can access the track object within its context using the let keyword and referencing the track variable as follows: *ovStream="let track". This allows you to access the ParticipantModel object using track.participant.
-
In the example provided below, we illustrate how to achieve this customization with just a few lines of code.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import {
- OpenViduComponentsModule,
- ApiDirectiveModule,
- OpenViduComponentsDirectiveModule,
-} from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <!-- OpenVidu Video Conference Component -->
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <!-- Display Video Streams -->
- <div *ovStream="let track">
- <!-- Video Stream Component -->
- <ov-stream [track]="track" [displayParticipantName]="false"></ov-stream>
-
- <!-- Display Participant's Name -->
- <p>{{ track.participant.name }}</p>
- </div>
- </ov-videoconference>
- `,
- styles: `
- p {
- position: absolute;
- bottom: 0;
- border: 2px solid;
- background: #000000;
- }
- `,
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
-
- // Define the name of the room and initialize the token variable
- roomName = 'custom-stream';
- token!: string;
-
- 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/';
- }
- }
- }
-
- // Function to request a token when a participant joins the room
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Function to get a token from the server
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- // Send a POST request to the server to obtain a token
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- // Handle errors, e.g., if the server is not reachable
- if (error.status === 404) {
- throw {
- status: error.status,
- message:
- 'Cannot connect with the backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
For a detailed tutorial on customizing the stream component, please visit this link.
The token directive sets the token to grant a participant access to a Room.
-This OpenVidu token will be use by each participant when connecting to a Room.
The *ovToolbarAdditionalButtons directive enables the addition of extra buttons to the central button group within the toolbar.
-
In the following example, we've included the same buttons as those in the ToolbarDirective. Additionally, we utilize the ParticipantService to assess audio and video statuses.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import {
- ParticipantService,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-import { MatIcon } from '@angular/material/icon';
-import { MatIconButton } from '@angular/material/button';
-
-@Component({
- selector: 'app-root',
- template: `
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <div *ovToolbarAdditionalButtons style="text-align: center;">
- <button mat-icon-button (click)="toggleVideo()">
- <mat-icon>videocam</mat-icon>
- </button>
- <button mat-icon-button (click)="toggleAudio()">
- <mat-icon>mic</mat-icon>
- </button>
- </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 = '';
- LIVEKIT_URL = '';
-
- // The name of the room for the video conference.
- roomName = 'toolbar-additionalbtn';
-
- // The token used to authenticate the user in the video conference.
- token!: string;
-
- 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/';
- }
- }
- }
-
- // Called when the token is requested.
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Toggles the camera on/off.
- async toggleVideo() {
- const isCameraEnabled = this.participantService.isMyCameraEnabled();
- await this.participantService.setCameraEnabled(!isCameraEnabled);
- }
-
- // Toggles the microphone on/off.
- async toggleAudio() {
- const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();
- await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);
- }
-
- // Retrieves a token from the server to authenticate the user.
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- if (error.status === 404) {
- throw {
- status: error.status,
- message: 'Cannot connect with backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
-
-
To follow a step-by-step tutorial on this feature, please visit this link.
The *ovToolbarAdditionalPanelButtons directive allows to add additional panel buttons to the toolbar.
-In the example below we've added a simple button without any functionality. To learn how to toggle the panel check the AdditionalPanelsDirective.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import { OpenViduComponentsModule } from 'openvidu-components-angular';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-
-@Component({
- selector: 'app-root',
- template: `
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- [toolbarDisplayRoomName]="false"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
- <button mat-icon-button (click)="onButtonClicked()">
- <mat-icon>star</mat-icon>
- </button>
- </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 = '';
- LIVEKIT_URL = '';
-
- // Set the room name
- roomName = 'toolbar-additional-panel-btn';
-
- // Initialize the token variable
- token!: string;
-
- 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/';
- }
- }
- }
-
- // Method to request a token for a participant
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Method to handle button click
- onButtonClicked() {
- alert('button clicked');
- }
-
- // Method to get a token from the backend
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- if (error.status === 404) {
- throw {
- status: error.status,
- message: 'Cannot connect with backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
The *ovToolbar directive allows to replace the default toolbar component with a custom one.
-
In the example below we've replaced the default toolbar and added the toggleAudio and toggleVideo buttons.
-Here we are using the ParticipantService for enabling/disabling the audio and video.
-
-Example :
import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { lastValueFrom } from 'rxjs';
-
-import {
- ParticipantService,
- OpenViduComponentsModule,
-} from 'openvidu-components-angular';
-
-@Component({
- selector: 'app-root',
- template: `
- <ov-videoconference
- [token]="token"
- [livekitUrl]="LIVEKIT_URL"
- (onTokenRequested)="onTokenRequested($event)"
- >
- <div *ovToolbar style="text-align: center;">
- <button (click)="toggleVideo()">Toggle Video</button>
- <button (click)="toggleAudio()">Toggle Audio</button>
- </div>
- </ov-videoconference>
- `,
- standalone: true,
- imports: [OpenViduComponentsModule],
-})
-export class AppComponent {
- // For local development, leave these variables empty
- // For production, configure them with correct URLs depending on your deployment
-
- APPLICATION_SERVER_URL = '';
- LIVEKIT_URL = '';
- // The name of the room.
- roomName = 'custom-toolbar';
-
- // The token used to connect to the videoconference.
- token!: string;
-
- 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/';
- }
- }
- }
-
- // Called when a token is requested for a participant.
- async onTokenRequested(participantName: string) {
- const { token } = await this.getToken(this.roomName, participantName);
- this.token = token;
- }
-
- // Toggles the camera on and off.
- async toggleVideo() {
- const isCameraEnabled = this.participantService.isMyCameraEnabled();
- await this.participantService.setCameraEnabled(!isCameraEnabled);
- }
-
- // Toggles the microphone on and off.
- async toggleAudio() {
- const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();
- await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);
- }
-
- // Gets a token for a participant.
- getToken(roomName: string, participantName: string): Promise<any> {
- try {
- return lastValueFrom(
- this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
- roomName,
- participantName,
- })
- );
- } catch (error: any) {
- if (error.status === 404) {
- throw {
- status: error.status,
- message: 'Cannot connect with backend. ' + error.url + ' not found',
- };
- }
- throw error;
- }
- }
-}
-
- 
- 
-
-
-
