Struggling with Openvidu 3.1.0

Hi all,
I’m struggling a little bit understanding the new version. I already configured my High Availability AWS servers (using MediaSoup) and now I’m trying to develop my customized project.
I also tried some of yours tutorial, but I continue not to understand how to get the tokens and how to connect to a session.

Here I live snippet of code that I’m dealing with, could you give me some advice or tell me what’s wrong with it?

In particular I came from 2.29 version where there were REST APIs and I would like to understand how to use them with LiveKit because my idea is to start a new project that uses only the 3.1.0 version.
Does this LiveKit replace the REST APIs of the previews versions? If it so, how or where can I get my LiveKit URL and where can I put it (I saw that now the configuration is stored directly in AWS Secrets Manager)?

Could someone help me or explain me how to start customizing my OV call?
Greetings, Matteo.

Hello Matteo,

I will be glad to help. Yes, OpenVidu 3 is based on LiveKit, and you should use LiveKit APIs to interact with your deployment. As you have deployed an OpenVidu High Availability cluster using our AWS CloudFormation template, you will have all the deployment parameters (including the LiveKit URL to be used from your application backend) available in AWS Secrets Manager. You can access directly these values from the Output tab of the CloudFormation deployment, as shown here: OpenVidu High Availability installation on AWS - openVidu

The steps to perform in your application are:

  1. Configure your application backend with your deployment’s api key and api secret (at least you need those to generate Access Tokens). If you want to use OpenVidu REST API, your application backend will also need the LiveKit URL. For example, our Node tutorial configures the api key and secret right here as environment variables: openvidu-livekit-tutorials/application-server/node/index.js at master · OpenVidu/openvidu-livekit-tutorials · GitHub
  2. Make your application backend generate client Access Tokens on demand. You do so using LiveKit Server SDKs. Usually, you will want to generate a new Access Token whenever your application client requires it. For example, in the Node tutorial it is done right here: openvidu-livekit-tutorials/application-server/node/index.js at master · OpenVidu/openvidu-livekit-tutorials · GitHub
  3. Use the Access Token generated by your application backend in your application frontend to connect to a Room. Your application frontend must include the necessary LiveKit Client SDK. For example, our plain JavaScript tutorial gets an access token from the application server and connects to a Room right here. Of course, the application client code should configure the Room handlers accordingly to the logic you want. In this case, the application client simply listens to TrackSubscribed and TrackUnsubscribed events to display or remove participant’s tracks when required (see here).

Any of our application server tutorials are compatible with any of our application client tutorials, so if you want to do a quick test just pick whichever you like and follow their instructions. If you are struggling to understand the flow of operations to establish a video Room, I really recommend you to first of all read this summary: Developing your OpenVidu app - openVidu and then follow any of our simple tutorials, picking the technology that best suit you: Application Client Tutorials - openVidu. I see in your code snippet above that you are using Angular, so this would be the best choice: Angular Tutorial - openVidu

If you have any specific doubt I will be glad to solve it.
Cheers!

Hi Pablo,
thank you for the detailed response, but I have a few other questions.

In my AWS Secret Manager values I have those variables but no one referred to the LiveKit URL, but as you show in the tutorial I think the URL must be like “wss://DOMAIN_NAME/”, right?

