diff --git a/docs/tutorials/application-client/android.md b/docs/tutorials/application-client/android.md index 4cc169b..cfd48c4 100644 --- a/docs/tutorials/application-client/android.md +++ b/docs/tutorials/application-client/android.md @@ -39,16 +39,26 @@ The application will initiate as a native Android program. Once the application
-

- -

+

+This screen allows you to configure the URLs of the application server and the LiveKit server. You need to set them up for requesting tokens to your application server and connecting to the LiveKit server. + !!! info "Connecting real Android device to application server running in you local network" One advantage of [running OpenVidu locally](#run-openvidu-locally) is that you can test your application client in a real Android device and be able to reach the application server very easily without worrying about SSL certificates if they are both running in the same local network. For more information, see section [Accessing your app from other devices in your network](/openvidu-vs-livekit/#accessing-your-app-from-other-devices-in-your-network){target="_blank"}. +Once you have configured the URLs, you can join a video call room by providing a room name and a user name. After joining the room, you will be able to see your own video and audio tracks, as well as the video and audio tracks of the other participants in the room. + +
+ +

+ +

+ +
+ ## Understanding the code This Android project has been generated with Android Studio. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the `app/src/main/java` directory: @@ -140,14 +150,14 @@ private fun requestNeededPermissions(onHasPermissions: () -> Unit) { ### Configuring URLs -The `Urls.kt` file defines an object that contains the following URLs: +The `Urls.kt` file defines an object that contains the following URLs required for the application: - `applicationServerUrl`: The URL of the application server. This variable is used to make requests to the server to obtain a token for joining the video call room. - `livekitUrl`: The URL of the LiveKit server. This variable is used to connect to the LiveKit server and interact with the video call room. -You should configure these variables with the correct URLs depending on your deployment. In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.). +You should configure these URLs according to your deployment settings. In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.). -If you leave them empty, the user will be prompted to enter the URLs when the application starts. This is done in the `ConfigureUrlsActivity.kt` file: +If these URLs are left empty, the user will be prompted to enter the URLs when the application starts. This configuration is managed in the `ConfigureUrlsActivity.kt` file:
@@ -157,7 +167,7 @@ If you leave them empty, the user will be prompted to enter the URLs when the ap When the user clicks the `Save` button, the `onSaveUrls()` method is called, which saves the URLs in the `Urls` object and finishes the activity, returning to the MainActivity: -```kotlin title="ConfigureUrlsActivity.kt" linenums="21" +```kotlin title="ConfigureUrlsActivity.kt" linenums="24" private fun onSaveUrls() { val serverUrl = binding.serverUrl.text.toString() val livekitUrl = binding.livekitUrl.text.toString() diff --git a/docs/tutorials/application-client/angular.md b/docs/tutorials/application-client/angular.md index 28deb4c..077d39c 100644 --- a/docs/tutorials/application-client/angular.md +++ b/docs/tutorials/application-client/angular.md @@ -85,8 +85,8 @@ type TrackInfo = { // (1)! participantIdentity: string; }; -// For local development, leave these variables empty -// For production, configure them with correct URLs depending on your deployment +// When running OpenVidu locally, leave these variables empty +// For other deployment type, configure them with correct URLs depending on your deployment var APPLICATION_SERVER_URL = ''; // (2)! var LIVEKIT_URL = ''; // (3)! @@ -112,7 +112,7 @@ export class AppComponent implements OnDestroy { } configureUrls() { - // If APPLICATION_SERVER_URL is not configured, use default value from local development + // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment if (!APPLICATION_SERVER_URL) { if (window.location.hostname === 'localhost') { APPLICATION_SERVER_URL = 'http://localhost:6080/'; @@ -121,7 +121,7 @@ export class AppComponent implements OnDestroy { } } - // If LIVEKIT_URL is not configured, use default value from local development + // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment if (!LIVEKIT_URL) { if (window.location.hostname === 'localhost') { LIVEKIT_URL = 'ws://localhost:7880/'; diff --git a/docs/tutorials/application-client/ionic.md b/docs/tutorials/application-client/ionic.md index dc49db5..54cda1c 100644 --- a/docs/tutorials/application-client/ionic.md +++ b/docs/tutorials/application-client/ionic.md @@ -113,6 +113,16 @@ To run the client application tutorial, you need [Node](https://nodejs.org/en/do
+

+ +
+ + This screen allows you to configure the URLs of the application server and the LiveKit server. You need to set them up for requesting tokens to your application server and connecting to the LiveKit server. + + Once you have configured the URLs, you can join a video call room by providing a room name and a user name. After joining the room, you will be able to see your own video and audio tracks, as well as the video and audio tracks of the other participants in the room. + +
+

@@ -143,8 +153,8 @@ type TrackInfo = { // (1)! participantIdentity: string; }; -// For local development launching app in web browser, leave these variables empty -// For production or when launching app in a mobile device, configure them with correct URLs +// When running OpenVidu locally and launching app in web browser, leave these variables empty +// For other deployment type or when launching app in a mobile device, configure them with correct URLs // If you leave them empty when launching app in a mobile device, the user will be prompted to enter the URLs var APPLICATION_SERVER_URL = ''; // (2)! var LIVEKIT_URL = ''; // (3)! @@ -179,8 +189,8 @@ export class AppComponent implements OnDestroy { }); urlsForm = new FormGroup({ // (6)! - serverUrl: new FormControl('', Validators.required), - livekitUrl: new FormControl('', Validators.required), + serverUrl: new FormControl(APPLICATION_SERVER_URL, Validators.required), + livekitUrl: new FormControl(LIVEKIT_URL, Validators.required), }); room = signal(undefined); // (7)! @@ -209,7 +219,7 @@ export class AppComponent implements OnDestroy { } } else { // If APPLICATION_SERVER_URL is not configured and app is not launched in a mobile device, - // use default value from local development + // use default value from OpenVidu Local deployment if (!APPLICATION_SERVER_URL) { if (window.location.hostname === 'localhost') { APPLICATION_SERVER_URL = 'http://localhost:6080/'; @@ -219,7 +229,7 @@ export class AppComponent implements OnDestroy { } // If LIVEKIT_URL is not configured and app is not launched in a mobile device, - // use default value from local development + // use default value from OpenVidu Local deployment if (!LIVEKIT_URL) { if (window.location.hostname === 'localhost') { LIVEKIT_URL = 'ws://localhost:7880/'; @@ -257,9 +267,9 @@ The `app.component.ts` file defines the following variables: ### Configuring URLs -For local development launching the app in a web browser, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for production or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment. +When [running OpenVidu locally](#run-openvidu-locally) and launching the app in a web browser, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for other deployment type or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment. -In case you are [running OpenVidu locally](#run-openvidu-locally), you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.). +In case you are [running OpenVidu locally](#run-openvidu-locally) and launching the app in a mobile device, you can set the `applicationServerUrl` to [`https://xxx-yyy-zzz-www.openvidu-local.dev:6443`](https://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"} and the `livekitUrl` to [`wss://xxx-yyy-zzz-www.openvidu-local.dev:7443`](wss://xxx-yyy-zzz-www.openvidu-local.dev:5443){target="\_blank"}, where `xxx-yyy-zzz-www` part of the domain is the LAN private IP address of the machine running OpenVidu, with dashes (-) instead of dots (.). If you leave them empty and app is launched in a mobile device, the user will be prompted to enter the URLs when the application starts: diff --git a/docs/tutorials/application-client/javascript.md b/docs/tutorials/application-client/javascript.md index 0e4ff7a..d309278 100644 --- a/docs/tutorials/application-client/javascript.md +++ b/docs/tutorials/application-client/javascript.md @@ -78,8 +78,8 @@ Then, you can use the `LivekitClient` object in your JavaScript code by referenc Now let's see the code of the `app.js` file: ```javascript title="app.js" linenums="1" -// For local development, leave these variables empty -// For production, configure them with correct URLs depending on your deployment +// When running OpenVidu locally, leave these variables empty +// For other deployment type, configure them with correct URLs depending on your deployment var APPLICATION_SERVER_URL = ""; // (1)! var LIVEKIT_URL = ""; // (2)! configureUrls(); @@ -88,7 +88,7 @@ const LivekitClient = window.LivekitClient; // (3)! var room; // (4)! function configureUrls() { - // If APPLICATION_SERVER_URL is not configured, use default value from local development + // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment if (!APPLICATION_SERVER_URL) { if (window.location.hostname === "localhost") { APPLICATION_SERVER_URL = "http://localhost:6080/"; @@ -97,7 +97,7 @@ function configureUrls() { } } - // If LIVEKIT_URL is not configured, use default value from local development + // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment if (!LIVEKIT_URL) { if (window.location.hostname === "localhost") { LIVEKIT_URL = "ws://localhost:7880/"; diff --git a/docs/tutorials/application-client/react.md b/docs/tutorials/application-client/react.md index bb0e976..d1049a1 100644 --- a/docs/tutorials/application-client/react.md +++ b/docs/tutorials/application-client/react.md @@ -84,14 +84,14 @@ type TrackInfo = { // (1)! participantIdentity: string; }; -// For local development, leave these variables empty -// For production, configure them with correct URLs depending on your deployment +// When running OpenVidu locally, leave these variables empty +// For other deployment type, configure them with correct URLs depending on your deployment let APPLICATION_SERVER_URL = ""; // (2)! let LIVEKIT_URL = ""; // (3)! configureUrls(); function configureUrls() { - // If APPLICATION_SERVER_URL is not configured, use default value from local development + // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment if (!APPLICATION_SERVER_URL) { if (window.location.hostname === "localhost") { APPLICATION_SERVER_URL = "http://localhost:6080/"; @@ -100,7 +100,7 @@ function configureUrls() { } } - // If LIVEKIT_URL is not configured, use default value from local development + // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment if (!LIVEKIT_URL) { if (window.location.hostname === "localhost") { LIVEKIT_URL = "ws://localhost:7880/"; diff --git a/docs/tutorials/application-client/vue.md b/docs/tutorials/application-client/vue.md index dd6955b..63fb24a 100644 --- a/docs/tutorials/application-client/vue.md +++ b/docs/tutorials/application-client/vue.md @@ -85,14 +85,14 @@ type TrackInfo = { participantIdentity: string; }; -// For local development, leave these variables empty -// For production, configure them with correct URLs depending on your deployment +// When running OpenVidu locally, leave these variables empty +// For other deployment type, configure them with correct URLs depending on your deployment let APPLICATION_SERVER_URL = ""; // (2)! let LIVEKIT_URL = ""; // (3)! configureUrls(); function configureUrls() { - // If APPLICATION_SERVER_URL is not configured, use default value from local development + // If APPLICATION_SERVER_URL is not configured, use default value from OpenVidu Local deployment if (!APPLICATION_SERVER_URL) { if (window.location.hostname === "localhost") { APPLICATION_SERVER_URL = "http://localhost:6080/"; @@ -101,7 +101,7 @@ function configureUrls() { } } - // If LIVEKIT_URL is not configured, use default value from local development + // If LIVEKIT_URL is not configured, use default value from OpenVidu Local deployment if (!LIVEKIT_URL) { if (window.location.hostname === "localhost") { LIVEKIT_URL = "ws://localhost:7880/"; diff --git a/docs/tutorials/shared/configure-urls.md b/docs/tutorials/shared/configure-urls.md index 5303ee1..0e5c231 100644 --- a/docs/tutorials/shared/configure-urls.md +++ b/docs/tutorials/shared/configure-urls.md @@ -1,3 +1,3 @@ !!! warning "Configure the URLs" - For local development, leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment. \ No newline at end of file + When [running OpenVidu locally](#run-openvidu-locally), leave `APPLICATION_SERVER_URL` and `LIVEKIT_URL` variables empty. The function `configureUrls()` will automatically configure them with default values. However, for other deployment type, you should configure these variables with the correct URLs depending on your deployment. \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 038c002..684d2ee 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -14,8 +14,8 @@ nav: - Vue: tutorials/application-client/vue.md - Electron: tutorials/application-client/electron.md - Ionic: tutorials/application-client/ionic.md - - iOS: tutorials/application-client/ios.md - Android: tutorials/application-client/android.md + - iOS: tutorials/application-client/ios.md - Application Server: - tutorials/application-server/index.md - Node.js: tutorials/application-server/node.md