+
YOU
-
diff --git a/openvidu-electron/src/index.js b/openvidu-electron/src/index.js
index 6f082cc3..fea5dd27 100644
--- a/openvidu-electron/src/index.js
+++ b/openvidu-electron/src/index.js
@@ -1,126 +1,255 @@
const ipcRenderer = require('electron').ipcRenderer;
const { BrowserWindow } = require('@electron/remote');
-const { OpenVidu } = require('openvidu-browser');
+const { Room, RoomEvent } = require('livekit-client');
const axios = require('axios');
-var openvidu;
-var session;
+var room;
var publisher;
-var mySessionId;
+var myParticipantName;
+var myRoomName;
+var isScreenShared = false;
+var screenSharePublication;
-ipcRenderer.on('screen-share-ready', (event, message) => {
- if (!!message) {
- // User has chosen a screen to share. screenId is message parameter
- showSession();
- publisher = openvidu.initPublisher("publisher", {
- videoSource: "screen:" + message
- });
- joinSession();
- }
+ipcRenderer.on('screen-share-ready', async (event, sourceId) => {
+ if (sourceId) {
+ // User has chosen a screen to share. screenId is message parameter
+ showRoom();
+ await joinRoom();
+
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({
+ audio: false,
+ video: {
+ mandatory: {
+ chromeMediaSource: 'desktop',
+ chromeMediaSourceId: sourceId,
+ },
+ },
+ });
+ console.log('screenVideoTrack ', stream);
+
+ const track = stream.getVideoTracks()[0];
+ const screenPublication = await room.localParticipant.publishTrack(track);
+ const element = screenPublication.track.attach();
+ element.className = 'removable';
+ document.getElementById('local-participant').appendChild(element);
+ } catch (error) {
+ console.error('Error enabling screen sharing', error);
+ }
+ }
});
-function initPublisher() {
+async function initPublisher() {
- openvidu = new OpenVidu();
+ const shareScreen = document.getElementById('screen-sharing').checked;
- const shareScreen = document.getElementById("screen-sharing").checked;
- if (shareScreen) {
- openScreenShareModal();
- } else {
- publisher = openvidu.initPublisher("publisher");
- joinSession();
- }
+ if (shareScreen) {
+ openScreenShareModal();
+ } else {
+ await joinRoom();
+ }
}
-async function joinSession() {
+async function joinRoom() {
+ myRoomName = document.getElementById('roomName').value;
+ myParticipantName = document.getElementById('participantName').value;
- session = openvidu.initSession();
- session.on("streamCreated", function (event) {
- session.subscribe(event.stream, "subscriber");
- });
+ // --- 1) Get a Room object ---
+ room = new Room();
- mySessionId = document.getElementById("sessionId").value;
+ // --- 2) Specify the actions when events take place in the room ---
- const token = await getToken(mySessionId);
+ // 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);
+ });
- await session.connect(token, { clientData: 'OpenVidu Electron' });
- showSession();
- session.publish(publisher);
+ // 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();
+ });
+
+ const token = await getToken(myRoomName, myParticipantName);
+ const livekitUrl = getLivekitUrlFromMetadata(token);
+
+ await room.connect(livekitUrl, token);
+
+ showRoom();
+ 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);
}
-function leaveSession() {
- session.disconnect();
- hideSession();
+async function toggleScreenShare() {
+ console.log('Toggling screen share');
+ const enabled = !isScreenShared;
+
+ if (enabled) {
+ // Enable screen sharing
+ try {
+ screenSharePublication =
+ await room.localParticipant?.setScreenShareEnabled(enabled);
+ } catch (error) {
+ console.error('Error enabling screen sharing', error);
+ }
+
+ if (screenSharePublication) {
+ console.log('Screen sharing enabled', screenSharePublication);
+ isScreenShared = enabled;
+
+ // Attach the screen share track to the video container
+ const element = screenSharePublication.track.attach();
+ element.id = screenSharePublication.trackSid;
+ element.className = 'removable';
+ document.getElementById('local-participant').appendChild(element);
+
+ // Listen for the 'ended' event to handle screen sharing stop
+ screenSharePublication.addListener('ended', async () => {
+ console.debug('Clicked native stop button. Stopping screen sharing');
+ await stopScreenSharing();
+ });
+ }
+ } else {
+ // Disable screen sharing
+ await stopScreenSharing();
+ }
}
-function showSession() {
- document.getElementById("session-header").innerText = mySessionId;
- document.getElementById("join").style.display = "none";
- document.getElementById("session").style.display = "block";
+async function stopScreenSharing() {
+ try {
+ await room.localParticipant?.setScreenShareEnabled(false);
+ isScreenShared = false;
+ const trackSid = screenSharePublication?.trackSid;
+
+ if (trackSid) {
+ document.getElementById(trackSid)?.remove();
+ }
+ screenSharePublication = undefined;
+ } catch (error) {
+ console.error('Error stopping screen sharing', error);
+ }
}
-function hideSession() {
- document.getElementById("join").style.display = "block";
- document.getElementById("session").style.display = "none";
+function leaveRoom() {
+ // --- 6) 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
+ removeAllUserData();
+ hideRoom();
+}
+
+function showRoom() {
+ 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';
+}
+
+function removeAllUserData() {
+ 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);
}
+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
* --------------------------------------------
- * The methods below request the creation of a Session and a Token to
+ * The methods below request the creation of a Token to
* your application server. This keeps your OpenVidu deployment secure.
- *
+ *
* In this sample code, there is no user control at all. Anybody could
* access your application server endpoints! In a real production
* environment, your application server must identify the user to allow
* access to the endpoints.
- *
- * Visit https://docs.openvidu.io/en/stable/application-server to learn
- * more about the integration of OpenVidu in your application server.
+ *
*/
var APPLICATION_SERVER_URL = 'http://localhost:5000/';
-async function getToken(mySessionId) {
- const sessionId = await createSession(mySessionId);
- return await createToken(sessionId);
-}
+async function getToken(roomName, participantName) {
+ try {
+ const response = await axios.post(
+ APPLICATION_SERVER_URL + 'token',
+ {
+ roomName,
+ participantName,
+ },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
-async function createSession(sessionId) {
- const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, {
- headers: { 'Content-Type': 'application/json', },
- });
- return response.data; // The sessionId
+ console.log(response.data);
+ return response.data;
+ } catch (error) {
+ console.error('No connection to application server', error);
+ }
}
-
-async function createToken(sessionId) {
- const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, {
- headers: { 'Content-Type': 'application/json', },
- });
- return response.data; // The token
-}
\ No newline at end of file
diff --git a/openvidu-electron/src/modal.html b/openvidu-electron/src/modal.html
index f8b6b6a6..cbd9623d 100644
--- a/openvidu-electron/src/modal.html
+++ b/openvidu-electron/src/modal.html
@@ -1,94 +1,177 @@
-
+
+
+
+
Screen Sharing Selection
-
-
-
-
OpenVidu Electron
+
-
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 16px; /* Adjust the gap as needed for spacing */
+ align-items: stretch; /* Makes all rows the same height */
-
-
Share your screen
-
-
-
+ /* Additional styling for the grid container */
+ padding: 16px;
+ background-color: #f0f0f0;
+ }
-
\ No newline at end of file
+ #share-btn,
+ #cancel-btn {
+ color: #fff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ #share-btn {
+ background-color: #007bff;
+ }
+ #cancel-btn {
+ background-color: rgb(151, 28, 28);
+ }
+
+ .screen-name {
+ font-weight: bold;
+ }
+
+
+
+
+
Select a Screen to Share
+
+
+
+
+
+
diff --git a/openvidu-electron/src/style.css b/openvidu-electron/src/style.css
index ef9fea0b..61a15563 100644
--- a/openvidu-electron/src/style.css
+++ b/openvidu-electron/src/style.css
@@ -14,13 +14,13 @@ body {
text-align: center;
}
-#publisher {
+#local-participant {
float: left;
margin: 10px;
width: 40%;
}
-#subscriber {
+#remote-participants {
float: right;
margin: 10px;
width: 40%;
@@ -30,4 +30,52 @@ video {
width: 70%;
margin: 10px auto 0 auto;
display: block;
-}
\ No newline at end of file
+}
+
+h1 {
+ font-size: 24px;
+ margin-bottom: 20px;
+}
+
+.form-group {
+ margin: 10px 0;
+ text-align: left;
+}
+
+label {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+input[type="text"],
+input[type="checkbox"],
+button {
+ width: 95%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ font-size: 16px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+input[type="checkbox"] {
+ width: auto;
+ display: inline;
+ margin-right: 10px;
+}
+
+button {
+ background: #007bff;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background: #0056b3;
+}
+
+.screen-chekbox {
+ display: flex;
+}