Error on openvidu-tutorials/openvidu-js

[Yeagob]

Hello! I’m having issues with the JavaScript client from the tutorials: https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-js

I deployed it on AWS, following these steps: https://docs.openvidu.io/en/stable/deployment/ce/aws/#1-access-to-the-console-of-aws-cloud-formation

But when I run the mentioned client, I have to change the endpoint address and add ‘openvidu/’ in the APPLICATION_SERVER_URL: POST http s://mydomain.com/openvidu/api/sessions

With this change, ‘createSession’ works perfectly, but when ‘createToken’ is executed, I get the following error in the console:

jquery-3.3.1.min.js:2 POST https://mydomain.com/openvidu/api/sessions/%5Bobject%20Object%5D/connections 400

I don’t know what I’m doing wrong.

Thank you in advance for your help.

Santiago.

[cruizba]

The frontend app does not communicate with the server directly, you need an intermediary server called Application Server. Let me explain both parts to clarify it:

1. OpenVidu Server: This is the main component of OpenVidu, responsible for managing video call sessions and connections. However, it does not directly communicate with the front-end application that users interact with.

2. Application Server: This is a separate server from the OpenVidu Server. Its main purpose is to act as an intermediary between your front-end application and the OpenVidu Server. It handles requests from the front-end, authorizes them, and communicates these requests to the OpenVidu Server.

This two-step process (front-end → application server → OpenVidu Server) helps enhance the security of your video calls. It prevents the front-end application from communicating directly with the OpenVidu Server, protecting your sessions and connections.

To implement this, first you need to set up and deploy your application server. This server should be configured to communicate with the OpenVidu Server. It will handle tasks such as creating sessions and connections.

Once your application server is up and running, you then configure your front-end application to send its requests to the application server rather than the OpenVidu Server. This way, your front-end doesn’t talk directly to OpenVidu Server, but instead to your application server, which then communicates with OpenVidu Server.

To learn more about these concepts and to understand the steps involved in this setup, you can follow this tutorial: Application Server Tutorial and read more in the Developing your video app section.

[cruizba]

I would like to ask, how did you explore OpenVidu Docs? Is it not clear that an Application Server is needed? Any feedback is greatly welcome

[Yeagob]

I fixed tutorial code, now it is working, endpoints was bad name and 2 other thinks. If you want to update the repository:

//Previous app.js code...

var APPLICATION_SERVER_URL = "https://domainname.com/openvidu/";

function getToken(mySessionId) {

    return checkSession(mySessionId).then(sessionExists => {
        if (sessionExists) {
            return createToken(mySessionId);
        } else {
            return createSession(mySessionId).then(sessionId => createToken(mySessionId));
        }
    });
}

function checkSession(sessionId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "GET",
            url: APPLICATION_SERVER_URL + "api/sessions/" + sessionId,
            headers: { 
                "Authorization": "Basic <YOUR AUTORIZATION HERE>"
            },
            success: response => resolve(true),
            error: (error) => {
                if (error.status === 404) {
                    resolve(false);
                } else {
                    reject(error);
                }
            }
        });
    });
}

function createSession(sessionId) {

	return new Promise((resolve, reject) => {
		$.ajax({
			type: "POST",
			url: APPLICATION_SERVER_URL + "api/sessions",
			data: JSON.stringify({ customSessionId: sessionId }),
			headers: { 
				"Content-Type": "application/json",
                                "Authorization": "Basic <YOUR AUTORIZATION HERE>"
		 	},
			success: response => resolve(response), // The sessionId
			error: (error) => reject(error)
		});
	});
}

function createToken(sessionId) {
	return new Promise((resolve, reject) => {
		$.ajax({
			type: 'POST',
			url: APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connection',
			data: JSON.stringify({}),
			headers: { 
				"Content-Type": "application/json",
                                "Authorization": "Basic <YOUR AUTORIZATION HERE>"
		 	},
			success: (response) => resolve(response.token), // The token
			error: (error) => reject(error)
		});
	});
}

[pabloFuente]

Of course that will work, but you have made the tutorial insecure. This is the architecture of a secure OpenVidu app:

But you have changed it to this:

Having your credentials in your application client is not secure.

Does this make sense?

[Yeagob]

Yes your right, its WIP now I’m setting my shoket token validation.