Update ionic tutorial to use local deployment
This commit is contained in:
juancarmore
parent
fd0f9a13dc
commit
d46837105d
@ -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
|
||||
}
|
||||
@ -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')
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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;
|
||||
|
||||
59
openvidu-ionic/package-lock.json
generated
59
openvidu-ionic/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 <PLATFORM>"
|
||||
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
|
||||
@ -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
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
applicationServerUrl: '',
|
||||
wsLivekitUrl: '',
|
||||
};
|
||||
|
||||
@ -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: ''
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user