From d46837105d1e0b239d343a2fbbedfc59090046da Mon Sep 17 00:00:00 2001 From: juancarmore Date: Wed, 24 Apr 2024 12:15:11 +0200 Subject: [PATCH] Update ionic tutorial to use local deployment --- openvidu-ionic/Caddyfile | 9 --- .../android/app/capacitor.build.gradle | 5 +- .../android/capacitor.settings.gradle | 13 +++- openvidu-ionic/capacitor.config.ts | 11 --- openvidu-ionic/package-lock.json | 59 ++++++++-------- openvidu-ionic/package.json | 9 ++- openvidu-ionic/scripts/mobile_run.sh | 64 ------------------ openvidu-ionic/src/app/home/home.page.ts | 67 ++++++++++--------- .../src/environments/environment.prod.ts | 2 - .../src/environments/environment.ts | 4 -- 10 files changed, 85 insertions(+), 158 deletions(-) delete mode 100644 openvidu-ionic/Caddyfile delete mode 100755 openvidu-ionic/scripts/mobile_run.sh diff --git a/openvidu-ionic/Caddyfile b/openvidu-ionic/Caddyfile deleted file mode 100644 index 537478d9..00000000 --- a/openvidu-ionic/Caddyfile +++ /dev/null @@ -1,9 +0,0 @@ - -{$IP_ADDRESS}:5001 { - reverse_proxy http://localhost:5000 - @ws { - header Connection *Upgrade* - header Upgrade websocket - } - reverse_proxy @ws http://localhost:7880 -} diff --git a/openvidu-ionic/android/app/capacitor.build.gradle b/openvidu-ionic/android/app/capacitor.build.gradle index e552d498..1c2a7a88 100644 --- a/openvidu-ionic/android/app/capacitor.build.gradle +++ b/openvidu-ionic/android/app/capacitor.build.gradle @@ -9,7 +9,10 @@ android { apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle" dependencies { - implementation project(':jcesarmobile-ssl-skip') + implementation project(':capacitor-app') + implementation project(':capacitor-haptics') + implementation project(':capacitor-keyboard') + implementation project(':capacitor-status-bar') } diff --git a/openvidu-ionic/android/capacitor.settings.gradle b/openvidu-ionic/android/capacitor.settings.gradle index 87763e6a..bd358734 100644 --- a/openvidu-ionic/android/capacitor.settings.gradle +++ b/openvidu-ionic/android/capacitor.settings.gradle @@ -2,5 +2,14 @@ include ':capacitor-android' project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor') -include ':jcesarmobile-ssl-skip' -project(':jcesarmobile-ssl-skip').projectDir = new File('../node_modules/@jcesarmobile/ssl-skip/android') +include ':capacitor-app' +project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android') + +include ':capacitor-haptics' +project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android') + +include ':capacitor-keyboard' +project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android') + +include ':capacitor-status-bar' +project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android') diff --git a/openvidu-ionic/capacitor.config.ts b/openvidu-ionic/capacitor.config.ts index b881e103..777e77ad 100644 --- a/openvidu-ionic/capacitor.config.ts +++ b/openvidu-ionic/capacitor.config.ts @@ -1,20 +1,9 @@ import { CapacitorConfig } from '@capacitor/cli'; -import {environment} from './src/environments/environment'; const config: CapacitorConfig = { appId: 'io.ionic.starter', appName: 'openvidu-ionic', webDir: 'www', - }; -if (environment.externalIp) { - - // Android configuration - config.android = config.android || {}; - config.android.includePlugins = config.android.includePlugins || []; - config.android.includePlugins.push('@jcesarmobile/ssl-skip', 'cordova-plugin-android-permissions'); - -} - export default config; diff --git a/openvidu-ionic/package-lock.json b/openvidu-ionic/package-lock.json index 44194848..7d0ad5cf 100644 --- a/openvidu-ionic/package-lock.json +++ b/openvidu-ionic/package-lock.json @@ -28,7 +28,7 @@ "@ionic/angular": "^7.0.0", "cordova-plugin-android-permissions": "^1.1.5", "ionicons": "^7.0.0", - "livekit-client": "^1.14.4", + "livekit-client": "^2.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -45,7 +45,6 @@ "@angular/language-service": "^16.0.0", "@capacitor/cli": "5.5.0", "@ionic/angular-toolkit": "^9.0.0", - "@jcesarmobile/ssl-skip": "^0.2.0", "@types/jasmine": "~4.3.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", @@ -2602,9 +2601,9 @@ } }, "node_modules/@bufbuild/protobuf": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.4.2.tgz", - "integrity": "sha512-JyEH8Z+OD5Sc2opSg86qMHn1EM1Sa+zj/Tc0ovxdwk56ByVNONJSabuCUbLQp+eKN3rWNfrho0X+3SEqEPXIow==" + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.9.0.tgz", + "integrity": "sha512-W7gp8Q/v1NlCZLsv8pQ3Y0uCu/SHgXOVFK+eUluUKWXmsb6VHkpNx0apdOWWcDbB9sJoKeP8uPrjmehJz6xETQ==" }, "node_modules/@capacitor/android": { "version": "5.5.1", @@ -3557,12 +3556,6 @@ "node": ">=8" } }, - "node_modules/@jcesarmobile/ssl-skip": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@jcesarmobile/ssl-skip/-/ssl-skip-0.2.0.tgz", - "integrity": "sha512-hkhOM5+qPm5xzOYcbUODzYTZKyATEM3qixzUL1gJsJckZ5wAUQxyZJFM3hcUANv8fV8cONfX7A+d/DJpzVvM+Q==", - "dev": true - }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -3627,6 +3620,14 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@livekit/protocol": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.13.0.tgz", + "integrity": "sha512-M3U36VgRfb0VutWG6pnozXusL+mkYstbCctTLUyCIyye36Ztv1wA9zYpyYvz7VnsgmCn+g/g0eB2rnAkTVwcnA==", + "dependencies": { + "@bufbuild/protobuf": "^1.7.2" + } + }, "node_modules/@ngtools/webpack": { "version": "16.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.10.tgz", @@ -11122,11 +11123,11 @@ } }, "node_modules/livekit-client": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-1.15.0.tgz", - "integrity": "sha512-uyp1sIFeOdezYBn9J0FnrMuG8uPgR4fwWPENodNisJC999xJwTSV3xVLX76AAnfky3IJoJehU4gY2UqoyXjm2w==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.1.0.tgz", + "integrity": "sha512-nJwfRKw1Pafd2napk66l30dlBjsv1VZ+na3mzNezcAFAYT2lQ4Gch57TdbMBDYo+QfrZ98s+kuZzsFhBwM5rqw==", "dependencies": { - "@bufbuild/protobuf": "^1.3.0", + "@livekit/protocol": "1.13.0", "events": "^3.3.0", "loglevel": "^1.8.0", "sdp-transform": "^2.14.1", @@ -19111,9 +19112,9 @@ } }, "@bufbuild/protobuf": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.4.2.tgz", - "integrity": "sha512-JyEH8Z+OD5Sc2opSg86qMHn1EM1Sa+zj/Tc0ovxdwk56ByVNONJSabuCUbLQp+eKN3rWNfrho0X+3SEqEPXIow==" + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.9.0.tgz", + "integrity": "sha512-W7gp8Q/v1NlCZLsv8pQ3Y0uCu/SHgXOVFK+eUluUKWXmsb6VHkpNx0apdOWWcDbB9sJoKeP8uPrjmehJz6xETQ==" }, "@capacitor/android": { "version": "5.5.1", @@ -19719,12 +19720,6 @@ "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", "dev": true }, - "@jcesarmobile/ssl-skip": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@jcesarmobile/ssl-skip/-/ssl-skip-0.2.0.tgz", - "integrity": "sha512-hkhOM5+qPm5xzOYcbUODzYTZKyATEM3qixzUL1gJsJckZ5wAUQxyZJFM3hcUANv8fV8cONfX7A+d/DJpzVvM+Q==", - "dev": true - }, "@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -19780,6 +19775,14 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "@livekit/protocol": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.13.0.tgz", + "integrity": "sha512-M3U36VgRfb0VutWG6pnozXusL+mkYstbCctTLUyCIyye36Ztv1wA9zYpyYvz7VnsgmCn+g/g0eB2rnAkTVwcnA==", + "requires": { + "@bufbuild/protobuf": "^1.7.2" + } + }, "@ngtools/webpack": { "version": "16.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.10.tgz", @@ -25367,11 +25370,11 @@ "dev": true }, "livekit-client": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-1.15.0.tgz", - "integrity": "sha512-uyp1sIFeOdezYBn9J0FnrMuG8uPgR4fwWPENodNisJC999xJwTSV3xVLX76AAnfky3IJoJehU4gY2UqoyXjm2w==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.1.0.tgz", + "integrity": "sha512-nJwfRKw1Pafd2napk66l30dlBjsv1VZ+na3mzNezcAFAYT2lQ4Gch57TdbMBDYo+QfrZ98s+kuZzsFhBwM5rqw==", "requires": { - "@bufbuild/protobuf": "^1.3.0", + "@livekit/protocol": "1.13.0", "events": "^3.3.0", "loglevel": "^1.8.0", "sdp-transform": "^2.14.1", diff --git a/openvidu-ionic/package.json b/openvidu-ionic/package.json index efeef31c..b672414c 100644 --- a/openvidu-ionic/package.json +++ b/openvidu-ionic/package.json @@ -4,11 +4,11 @@ "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { - "start": "npx ionic serve --port=5080", + "start": "npx ionic serve --port=5080 --external -- --disable-host-check", "build": "npx ionic build", "watch": "ng build --watch --configuration development", - "android": "./scripts/mobile_run.sh android", - "ios": "./scripts/mobile_run.sh ios", + "android": "npx ionic cap sync android && npx ionic cap run android", + "ios": "npx ionic cap sync ios && npx ionic cap run ios", "sync": "npx ionic capacitor sync", "build:android": "npx ionic capacitor build android --no-open && cd android && ./gradlew assembleDebug && ./gradlew assembleRelease", "copy:android": "cp ./android/app/build/outputs/apk/debug/app-debug.apk /opt/openvidu/android/openvidu-ionic.apk" @@ -35,7 +35,7 @@ "@ionic/angular": "^7.0.0", "cordova-plugin-android-permissions": "^1.1.5", "ionicons": "^7.0.0", - "livekit-client": "^1.14.4", + "livekit-client": "^2.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -52,7 +52,6 @@ "@angular/language-service": "^16.0.0", "@capacitor/cli": "5.5.0", "@ionic/angular-toolkit": "^9.0.0", - "@jcesarmobile/ssl-skip": "^0.2.0", "@types/jasmine": "~4.3.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", diff --git a/openvidu-ionic/scripts/mobile_run.sh b/openvidu-ionic/scripts/mobile_run.sh deleted file mode 100755 index a3e36844..00000000 --- a/openvidu-ionic/scripts/mobile_run.sh +++ /dev/null @@ -1,64 +0,0 @@ -#!/bin/bash - -# Check if an argument is provided -if [ -z "$1" ]; then - echo "Please provide the PLATFORM name." - echo "Example: ./android_run.sh " - exit 1 -fi - -PLATFORM=$1 -ENV_FILE="src/environments/environment.ts" - -# Getting the operating system -os_name=$(uname) - -case "$os_name" in - "Linux") - # Commands for Linux - LOCAL_IP=$(hostname -I | awk '{print $1}') - sed -i "s/\(externalIp:\s*'\)[^']*/\1$LOCAL_IP/" $ENV_FILE - ;; - "Darwin") - # Commands for macOS - for interface in $(ifconfig -l); do - ip=$(ipconfig getifaddr $interface) - if [ -n "$ip" ]; then - LOCAL_IP=$ip - break - fi - done - sed -i '' "s/externalIp: .*/externalIp: '$LOCAL_IP'/g" $ENV_FILE - ;; - *) - # Windows OS - echo "Recognized $os_name as operating system. The ip must be set manually." - read -p "Insert your local ip " ip_address - LOCAL_IP=$ip_address - # Requesting the user to set the ip manually and wait for the user to press enter - echo "Please set your local ip in $ENV_FILE" - echo "Example:" - echo "" - echo "export const environment = {" - echo " production: false," - echo " externalIp: 'XXX.XXX.X.XX' <--- SET YOUR IP HERE" - echo "};" - read -p "Press Enter to continue..." - ;; -esac - - if [ -z "$LOCAL_IP" ]; then - echo "Cannot get your local IP address." - exit 1 -fi - -if [ "$(docker ps -q -f ancestor=caddy)" ]; then - echo "Container caddy is running." -else - echo "Container caddy is not running. Launching it..." - docker run -d --network=host -v $PWD/Caddyfile:/etc/caddy/Caddyfile -e IP_ADDRESS=$LOCAL_IP caddy -fi -echo "Your local ip is $LOCAL_IP" -echo "Setting up your mobile environment for developing OpenVidu..." -npm run build -npx ionic cap run $PLATFORM -c development --external --disable-host-check --public-host=$LOCAL_IP --ssl diff --git a/openvidu-ionic/src/app/home/home.page.ts b/openvidu-ionic/src/app/home/home.page.ts index a17b46e9..30bd2d80 100644 --- a/openvidu-ionic/src/app/home/home.page.ts +++ b/openvidu-ionic/src/app/home/home.page.ts @@ -11,7 +11,6 @@ import { HttpClient } from '@angular/common/http'; import { AlertController, Platform } from '@ionic/angular'; import { lastValueFrom, take } from 'rxjs'; import { AndroidPermissions } from '@awesome-cordova-plugins/android-permissions/ngx'; -import { environment } from 'src/environments/environment'; @Component({ selector: 'app-home', @@ -19,8 +18,11 @@ import { environment } from 'src/environments/environment'; styleUrls: ['home.page.scss'], }) export class HomePage { - APPLICATION_SERVER_URL = environment.applicationServerUrl; - WS_LIVEKIT_URL = environment.wsLivekitUrl; + // 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 + APPLICATION_SERVER_URL = ''; + LIVEKIT_URL = ''; + private IS_DEVICE_DEV_MODE = false; // OpenVidu objects @@ -56,22 +58,36 @@ export class HomePage { } ngOnInit() { - /** - * WARNING!! To make the mobile development easier, this code allows - * using your local IP address for communicating with the backend. - * For production uses, the server should be accessible from the Internet - * and the code below should be removed. - */ - if (this.platform.is('hybrid') && environment.externalIp) { - this.IS_DEVICE_DEV_MODE = true; - this.prepareForDeviceDevelopment(); - } + this.IS_DEVICE_DEV_MODE = this.platform.is('hybrid'); + this.generateUrls(); console.log('IS_DEVICE_DEV_MODE: ', this.IS_DEVICE_DEV_MODE); console.log('APPLICATION_SERVER_URL: ', this.APPLICATION_SERVER_URL); - console.log('WS_LIVEKIT_URL: ', this.WS_LIVEKIT_URL); + console.log('LIVEKIT_URL: ', this.LIVEKIT_URL); } + generateUrls() { + // If APPLICATION_SERVER_URL is not configured and app is not launched in device dev mode, + // use default value from local development + if (!this.APPLICATION_SERVER_URL && !this.IS_DEVICE_DEV_MODE) { + if (window.location.hostname === 'localhost') { + this.APPLICATION_SERVER_URL = 'http://localhost:6080/'; + } else { + this.APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/'; + } + } + + // If LIVEKIT_URL is not configured and app is not launched in device dev mode, + // use default value from local development + if (!this.LIVEKIT_URL && !this.IS_DEVICE_DEV_MODE) { + if (window.location.hostname === 'localhost') { + this.LIVEKIT_URL = 'ws://localhost:7880/'; + } else { + this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/'; + } + } + } + ngOnDestroy() { // On component destroyed leave room this.leaveRoom(); @@ -115,7 +131,7 @@ export class HomePage { // First param is the LiveKit server URL. Second param is the access token - await this.room.connect(this.WS_LIVEKIT_URL, token); + await this.room.connect(this.LIVEKIT_URL, token); // --- 5) Requesting and Checking Android Permissions if (this.platform.is('hybrid') && this.platform.is('android')) { @@ -188,9 +204,9 @@ export class HomePage { // Find in remote participants the participant with the track and return his name if (!this.room) return; - const remoteParticipant = Array.from(this.room.participants.values()).find( + const remoteParticipant = Array.from(this.room.remoteParticipants.values()).find( (p) => { - return p.getTracks().some((t) => t.trackSid === trackSid); + return p.getTrackPublications().some((t) => t.trackSid === trackSid); } ); return remoteParticipant?.identity; @@ -248,7 +264,7 @@ export class HomePage { { name: 'websocket', type: 'text', - value: this.WS_LIVEKIT_URL, + value: this.LIVEKIT_URL, placeholder: 'WS URL', id: 'ws-input', }, @@ -265,7 +281,7 @@ export class HomePage { id: 'ok-btn', handler: (data) => { this.APPLICATION_SERVER_URL = data.url; - this.WS_LIVEKIT_URL = data.websocket; + this.LIVEKIT_URL = data.websocket; }, }, ], @@ -322,19 +338,6 @@ export class HomePage { this.cameraSelected = this.cameras[0]; } - private prepareForDeviceDevelopment() { - /** - * WARNING!! To make the mobile development easier, this code allows - * using your local IP address for communicating with the backend. - * For production uses, the server should be accessible from the Internet - * and the code below should be removed. - */ - console.warn('Your local IP address: ', environment.externalIp); - // Pointing to our proxy server through https/wss and our local IP address - this.APPLICATION_SERVER_URL = `https://${environment.externalIp}:5001/`; - this.WS_LIVEKIT_URL = `wss://${environment.externalIp}:5001/`; - } - /** * -------------------------------------------- * GETTING A TOKEN FROM YOUR APPLICATION SERVER diff --git a/openvidu-ionic/src/environments/environment.prod.ts b/openvidu-ionic/src/environments/environment.prod.ts index 3c12833e..c9669790 100644 --- a/openvidu-ionic/src/environments/environment.prod.ts +++ b/openvidu-ionic/src/environments/environment.prod.ts @@ -1,5 +1,3 @@ export const environment = { production: true, - applicationServerUrl: '', - wsLivekitUrl: '', }; diff --git a/openvidu-ionic/src/environments/environment.ts b/openvidu-ionic/src/environments/environment.ts index e76c46ff..cde8b827 100644 --- a/openvidu-ionic/src/environments/environment.ts +++ b/openvidu-ionic/src/environments/environment.ts @@ -4,8 +4,4 @@ export const environment = { production: false, - applicationServerUrl: 'http://localhost:6080/', - wsLivekitUrl: 'ws://localhost:7880/', - // Only for local development with a real device. This will be filled automatically running 'npm dev:android' or 'npm dev:ios' - externalIp: '' };