openvidu-call 🔗

Check it on GitHub

OpenVidu Call is the flagship videoconference app integrating many of the capabilities offered by OpenVidu platform. It brings a great number of essential features: screensharing, chat service, intelligent layout, speech detection, switch cameras, and so on.

Visit its presentation page for more information. OpenVidu Call is installed by default when you deploy OpenVidu.

Running the application 🔗

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

1. Run OpenVidu deployment 🔗

Using Docker Engine:

# WARNING: this container is not suitable for production deployments of OpenVidu
# Visit
docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.23.0

2. Run your preferred server application 🔗

Let's run the server application. Choose one of the backends offered in OpenVidu Call:

You need Node and npm.

1) Clone the repository

git clone -b v2.23.0

2) Install dependencies

cd openvidu-call-back
npm install

3) Run the server application, which in this case is the OpenVidu Call backend. To configure this command you can check below section Configuration parameters for OpenVidu Call backend.

npm run start

3. Run the client application 🔗

Install frontend dependencies in path openvidu-tutorials/openvidu-call/openvidu-call-front:

npm install

Run the client application:

npx ng serve --open

Understanding the code 🔗

OpenVidu Call is the production ready videconference app included by default in any OpenVidu deployment. OpenVidu Call consists of:

openvidu-call-back 🔗

The OpenVidu Call backend provides the necessary logic for a secure management of your OpenVidu Sessions. It also includes other features such as recording capabilities and user authentication. It is the perfect starting point for you own custom backend.

OpenVidu Call offers two different flavors of the same backend (Java and Node), so that you can choose the one that is most convenient for you. Both of them are fully functional applications using its corresponding SDK (openvidu-java-client or openvidu-node-client) and exposing the same REST API.

  • app.ts: entrypoint of the server.
  • config.ts: contains the backend environment variables.
  • AdminController.ts: controller for login/logout and access to admin dashboard.
  • SessionController.ts: controller for requesting OpenVidu Tokens (see basic concepts).
  • RecordingController.ts: controller for recording features.
  • OpenViduService.ts: service using openvidu-node-client to communicate with the OpenVidu deployment.

(Used by default with OpenVidu deployment)

See code here

The application server allows us to list the recordings of a session, start and stop a recording and delete a specific recording. It also allows starting the playback of a video in the client device.

For enabling the video playback, the backend acts as proxy between the browser and the OpenVidu deployment, which is the most optimal way to download the video.

To identify who is able to manage a session recording, the server will generate and save (in-memory) a cookie with a token and it will be sent to the session creator (that is the first user connecting to the OpenVidu session). This user will have the necessary permissions to manage the session's recording.

This authentication and authorization system is very basic and limited. It will not be suitable for most production environments. We highly recommend IMPLEMENTING YOUR OWN USER MANAGEMENT SYSTEM with real persistence for a properly secured recording process.

In addition, the server allows logging in and out of the admin dashboard. This dashboard provides a list of all recordings availables in our deployment, allows the playback of the videos and their deletion.

openvidu-call-front 🔗

A simple Angular app built with openvidu-angular library allowing us to develop a powerful videconference frontend. See code here.

  • services/rest.service.ts: services for requesting OpenVidu Tokens to the application's backend.
  • components/home: component with the home screen, where the user can define the session name and join it.
  • components/call: component with the videoconference screen.
  • components/admin-dashboard: component with the admin dashboard.

Let's focus on the call component template. We can have a videoconference app with a few lines of code:


We need to request OpenVidu Tokens to the backend and set them in the ov-videoconference component, specifically in its tokens input property (see VideoconferenceComponent reference). Once tthe okens are defined, the component will automatically join the session.

We are also listening to some events such as onLeaveButtonClicked to customize our application's logic. You can see all the events offered by VideoconferenceComponent here.

Configuration parameters for OpenVidu Call backend 🔗

