From fd0f9a13dc3c118ca8bc232cdfcf3509790fd512 Mon Sep 17 00:00:00 2001 From: juancarmore Date: Tue, 23 Apr 2024 01:40:39 +0200 Subject: [PATCH] Update server ports and Livekit URLs in Vue, Electron and Ionic tutorials --- openvidu-electron/src/index.js | 34 ++---------- openvidu-ionic/package.json | 2 +- openvidu-ionic/src/app/home/home.page.ts | 31 ----------- .../src/environments/environment.ts | 2 +- openvidu-vue/package.json | 2 +- openvidu-vue/src/App.vue | 53 +++++++++---------- 6 files changed, 32 insertions(+), 92 deletions(-) diff --git a/openvidu-electron/src/index.js b/openvidu-electron/src/index.js index 19b6dd08..8f9413e2 100644 --- a/openvidu-electron/src/index.js +++ b/openvidu-electron/src/index.js @@ -10,6 +10,10 @@ var myRoomName; var isScreenShared = false; var screenSharePublication; +// Configure this constants with correct URLs depending on your deployment +const APPLICATION_SERVER_URL = 'http://localhost:6080/'; +const LIVEKIT_URL = 'ws://localhost:7880/'; + ipcRenderer.on('screen-share-ready', async (event, sourceId) => { if (sourceId) { try { @@ -67,9 +71,8 @@ async function joinRoom() { // Get a token from the application backend const token = await getToken(myRoomName, myParticipantName); - const livekitUrl = getLivekitUrlFromMetadata(token); - await room.connect(livekitUrl, token); + await room.connect(LIVEKIT_URL, token); showRoom(); // --- 4) Publish your local tracks --- @@ -159,30 +162,6 @@ function openScreenShareModal() { win.loadURL(theUrl); } -function getLivekitUrlFromMetadata(token) { - if (!token) throw new Error('Trying to get metadata from an empty token'); - try { - const base64Url = token.split('.')[1]; - const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); - const jsonPayload = decodeURIComponent( - window - .atob(base64) - .split('') - .map((c) => { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }) - .join('') - ); - - const payload = JSON.parse(jsonPayload); - if (!payload?.metadata) throw new Error('Token does not contain metadata'); - const metadata = JSON.parse(payload.metadata); - return metadata.livekitUrl; - } catch (error) { - throw new Error('Error decoding and parsing token: ' + error); - } -} - /** * -------------------------------------------- * GETTING A TOKEN FROM YOUR APPLICATION SERVER @@ -196,9 +175,6 @@ function getLivekitUrlFromMetadata(token) { * access to the endpoints. * */ - -var APPLICATION_SERVER_URL = 'http://localhost:5000/'; - async function getToken(roomName, participantName) { try { const response = await axios.post( diff --git a/openvidu-ionic/package.json b/openvidu-ionic/package.json index 82097427..efeef31c 100644 --- a/openvidu-ionic/package.json +++ b/openvidu-ionic/package.json @@ -4,7 +4,7 @@ "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { - "start": "npx ionic serve", + "start": "npx ionic serve --port=5080", "build": "npx ionic build", "watch": "ng build --watch --configuration development", "android": "./scripts/mobile_run.sh android", diff --git a/openvidu-ionic/src/app/home/home.page.ts b/openvidu-ionic/src/app/home/home.page.ts index 27ee0656..a17b46e9 100644 --- a/openvidu-ionic/src/app/home/home.page.ts +++ b/openvidu-ionic/src/app/home/home.page.ts @@ -113,11 +113,6 @@ export class HomePage { this.myParticipantName ); - if (!this.IS_DEVICE_DEV_MODE) { - // Get the Livekit WebSocket URL from the token metadata if not in device dev mode - this.WS_LIVEKIT_URL = this.getLivekitUrlFromMetadata(token); - } - // First param is the LiveKit server URL. Second param is the access token await this.room.connect(this.WS_LIVEKIT_URL, token); @@ -327,32 +322,6 @@ export class HomePage { this.cameraSelected = this.cameras[0]; } - private getLivekitUrlFromMetadata(token: string): string { - if (!token) - throw new Error('Trying to get room metadata from an empty token'); - try { - const base64Url = token.split('.')[1]; - const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); - const jsonPayload = decodeURIComponent( - window - .atob(base64) - .split('') - .map((c) => { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }) - .join('') - ); - - const payload = JSON.parse(jsonPayload); - if (!payload?.metadata) - throw new Error('Token does not contain metadata'); - const metadata = JSON.parse(payload.metadata); - return metadata.livekitUrl; - } catch (error) { - throw new Error('Error decoding and parsing token: ' + error); - } - } - private prepareForDeviceDevelopment() { /** * WARNING!! To make the mobile development easier, this code allows diff --git a/openvidu-ionic/src/environments/environment.ts b/openvidu-ionic/src/environments/environment.ts index f174d4ad..e76c46ff 100644 --- a/openvidu-ionic/src/environments/environment.ts +++ b/openvidu-ionic/src/environments/environment.ts @@ -4,7 +4,7 @@ export const environment = { production: false, - applicationServerUrl: 'http://localhost:5000/', + 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: '' diff --git a/openvidu-vue/package.json b/openvidu-vue/package.json index 420b4c68..d0a7c234 100644 --- a/openvidu-vue/package.json +++ b/openvidu-vue/package.json @@ -3,7 +3,7 @@ "version": "2.27.0", "private": true, "scripts": { - "serve": "vite", + "serve": "vite --port 5080 --host", "build": "vite build", "preview": "vite preview", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", diff --git a/openvidu-vue/src/App.vue b/openvidu-vue/src/App.vue index 3bccd9ae..b6120f51 100644 --- a/openvidu-vue/src/App.vue +++ b/openvidu-vue/src/App.vue @@ -74,7 +74,28 @@ import { Room, RoomEvent } from 'livekit-client' axios.defaults.headers.post['Content-Type'] = 'application/json' -const APPLICATION_SERVER_URL = 'http://localhost:5000/' +// For local development, leave these variables empty +// For production, configure them with correct URLs depending on your deployment +let APPLICATION_SERVER_URL = '' +let LIVEKIT_URL = '' + +// If APPLICATION_SERVER_URL is not configured, 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, use default value from local development +if (!LIVEKIT_URL) { + if (window.location.hostname === 'localhost') { + LIVEKIT_URL = 'ws://localhost:7880/' + } else { + LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/' + } +} export default { name: 'App', @@ -123,11 +144,9 @@ export default { // Get a token from the application backend this.getToken(this.myRoomName, this.myParticipantName).then(async (token) => { - const livekitUrl = this.getLivekitUrlFromMetadata(token) - // First param is the token. Second param can be retrieved by every user on event - // 'streamCreated' (property Stream.connection.data), and will be appended to DOM as the user's nickname + // First param is the LiveKit server URL. Second param is the access token try { - await this.room.connect(livekitUrl, token) + await this.room.connect(LIVEKIT_URL, token) // --- 4) Publish your local tracks --- await this.room.localParticipant.setMicrophoneEnabled(true) const videoPublication = await this.room.localParticipant.setCameraEnabled(true) @@ -183,30 +202,6 @@ export default { } }, - getLivekitUrlFromMetadata(token) { - if (!token) throw new Error('Trying to get metadata from an empty token') - try { - const base64Url = token.split('.')[1] - const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/') - const jsonPayload = decodeURIComponent( - window - .atob(base64) - .split('') - .map((c) => { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2) - }) - .join('') - ) - - const payload = JSON.parse(jsonPayload) - if (!payload?.metadata) throw new Error('Token does not contain metadata') - const metadata = JSON.parse(payload.metadata) - return metadata.livekitUrl - } catch (error) { - throw new Error('Error decoding and parsing token: ' + error) - } - }, - /** * -------------------------------------------- * GETTING A TOKEN FROM YOUR APPLICATION SERVER