diff --git a/docs/assets/images/application-clients/configure-urls-ionic.png b/docs/assets/images/application-clients/configure-urls-ionic.png new file mode 100644 index 0000000..a35f85a Binary files /dev/null and b/docs/assets/images/application-clients/configure-urls-ionic.png differ diff --git a/docs/assets/images/application-clients/join-ionic-device.png b/docs/assets/images/application-clients/join-ionic-device.png index 880c0d0..92d5ced 100644 Binary files a/docs/assets/images/application-clients/join-ionic-device.png and b/docs/assets/images/application-clients/join-ionic-device.png differ diff --git a/docs/assets/images/application-clients/room-ionic-device.png b/docs/assets/images/application-clients/room-ionic-device.png index 7271ad0..47dfa00 100644 Binary files a/docs/assets/images/application-clients/room-ionic-device.png and b/docs/assets/images/application-clients/room-ionic-device.png differ diff --git a/docs/tutorials/application-client/ionic.md b/docs/tutorials/application-client/ionic.md index c858dd7..dc49db5 100644 --- a/docs/tutorials/application-client/ionic.md +++ b/docs/tutorials/application-client/ionic.md @@ -89,7 +89,7 @@ To run the client application tutorial, you need [Node](https://nodejs.org/en/do !!! warning "Requirements" - Before running the application on a mobile device, make sure that the device is connected to the same network as your PC and the mobile is connected to the PC via USB. + Before running the application on a mobile device, make sure that the device is connected to the same network as your PC and the mobile is connected to the PC via USB or Wi-Fi. === ":fontawesome-brands-android:{.icon .lg-icon .tab-icon} Android" @@ -113,9 +113,9 @@ To run the client application tutorial, you need [Node](https://nodejs.org/en/do
-

+

-

+

@@ -137,14 +137,15 @@ npm install livekit-client Now let's see the code of the `app.component.ts` file: -```typescript title="app.component.ts" linenums="36" +```typescript title="app.component.ts" linenums="33" type TrackInfo = { // (1)! trackPublication: RemoteTrackPublication; participantIdentity: string; }; // For local development launching app in web browser, leave these variables empty -// For production or when launching app in device, configure them with correct URLs +// For production 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)! @@ -163,8 +164,6 @@ var LIVEKIT_URL = ''; // (3)! IonTitle, IonButtons, IonButton, - IonFab, - IonFabButton, IonIcon, IonContent, IonList, @@ -179,11 +178,18 @@ export class AppComponent implements OnDestroy { participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required), }); - room = signal(undefined); // (6)! - localTrack = signal(undefined); // (7)! - remoteTracksMap = signal>(new Map()); // (8)! + urlsForm = new FormGroup({ // (6)! + serverUrl: new FormControl('', Validators.required), + livekitUrl: new FormControl('', Validators.required), + }); + + room = signal(undefined); // (7)! + localTrack = signal(undefined); // (8)! + remoteTracksMap = signal>(new Map()); // (9)! - constructor(private httpClient: HttpClient) { + settingUrls = signal(false); // (10)! + + constructor(private httpClient: HttpClient, private platform: Platform) { this.configureUrls(); addIcons({ logoGithub, @@ -193,28 +199,28 @@ export class AppComponent implements OnDestroy { } configureUrls() { - const deviceMode = this.platform.is('hybrid'); - - // If APPLICATION_SERVER_URL is not configured and app is not launched in device mode, - // use default value from local development - if (!APPLICATION_SERVER_URL) { - if (deviceMode) { - APPLICATION_SERVER_URL = 'https://{YOUR-LAN-IP}.openvidu-local.dev:6443/'; - } else { + const mobileMode = this.platform.is('hybrid'); + + // If URLs are not configured and app is launched in a mobile device, + // prompt the user to configure them + if (mobileMode) { + if (!APPLICATION_SERVER_URL || !LIVEKIT_URL) { + this.settingUrls.set(true); + } + } else { + // If APPLICATION_SERVER_URL is not configured and app is not launched in a mobile device, + // use default value from local development + if (!APPLICATION_SERVER_URL) { if (window.location.hostname === 'localhost') { APPLICATION_SERVER_URL = 'http://localhost:6080/'; } else { APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/'; } } - } - // If LIVEKIT_URL is not configured and app is not launched in device mode, - // use default value from local development - if (!LIVEKIT_URL) { - if (deviceMode) { - LIVEKIT_URL = 'wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/'; - } else { + // If LIVEKIT_URL is not configured and app is not launched in a mobile device, + // use default value from local development + if (!LIVEKIT_URL) { if (window.location.hostname === 'localhost') { LIVEKIT_URL = 'ws://localhost:7880/'; } else { @@ -230,24 +236,38 @@ export class AppComponent implements OnDestroy { 3. The URL of the LiveKit server. 4. Angular component decorator that defines the `AppComponent` class and associates the HTML and CSS files with it. 5. The `roomForm` object, which is a form group that contains the `roomName` and `participantName` fields. These fields are used to join a video call room. -6. The room object, which represents the video call room. -7. The local video track, which represents the user's camera. -8. Map that links track SIDs with `TrackInfo` objects. This map is used to store remote tracks and their associated participant identities. +6. The `urlsForm` object, which is a form group that contains the `serverUrl` and `livekitUrl` fields. These fields are used to configure the application server and LiveKit URLs. +7. The room object, which represents the video call room. +8. The local video track, which represents the user's camera. +9. Map that links track SIDs with `TrackInfo` objects. This map is used to store remote tracks and their associated participant identities. +10. A boolean flag that indicates whether the user is configuring the application server and LiveKit URLs. The `app.component.ts` file defines the following variables: - `APPLICATION_SERVER_URL`: 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. - `LIVEKIT_URL`: The URL of the LiveKit server. This variable is used to connect to the LiveKit server and interact with the video call room. - `roomForm`: A form group that contains the `roomName` and `participantName` fields. These fields are used to join a video call room. +- `urlsForm`: A form group that contains the `serverUrl` and `livekitUrl` fields. These fields are used to configure the application server and LiveKit URLs. - `room`: The room object, which represents the video call room. - `localTrack`: The local video track, which represents the user's camera. - `remoteTracksMap`: A map that links track SIDs with `TrackInfo` objects. This map is used to store remote tracks and their associated participant identities. +- `settingUrls`: A boolean flag that indicates whether the user is configuring the application server and LiveKit URLs. -!!! warning "Configure the 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. +### Configuring URLs - You can also configure these variables once the application has been launched by clicking on the settings button in the bottom right corner of the screen. +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. + +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 and app is launched in a mobile device, the user will be prompted to enter the URLs when the application starts: + +
+ +

+ +
--- @@ -255,7 +275,7 @@ The `app.component.ts` file defines the following variables: After the user specifies their participant name and the name of the room they want to join, when they click the `Join` button, the `joinRoom()` method is called: -```typescript title="app.component.ts" linenums="166" +```typescript title="app.component.ts" linenums="131" async joinRoom() { // Initialize a new Room object const room = new Room(); @@ -339,7 +359,7 @@ The `joinRoom()` method performs the following actions: 3. It retrieves the room name and participant name from the form. 4. It requests a token from the application server using the room name and participant name. This is done by calling the `getToken()` method: - ```typescript title="app.component.ts" linenums="232" + ```typescript title="app.component.ts" linenums="197" /** * -------------------------------------------- * GETTING A TOKEN FROM YOUR APPLICATION SERVER @@ -372,7 +392,7 @@ The `joinRoom()` method performs the following actions: In order to display participants' video and audio tracks, the `app.component.html` file integrates the `VideoComponent` and `AudioComponent`. -```html title="app.component.html" linenums="73" +```html title="app.component.html" linenums="108"
@if (localTrack()) {