{
“ALL_SECRETS_GENERATED”: “true”,
“DOMAIN_NAME”: “—”,
“LIVEKIT_TURN_DOMAIN_NAME”: “none”,
“OPENVIDU_PRO_LICENSE”: “—”,
“OPENVIDU_RTC_ENGINE”: “mediasoup”,
“REDIS_PASSWORD”: “—”,
“MONGO_ADMIN_USERNAME”: “—”,
“MONGO_ADMIN_PASSWORD”: “—”,
“MONGO_REPLICA_SET_KEY”: “—”,
“MINIO_URL”: “—”,
“MINIO_ACCESS_KEY”: “—”,
“MINIO_SECRET_KEY”: “—”,
“DASHBOARD_URL”: “—”,
“DASHBOARD_ADMIN_USERNAME”: “—”,
“DASHBOARD_ADMIN_PASSWORD”: “—”,
“GRAFANA_URL”: “—”,
“GRAFANA_ADMIN_USERNAME”: “—”,
“GRAFANA_ADMIN_PASSWORD”: “—”,
“DEFAULT_APP_USERNAME”: “—”,
“DEFAULT_APP_PASSWORD”: “—”,
“DEFAULT_APP_ADMIN_USERNAME”: “—”,
“DEFAULT_APP_ADMIN_PASSWORD”: “—”,
“LIVEKIT_API_KEY”: “—”,
“LIVEKIT_API_SECRET”: “—”,
“ENABLED_MODULES”: “observability,v2compatibility,app”,
“MASTER_NODE_1_PRIVATE_IP”: “—”,
“MASTER_NODE_2_PRIVATE_IP”: “—”,
“MASTER_NODE_3_PRIVATE_IP”: “—”,
“MASTER_NODE_4_PRIVATE_IP”: “—”,
“OPENVIDU_VERSION”: “main”
}

In order to use LiveKit APIs I need to install the library inside my angular project using this command “npm install livekit-client --save” (I found it at this page LiveKit JS Client SDK - v2.11.4), right?

I also have modified the parameter “ENABLED_MODULES” from “observability,v2compatibility,app” to “observability,v2compatibility”, but when I lauch my “DOMAIN_NAME” in the browser I receive a 503 error, why’s that?

I need to follow this tutorial https://openvidu.io/latest/docs/tutorials/application-client/angular/ even if I want to use Openvidu components library to customize the OV app as I prefer?

In your turorial the variable APPLICATION_SERVER_URL is referred to the DOMAIN_NAME value, right?


I’ll give it a try and, just in case of necessity, I’ll return here to ask other explaination.
In the meanwhile I want to thank you for the advice.

Cheers, Matteo!

Yes, you are right. In this section you have that information: Configure your Application to use the Deployment.

Yes, that’s also right. You have to install NPM library livekit-client like this: npm install --save livekit-client. If you take a look to Angular Tutorial you will see that dependency in the package.json.

That is because https://DOMAIN_NAME is the direction where the app module lives (it is the OpenVidu Call application). If you remove that module, then there will be nothing there.

No, you don’t have to follow that tutorial. My suggestion was to give that tutorial a try if you needed some guided instructions to get a grasp on how OpenVidu v3 works. But from your questions I sense that you are more or less up and running :wink:

In the client side application, there are 2 distinct variables:

  • APPLICATION_SERVER_URL: this is the URL of your server side application (your backend). At the very least, your server side application will have to generate Access Tokens for your client side, so they can connect to a Room using the LiveKit SDK (the JS SDK in your case). But probably your server side application will perform other tasks (client authentication, consuming LiveKit’s REST API…).
  • LIVEKIT_URL: this is the URL of OpenVidu. It is a WebSocket URL that your application client will use to connect to Rooms (and finally send and receive media).

For the tutorials, both the application server and OpenVidu server live on localhost. That’s the reason of these lines: openvidu-livekit-tutorials/application-client/openvidu-angular/src/app/app.component.ts at e10eeb0fdc691a5628e8467eeaec495b6350a18d · OpenVidu/openvidu-livekit-tutorials · GitHub. There, the Angular code assumes that you are on a localhost environment if you have not defined a different LIVEKIT_URL. Does this make sense?

Best regards.

Hi Pablo,
sorry but I need to go a bit deep to understand completely how this new version works.
I’ll try to go straight to the important questions:

  1. What is DOMAIN_NAME? Is this value the address of my OpenVidu server?
    As you said before this shouldn’t be it because this should be the URL of the Openvidu Call application.
    So, which is the URL of my OpenVidu server?

  2. What is LIVEKIT_URL? Is this the value of my OpenVidu server either, but set up like “wss://DOMAIN_NAME/”?

  3. Sorry but I didn’t understand your explaination of the variable “APPLICATION_SERVER_URL”. You said that is the URL of my server side application, but is this the URL where I upload my angular built file (the code of the angular project)? I don’t think so because that should be the front-end.
    So, what do you mean with “this is the URL of your server side application (your backend).
    I set up my environment variable like this, however I think there’s something wrong with it because when I request the token, the POST call fails with a 404 error, could you help me understand my mistake?

