Matrix/element-desktop
Matrix/element-desktop
1
0
Fork 0
mirror of https://github.com/vector-im/element-desktop.git synced 2024-10-05 10:32:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

Expose desktopCapturer instead of the awfullness

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-26 08:28:35 +01:00
parent cb1626cb9f
commit c4b7e856db
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 4 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
src/preload.js
View file

@ -19,172 +19,7 @@ const { ipcRenderer, desktopCapturer } = require('electron');
// expose ipcRenderer to the renderer process
window.ipcRenderer = ipcRenderer;
// This is a fix for screen-sharing in Electron
window.navigator.mediaDevices.getDisplayMedia = () => {
return new Promise(async (resolve, reject) => {
try {
// Get screen-sharing sources
const sources = await desktopCapturer.getSources({
types: ["screen", "window"],
});
const screens = sources.filter((source) => {
return source.id.startsWith("screen");
});
const windows = sources.filter((source) => {
return source.id.startsWith("window");
});
const streamSelector = document.createElement("div");
streamSelector.classList = "stream-selector";
streamSelector.innerHTML = `
<h1>Screens</h1>
<div class="desktop-capturer-selection-scroller">
<ul class="desktop-capturer-selection-list">
${
screens.map(({
id,
name,
thumbnail,
displayId,
appIcon,
}) => `
<li class="desktop-capturer-selection-item">
<button class="desktop-capturer-selection-button" data-id="${id}" title="${name}">
<img class="desktop-capturer-selection-thumbnail" src="${thumbnail.toDataURL()}"/>
<span class="desktop-capturer-selection-name">${name}</span>
</button>
</li>
`).join("")
}
</ul>
</div>
<h1>Windows</h1>
<div class="desktop-capturer-selection-scroller">
<ul class="desktop-capturer-selection-list">
${
windows.map(({
id,
name,
thumbnail,
displayId,
appIcon,
}) => `
<li class="desktop-capturer-selection-item">
<button class="desktop-capturer-selection-button" data-id="${id}" title="${name}">
<img class="desktop-capturer-selection-thumbnail" src="${thumbnail.toDataURL()}"/>
<span class="desktop-capturer-selection-name">${name}</span>
</button>
</li>
`).join("")
}
</ul>
</div>
<style>
.stream-selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.8);
color: #fff;
z-index: 10000000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.desktop-capturer-selection-scroller {
width: 100%;
max-height: 100vh;
overflow-y: auto;
}
.desktop-capturer-selection-list {
max-width: calc(100% - 100px);
margin: 0 50px 0 50px;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
overflow: hidden;
justify-content: center;
}
.desktop-capturer-selection-item {
display: flex;
margin: 4px;
}
.desktop-capturer-selection-button {
display: flex;
flex-direction: column;
align-items: stretch;
width: 145px;
margin: 0;
border: 0;
border-radius: 4px;
padding: 4px;
background: #20262b;
color: #ffffff;
text-align: left;
transition: background-color .15s, box-shadow .15s;
}
.desktop-capturer-selection-button:hover,
.desktop-capturer-selection-button:focus {
background: #363c43;
}
.desktop-capturer-selection-thumbnail {
width: 100%;
height: 81px;
object-fit: cover;
}
.desktop-capturer-selection-name {
margin: 6px 0 6px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
`;
document.body.appendChild(streamSelector);
document.querySelectorAll(".desktop-capturer-selection-button").forEach((button) => {
button.addEventListener("click", async (ev) => {
ev.stopPropagation();
try {
const id = button.getAttribute("data-id");
const source = sources.find((source) => source.id === id);
if (!source) {
streamSelector.remove();
reject(new Error(`Source with id ${id} does not exist`));
}
const stream = await window.navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: source.id,
},
},
});
streamSelector.remove();
resolve(stream);
} catch (err) {
streamSelector.remove();
reject(err);
}
});
});
const background = document.querySelector(".stream-selector");
background.addEventListener("click", async (ev) => {
streamSelector.remove();
reject(new Error("No source selected"));
});
} catch (err) {
reject(err);
}
});
};
// expose desktopCapturer to the render process to make screen-sharing work
process.once('loaded', () => {
global.desktopCapturer = desktopCapturer;
});