neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update server ports and Livekit URLs in Vue, Electron and Ionic tutorials

Browse Source
This commit is contained in:
juancarmore 2024-04-23 01:40:39 +02:00
parent 4bb2dc909e
commit fd0f9a13dc
6 changed files with 32 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
openvidu-electron/src/index.js
View File

@ -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(

2
openvidu-ionic/package.json
View File

@ -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",

31
openvidu-ionic/src/app/home/home.page.ts
View File

@ -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

2
openvidu-ionic/src/environments/environment.ts
View File

@ -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: ''

2
openvidu-vue/package.json
View File

@ -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",

53
openvidu-vue/src/App.vue
View File

@ -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