Skip to content

OpenVidu Call Documentation#

Source code

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.

OpenVidu Call

OpenVidu Call

Run OpenVidu Call#

1. Run OpenVidu Server#

  1. Download OpenVidu

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

  2. Configure the local deployment

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

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

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

  3. Run OpenVidu

    docker compose up

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

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.

2. Download OpenVidu Call code#

git clone https://github.com/OpenVidu/openvidu-call.git -b 3.0.0-beta3

3. Run the OpenVidu Call backend#

  1. Navigate to the backend directory:

    cd openvidu-call/backend

  2. Install the dependencies:

    npm install

  3. Start the application:

    npm run dev:start

4. Run the OpenVidu Call frontend#

Launching another terminal, under the openvidu-call directory:

  1. Navigate to the frontend directory:

    cd openvidu-call/frontend

  2. Install the dependencies:

    npm install

  3. Start the application:

    npm run dev:start

The application will be available at http://localhost:5080.

Architecture#

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

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.

Features#

Authentication#

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.

Video conferencing#

Essential Features#

OpenVidu Call offers essential features that make video conferencing simple and intuitive for users. These features include:

  • Multilingual

    Supports for multiple languages, allowing users to select their preferred language for the interface

  • Device Selection

    Users can choose their preferred audio and video devices before and during the call

  • Fullscreen Mode

    Offers a fullscreen mode for users to focus on the videoconference without any distractions

  • Screen Sharing

    Allow users to share their screen and their camera at the same time with other participants in the call

  • Powerful Layout

    Offers a powerful layout where users can view multiple participants simultaneously in a grid layout or focus on a single participant

  • Chat Integration

    Built-in chat functionality enabling participants to send text messages to the group


Advanced Features#

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

Admin Dashboard#

An admin dashboard is integrated into OpenVidu Call to provide additional functionalities for the admin user.

  • Admin Authentication

    Provides admin authentication to ensure that only authorized users can access the admin dashboard

  • Recording Management

    Allows the admin user to view, download, and delete the recordings stored in the OpenVidu Server

Build and Deployment#

Docker Image#

The process to build a Docker image of OpenVidu call is really easy, you just need to run the following instructions:

  1. Build the Docker image:

    cd docker
./create_image.sh openvidu-call

    This script will create a Docker image with the name openvidu-call.

  2. Run the Docker container:

    docker run -p 6080:6080 \
-e LIVEKIT_URL=wss://your-livekit-server-url \
-e LIVEKIT_API_KEY=your-livekit-api-key \
-e LIVEKIT_API_SECRET=your-livekit-api-secret \
openvidu-call

    Once the container is running, you can access the OpenVidu Call application by visiting http://localhost:6080.

Package bundle#

To build the OpenVidu Call application without using Docker, you can follow the instructions:

  1. Build the frontend application:

    cd frontend
npm install && npm run build-and-copy
cd ..

  2. Build the backend application:

    cd backend
npm install
npm run build

  3. Start the backend application:

    node dist/src/server.js