Parameter Description Default value
SERVER_PORT Number that indicates the port where http server will listen 5000
OPENVIDU_URL String that indicates the URL to connect to the OpenVidu deployment "http://localhost:4443"
OPENVIDU_SECRET String with the secret of the OpenVidu deployment "MY_SECRET"
ADMIN_SECRET String with the secret of the OpenVidu Call admin dashboard Same as OPENVIDU_SECRET
RECORDING If recording features are ENABLED or not "ENABLED"

These configuration parameters can be set as environment variables. For example, to execute the application against an OpenVidu deployment with a domain name such us that is configured with secret PASSWORD:

$ npx cross-env OPENVIDU_URL= OPENVIDU_SECRET=PASSWORD nodemon src/app.ts

Backend REST API 🔗

1. Initialize a Session
URL https://localhost:5000/sessions
REQUEST BODY {"sessionId":"session_id", "nickname":"openvidu_name"}
200 OK RETURN VALUE A JSON object with the Connection tokens and recording information.
For example: {"cameraToken": "wss://localhost:4443?sessionId=ses_JM9v0nfD1l&token=tok_MIYGGzuDQb8Xf1Qd", "screenToken": "wss://localhost:4443?sessionId=ses_JM2v0nfD1l&token=tok_MIYGGduDQb8Xf1Qd", "recordings": [], "recordingEnabled": true}
2. List all recordings
URL https://localhost:5000/recordings
200 OK RETURN VALUE The list of all Recording objects associated to the session
3. Start recording
URL https://localhost:5000/recordings/start
REQUEST BODY {"sessionId": "session_name"}
200 OK RETURN VALUE The Recording object
4. Stop recording
URL https://localhost:5000/recordings/stop
REQUEST BODY {"sessionId": "session_name"}
200 OK RETURN VALUE The list of all Recording objects associated to the session
5. Delete a recording
URL https://localhost:5000/recordings/delete/RECORDING_ID
200 OK RETURN VALUE The list of all Recording objects associated to the session
6. Get a recording
URL https://localhost:5000/recordings/RECORDING_ID
206 Partial Content RETURN VALUE Byterange used to allow large files to be downloaded or requested progressively
7. Admin login
URL https://localhost:5000/admin/login
REQUEST BODY Password for doing login in Admin dashboard {"password": "xxx"}
200 OK RETURN VALUE A list of all Recording objects available in the entire OpenVidu deployment
8. Admin logout
URL https://localhost:5000/admin/logout

How to build OpenVidu Call 🔗

Docker image 🔗

OpenVidu Call container is designed to be served next to an OpenVidu deployment. To allow the use of this image out of an OpenVidu deployment, you have two options:

  1. Handle the NGINX certificates with a proxy
  2. Edit OpenVidu Call image to include the SSL certificate

The process to build a Docker image of OpenVidu call is really easy. Take into account that you need to use one Dockerfile or another depending on the server technology you choose (Node or Java).

1) In directory openvidu-call/., execute:

docker build -f docker/Dockerfile.node -t <your-tag-name> .

2) After that, you can run the Docker container:

docker run -p <your-port>:5000 -e OPENVIDU_URL=<your-openvidu-url> -e OPENVIDU_SECRET=<your-secret> <your-image-name>

3) Go to http://localhost:your-port to test the app

Configuration parameters when building OpenVidu Call Docker image 🔗

Parameter Description Default value
BASE_HREF URL prefix for application's path /

Packaged application 🔗

You can also build OpenVidu Call without Docker and serve it directly using Node or Java. Placed at openvidu-call/. root path:

1) Build OpenVidu Call frontend. Set as BASE_HREF the desired value depending on the path your application will be accessible:

cd openvidu-call-front
npm run prod:build BASE_HREF

2) Build OpenVidu Call backend:

cd ../openvidu-call-back
npm run build

3) You will find the app built in dist directory. You can use Node to launch it:

cd dist/
node openvidu-call-server.js