94 lines
2.9 KiB
HTML
94 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
|
<title>OpenVidu Electron</title>
|
|
|
|
<style>
|
|
#list-of-screens {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
#footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 25px;
|
|
background: white;
|
|
text-align: right;
|
|
padding: 10px 0px 10px 0px;
|
|
}
|
|
|
|
#share-btn {
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Share your screen</h1>
|
|
<div id="list-of-screens"></div>
|
|
<div id="footer">
|
|
<button id="cancel-btn" onclick="cancelSelection()">Cancel</button>
|
|
<button id="share-btn" onclick="sendScreenSelection()" disabled>Share</button>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
var availableScreens = [];
|
|
var htmlElements = [];
|
|
var selectedElement;
|
|
|
|
const desktopCapturer = require('@electron/remote').desktopCapturer;
|
|
const ipcRenderer = require('electron').ipcRenderer;
|
|
|
|
// Call Electron API to list all available screens
|
|
desktopCapturer.getSources({
|
|
types: ['window', 'screen']
|
|
}).then(async sources => {
|
|
const list = document.getElementById("list-of-screens");
|
|
sources.forEach(source => {
|
|
// Add new element to the list with the thumbnail of the screen
|
|
var el = document.createElement("div");
|
|
el.onclick = () => {
|
|
// Style the new selected screen and store it as the current selection
|
|
htmlElements.forEach(e => {
|
|
e.style.border = "none";
|
|
e.style.background = "none";
|
|
})
|
|
el.style.border = "2px solid #0088aa";
|
|
el.style.background = "rgba(0, 0, 0, 0.06)";
|
|
selectedElement = el;
|
|
document.getElementById("share-btn").disabled = false;
|
|
}
|
|
// Store the new source and the new created HTML element
|
|
availableScreens.push(source);
|
|
htmlElements.push(el);
|
|
var img = document.createElement("img");
|
|
var name = document.createElement("span");
|
|
img.src = source.thumbnail.toDataURL();
|
|
name.innerHTML = source.name;
|
|
// Append new elements to the template
|
|
el.appendChild(img);
|
|
el.appendChild(name);
|
|
list.appendChild(el);
|
|
});
|
|
});
|
|
|
|
function sendScreenSelection() {
|
|
ipcRenderer.send('screen-share-selected', availableScreens[htmlElements.indexOf(selectedElement)].id);
|
|
closeWindow();
|
|
}
|
|
|
|
function cancelSelection() {
|
|
ipcRenderer.send('screen-share-selected', undefined);
|
|
closeWindow();
|
|
}
|
|
|
|
function closeWindow() {
|
|
require('@electron/remote').getCurrentWindow().close();
|
|
}
|
|
</script> |