image

image

DOMAIN_NAME is the domain name of your OpenVidu deployment. For example: it can be openvidu.example.io. As explained here, this DOMAIN_NAME must be used in your application to communicate with OpenVidu. This is done in two ways:

  • Your application backend will tipically use it in URL form (for example http://DOMAIN_NAME:7880/) to call OpenVidu API (to manage Rooms, Egresses, Ingresses…)
  • Your application frontend will use it in WebSocket form (like ws://DOMAIN_NAME:7880) to connect your application frontend with OpenVidu.

But as you can see, DOMAIN_NAME is the same in both cases. Again: it is simply the domain name where your OpenVidu deployment is accessible to both your application backend and frontend.

The thing about OpenVidu Call: by default any OpenVidu deployment that has module app enabled, will server OpenVidu Call app at https://DOMAIN_NAME:443. But this is just for convenience. It doesn’t mean that all URLs with domain name DOMAIN_NAME are taken by OpenVidu Call. Ports are different, and paths are also different. OpenVidu is able to distinguish different services by using different ports and paths. In other words: don’t worry about OpenVidu Call. If you enable it, it will be available at https://DOMAIN_NAME:443. If you don’t enable it, that URL will serve nothing, but DOMAIN_NAME still remains as the domain name of your OpenVidu deployment.

LIVEKIT_URL is the full URL that your aplication will use to connect to the OpenVidu deployment. It has as domain name the value DOMAIN_NAME. If you use LIVEKIT_URL in your application backend to consume OpenVidu APIs (Room Service, Egress Service, Ingress Service, SIP Service, Agents Service…), then it will take the form of http(s)://DOMAIN_NAME:PORT. If you use it in your application frontend to connect to OpenVidu (using method Room.connect) it will take the form of ws(s)://DOMAIN_NAME:PORT.

Regarding this topic: I recommend you to take a look to this section of the documentation: OpenVidu application architecture. There you have a simple but complete description of the architecture of a typical OpenVidu app.

The thing is: APPLICATION_SERVER_URL is the URL where your own backend lives. It is usually a different URL than the OpenVidu deployment (but it also can be the same: for example the OpenVidu Call app, which has its own backend and frontend, and if enabled it is served from the same DOMAIN_NAME as the OpenVidu deployment).
I understand from what you are saying that you are serving your Angular app (AKA your application frontend) from your application backend (your backend is serving through a public folder the Angular static files). Ok, that’s fine, but your frontend could be served in other ways. For example, imagine a mobile application: it wouldn’t be served by a URL at all, it would be simply installed in your client phones. Nonetheless, those apps should know your APPLICATION_SERVER_URL to be able to communicate with your application backend.

At this point I don’t know if I am clarifying your doubts, or causing even more doubts. Let me try to summarize all of this:

  • Your full deployment has 3 different parts: your application frontend (that uses LiveKit client SDK), your application backend (that uses LiveKit server SDK), and the OpenVidu deployment.
  • Those 3 parts are technically independent, and they can live in different places. But, as a typical web application, your application frontend will usually be served by your application backend (in other words: a web browser will connect to some URL in which your application server is serving your application frontend).
  • If you want to, you can also make your servers serve both your application backend and your OpenVidu deployment under the same DOMAIN_NAME. But you can also host your application backend in DOMAIN_NAME_1 and your OpenVidu deployment in a different DOMAIN_NAME_2.
  • Your application backend will use the DOMAIN_NAME of your OpenVidu deployment with a URL like https://DOMAIN_NAME, and your application frontend with a URL like wss://DOMAIN_NAME.