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

electron: update dependencies

Browse Source
This commit is contained in:
pabloFuente 2024-05-14 17:14:23 +02:00
parent ee2983b6dd
commit 1988433834
5 changed files with 1421 additions and 6372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
application-client/electron/nginx.conf
View File

@ -1,44 +0,0 @@
events {
worker_connections 512;
}
http {
upstream openvidu-deployment {
server host.docker.internal:4443;
}
upstream server-application {
server host.docker.internal:5000;
}
server {
listen 443 ssl;
ssl_certificate /etc/nginx/certs/cert.pem;
ssl_certificate_key /etc/nginx/certs/key.pem;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Proto https;
proxy_headers_hash_bucket_size 512;
proxy_redirect off;
# Websockets
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# OpenVidu deployment API
location /openvidu/api {
proxy_pass http://openvidu-deployment;
}
# OpenVidu WebSocket
location ~ /openvidu$ {
proxy_pass http://openvidu-deployment;
}
# Server application requests
location /api/ {
proxy_pass http://server-application;
}
}
}

7391
application-client/electron/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
application-client/electron/package.json
View File

@ -1,6 +1,6 @@
{
"name": "openvidu-electron",
"version": "2.27.0",
"version": "1.0.0",
"description": "OpenVidu Electron Tutorial",
"main": "src/main.js",
"scripts": {
@ -12,18 +12,18 @@
},
"license": "Apache-2.0",
"devDependencies": {
"@electron-forge/cli": "6.0.0",
"@electron-forge/maker-deb": "6.0.0",
"@electron-forge/maker-rpm": "6.0.0",
"@electron-forge/maker-squirrel": "6.0.0",
"@electron-forge/maker-zip": "6.0.0",
"electron": "19.0.10"
"@electron-forge/cli": "7.4.0",
"@electron-forge/maker-deb": "7.4.0",
"@electron-forge/maker-rpm": "7.4.0",
"@electron-forge/maker-squirrel": "7.4.0",
"@electron-forge/maker-zip": "7.4.0",
"electron": "30.0.4"
},
"dependencies": {
"@electron/remote": "2.0.12",
"axios": "1.5.1",
"electron-squirrel-startup": "1.0.0",
"livekit-client": "1.14.1"
"@electron/remote": "2.1.2",
"axios": "1.6.8",
"electron-squirrel-startup": "1.0.1",
"livekit-client": "2.1.3"
},
"config": {
"forge": {

261
application-client/electron/src/index.js
View File

@ -1,165 +1,164 @@
const axios = require('axios');
const { Room, RoomEvent } = require('livekit-client');
const axios = require("axios");
const { Room, RoomEvent } = require("livekit-client");
const ipcRenderer = require('electron').ipcRenderer;
const { BrowserWindow } = require('@electron/remote');
const ipcRenderer = require("electron").ipcRenderer;
const { BrowserWindow } = require("@electron/remote");
var room;
var publisher;
var myParticipantName;
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/';
const APPLICATION_SERVER_URL = "http://localhost:6080/";
const LIVEKIT_URL = "ws://localhost:7880/";
ipcRenderer.on('screen-share-ready', async (event, sourceId) => {
if (sourceId) {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
},
},
});
ipcRenderer.on("screen-share-ready", async (event, sourceId) => {
if (sourceId) {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sourceId,
},
},
});
const track = stream.getVideoTracks()[0];
const screenPublication = await room.localParticipant.publishTrack(track);
isScreenShared = true;
screenSharePublication = screenPublication;
const element = screenPublication.track.attach();
element.id = screenPublication.trackSid;
element.className = 'removable';
document.getElementById('local-participant').appendChild(element);
} catch (error) {
console.error('Error enabling screen sharing', error);
}
}
const track = stream.getVideoTracks()[0];
const screenPublication = await room.localParticipant.publishTrack(track);
isScreenShared = true;
screenSharePublication = screenPublication;
const element = screenPublication.track.attach();
element.id = screenPublication.trackSid;
element.className = "removable";
document.getElementById("local-participant").appendChild(element);
} catch (error) {
console.error("Error enabling screen sharing", error);
}
}
});
async function joinRoom() {
myRoomName = document.getElementById('roomName').value;
myParticipantName = document.getElementById('participantName').value;
myRoomName = document.getElementById("roomName").value;
myParticipantName = document.getElementById("participantName").value;
// --- 1) Get a Room object ---
room = new Room();
// --- 1) Get a Room object ---
room = new Room();
// --- 2) Specify the actions when events take place in the room ---
// --- 2) Specify the actions when events take place in the room ---
// On every new Track received...
room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
console.log('TrackSubscribed', track, publication, participant);
const element = track.attach();
element.id = track.sid;
element.className = 'removable';
document.getElementById('remote-participants').appendChild(element);
});
// On every new Track received...
room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
console.log("TrackSubscribed", track, publication, participant);
const element = track.attach();
element.id = track.sid;
element.className = "removable";
document.getElementById("remote-participants").appendChild(element);
});
// On every new Track destroyed...
room.on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
console.log('TrackUnSubscribed', track, publication, participant);
// On every new Track destroyed...
room.on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
console.log("TrackUnSubscribed", track, publication, participant);
track.detach();
document.getElementById(track.sid)?.remove();
});
track.detach();
document.getElementById(track.sid)?.remove();
});
// --- 3) Connect to the room with a valid access token ---
// --- 3) Connect to the room with a valid access token ---
// Get a token from the application backend
const token = await getToken(myRoomName, myParticipantName);
// Get a token from the application backend
const token = await getToken(myRoomName, myParticipantName);
await room.connect(LIVEKIT_URL, token);
await room.connect(LIVEKIT_URL, token);
showRoom();
// --- 4) Publish your local tracks ---
await room.localParticipant.setMicrophoneEnabled(true);
const publication = await room.localParticipant.setCameraEnabled(true);
const element = publication.track.attach();
element.className = 'removable';
document.getElementById('local-participant').appendChild(element);
showRoom();
// --- 4) Publish your local tracks ---
await room.localParticipant.setMicrophoneEnabled(true);
const publication = await room.localParticipant.setCameraEnabled(true);
const element = publication.track.attach();
element.className = "removable";
document.getElementById("local-participant").appendChild(element);
}
async function toggleScreenShare() {
console.log('Toggling screen share');
const enabled = !isScreenShared;
console.log("Toggling screen share");
const enabled = !isScreenShared;
if (enabled) {
openScreenShareModal();
} else {
// Disable screen sharing
await stopScreenSharing();
}
if (enabled) {
openScreenShareModal();
} else {
// Disable screen sharing
await stopScreenSharing();
}
}
async function stopScreenSharing() {
try {
await room.localParticipant.unpublishTrack(screenSharePublication.track);
isScreenShared = false;
const trackSid = screenSharePublication?.trackSid;
try {
await room.localParticipant.unpublishTrack(screenSharePublication.track);
isScreenShared = false;
const trackSid = screenSharePublication?.trackSid;
if (trackSid) {
document.getElementById(trackSid)?.remove();
}
screenSharePublication = undefined;
} catch (error) {
console.error('Error stopping screen sharing', error);
}
if (trackSid) {
document.getElementById(trackSid)?.remove();
}
screenSharePublication = undefined;
} catch (error) {
console.error("Error stopping screen sharing", error);
}
}
function leaveRoom() {
// --- 5) Leave the room by calling 'disconnect' method over the Room object ---
// --- 5) Leave the room by calling 'disconnect' method over the Room object ---
room.disconnect();
// Removing all HTML elements with user's nicknames.
// HTML videos are automatically removed when leaving a Room
removeAllParticipantElements();
hideRoom();
room.disconnect();
// Removing all HTML elements with user's nicknames.
// HTML videos are automatically removed when leaving a Room
removeAllParticipantElements();
hideRoom();
}
function showRoom() {
document.getElementById('room-header').innerText = myRoomName;
document.getElementById('join').style.display = 'none';
document.getElementById('room').style.display = 'block';
document.getElementById("room-header").innerText = myRoomName;
document.getElementById("join").style.display = "none";
document.getElementById("room").style.display = "block";
}
function hideRoom() {
document.getElementById('join').style.display = 'block';
document.getElementById('room').style.display = 'none';
document.getElementById("join").style.display = "block";
document.getElementById("room").style.display = "none";
}
function removeAllParticipantElements() {
var elementsToRemove = document.getElementsByClassName('removable');
while (elementsToRemove[0]) {
elementsToRemove[0].parentNode.removeChild(elementsToRemove[0]);
}
var elementsToRemove = document.getElementsByClassName("removable");
while (elementsToRemove[0]) {
elementsToRemove[0].parentNode.removeChild(elementsToRemove[0]);
}
}
function openScreenShareModal() {
let win = new BrowserWindow({
parent: require('@electron/remote').getCurrentWindow(),
modal: true,
minimizable: false,
maximizable: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
},
resizable: false,
});
require('@electron/remote')
.require('@electron/remote/main')
.enable(win.webContents);
let win = new BrowserWindow({
parent: require("@electron/remote").getCurrentWindow(),
modal: true,
minimizable: false,
maximizable: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
},
resizable: false,
});
require("@electron/remote")
.require("@electron/remote/main")
.enable(win.webContents);
win.setMenu(null);
// win.webContents.openDevTools();
win.setMenu(null);
// win.webContents.openDevTools();
var theUrl = 'file://' + __dirname + '/modal.html';
win.loadURL(theUrl);
var theUrl = "file://" + __dirname + "/modal.html";
win.loadURL(theUrl);
}
/**
@ -176,22 +175,22 @@ function openScreenShareModal() {
*
*/
async function getToken(roomName, participantName) {
try {
const response = await axios.post(
APPLICATION_SERVER_URL + 'token',
{
roomName,
participantName,
},
{
headers: {
'Content-Type': 'application/json',
},
}
);
try {
const response = await axios.post(
APPLICATION_SERVER_URL + "token",
{
roomName,
participantName,
},
{
headers: {
"Content-Type": "application/json",
},
}
);
return response.data;
} catch (error) {
console.error('No connection to application server', error);
}
return response.data;
} catch (error) {
console.error("No connection to application server", error);
}
}

75
application-client/electron/src/main.js
View File

@ -1,61 +1,64 @@
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
require('@electron/remote/main').initialize()
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
require("@electron/remote/main").initialize();
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false
}
})
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
},
});
// Enable remote module in the main window WebContents.
require("@electron/remote/main").enable(mainWindow.webContents);
// Enable remote module in the main window WebContents.
require("@electron/remote/main").enable(mainWindow.webContents);
// and load the index.html of the app.
mainWindow.loadFile('src/index.html')
// and load the index.html of the app.
mainWindow.loadFile("src/index.html");
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Open the DevTools.
// mainWindow.webContents.openDevTools()
ipcMain.on('screen-share-selected', (event, message) => {
mainWindow.webContents.send('screen-share-ready', message);
});
ipcMain.on("screen-share-selected", (event, message) => {
mainWindow.webContents.send("screen-share-ready", message);
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
createWindow();
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on("activate", function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
app.on(
"certificate-error",
(event, webContents, url, error, certificate, callback) => {
// On certificate error we disable default behaviour (stop loading the page)
// and we then say "it is all fine - true" to the callback
event.preventDefault();
callback(true);
})
}
);
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
// code. You can also put them in separate files and require them here.