Updated openvidu-electron
This commit is contained in:
Carlos Santos
parent
43cd1ab955
commit
406e5b726f
@ -18,7 +18,7 @@
|
||||
|
||||
<div id="join">
|
||||
<h1>Join a Video Room</h1>
|
||||
<form onsubmit="initPublisher(); return false">
|
||||
<form onsubmit="joinRoom(); return false">
|
||||
<div class="form-group">
|
||||
<label for="roomName">Room Name:</label>
|
||||
<input type="text" id="roomName" placeholder="Enter room name" value="RoomA" required>
|
||||
@ -27,10 +27,6 @@
|
||||
<label for="participantName">Your Name:</label>
|
||||
<input type="text" id="participantName" placeholder="Enter your name" required>
|
||||
</div>
|
||||
<div class="form-group screen-chekbox">
|
||||
<input id="screen-sharing" type="checkbox" name="screenshare">
|
||||
<label for="screen-sharing">Share screen?</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit">JOIN</button>
|
||||
</div>
|
||||
@ -39,7 +35,8 @@
|
||||
|
||||
<div id="room" style="display: none;">
|
||||
<h1 id="room-header"></h1>
|
||||
<input type="button" onclick="leaveRoom()" value="LEAVE">
|
||||
<button class="leave-button" onclick="leaveRoom()" >LEAVE</button>
|
||||
<button class="share-screen-button" onclick="toggleScreenShare()">Toggle screenshare</button>
|
||||
<div>
|
||||
<div id="local-participant">
|
||||
<h3>YOU</h3>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
const axios = require('axios');
|
||||
const { Room, RoomEvent } = require('livekit-client');
|
||||
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
const { BrowserWindow } = require('@electron/remote');
|
||||
|
||||
const { Room, RoomEvent } = require('livekit-client');
|
||||
const axios = require('axios');
|
||||
|
||||
var room;
|
||||
var publisher;
|
||||
var myParticipantName;
|
||||
@ -13,10 +12,6 @@ var screenSharePublication;
|
||||
|
||||
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,
|
||||
@ -27,30 +22,21 @@ ipcRenderer.on('screen-share-ready', async (event, 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);
|
||||
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 initPublisher() {
|
||||
|
||||
const shareScreen = document.getElementById('screen-sharing').checked;
|
||||
|
||||
if (shareScreen) {
|
||||
openScreenShareModal();
|
||||
} else {
|
||||
await joinRoom();
|
||||
}
|
||||
}
|
||||
|
||||
async function joinRoom() {
|
||||
myRoomName = document.getElementById('roomName').value;
|
||||
myParticipantName = document.getElementById('participantName').value;
|
||||
@ -77,12 +63,16 @@ async function joinRoom() {
|
||||
document.getElementById(track.sid)?.remove();
|
||||
});
|
||||
|
||||
// --- 3) Connect to the room with a valid access token ---
|
||||
|
||||
// Get a token from the application backend
|
||||
const token = await getToken(myRoomName, myParticipantName);
|
||||
const livekitUrl = getLivekitUrlFromMetadata(token);
|
||||
|
||||
await room.connect(livekitUrl, token);
|
||||
|
||||
showRoom();
|
||||
// --- 4) Publish your local tracks ---
|
||||
await room.localParticipant.setMicrophoneEnabled(true);
|
||||
const publication = await room.localParticipant.setCameraEnabled(true);
|
||||
const element = publication.track.attach();
|
||||
@ -95,30 +85,7 @@ async function toggleScreenShare() {
|
||||
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();
|
||||
});
|
||||
}
|
||||
openScreenShareModal();
|
||||
} else {
|
||||
// Disable screen sharing
|
||||
await stopScreenSharing();
|
||||
@ -127,7 +94,7 @@ async function toggleScreenShare() {
|
||||
|
||||
async function stopScreenSharing() {
|
||||
try {
|
||||
await room.localParticipant?.setScreenShareEnabled(false);
|
||||
await room.localParticipant.unpublishTrack(screenSharePublication.track);
|
||||
isScreenShared = false;
|
||||
const trackSid = screenSharePublication?.trackSid;
|
||||
|
||||
@ -141,12 +108,12 @@ async function stopScreenSharing() {
|
||||
}
|
||||
|
||||
function leaveRoom() {
|
||||
// --- 6) 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.
|
||||
// Removing all HTML elements with user's nicknames.
|
||||
// HTML videos are automatically removed when leaving a Room
|
||||
removeAllUserData();
|
||||
removeAllParticipantElements();
|
||||
hideRoom();
|
||||
}
|
||||
|
||||
@ -161,7 +128,7 @@ function hideRoom() {
|
||||
document.getElementById('room').style.display = 'none';
|
||||
}
|
||||
|
||||
function removeAllUserData() {
|
||||
function removeAllParticipantElements() {
|
||||
var elementsToRemove = document.getElementsByClassName('removable');
|
||||
while (elementsToRemove[0]) {
|
||||
elementsToRemove[0].parentNode.removeChild(elementsToRemove[0]);
|
||||
@ -247,7 +214,6 @@ async function getToken(roomName, participantName) {
|
||||
}
|
||||
);
|
||||
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('No connection to application server', error);
|
||||
|
||||
@ -111,10 +111,12 @@
|
||||
</body>
|
||||
|
||||
<script>
|
||||
// Define arrays to store available screens and HTML elements
|
||||
var availableScreens = [];
|
||||
var htmlElements = [];
|
||||
var selectedElement;
|
||||
|
||||
// Import required Electron modules
|
||||
const desktopCapturer = require('@electron/remote').desktopCapturer;
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
display: table;
|
||||
margin: auto;
|
||||
display: table;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
@ -17,65 +18,75 @@ body {
|
||||
#local-participant {
|
||||
float: left;
|
||||
margin: 10px;
|
||||
width: 40%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#remote-participants {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
width: 40%;
|
||||
margin: 10px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 70%;
|
||||
margin: 10px auto 0 auto;
|
||||
display: block;
|
||||
width: 70%;
|
||||
margin: 10px auto 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 10px 0;
|
||||
text-align: left;
|
||||
margin: 10px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="checkbox"],
|
||||
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);
|
||||
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;
|
||||
input[type='checkbox'] {
|
||||
width: auto;
|
||||
display: inline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #0056b3;
|
||||
.leave-button,
|
||||
.share-screen-button {
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.screen-chekbox {
|
||||
display: flex;
|
||||
.leave-button {
|
||||
background-color: rgb(151, 28, 28);
|
||||
}
|
||||
.share-screen-button {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user