From 353f5b35df7eb9e917a1835cfdaca89c14652682 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 25 Dec 2020 15:54:13 +0100 Subject: [PATCH 1/4] Fix screen-sharing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/preload.js | 145 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 144 insertions(+), 1 deletion(-) diff --git a/src/preload.js b/src/preload.js index 0862ec6..85328a1 100644 --- a/src/preload.js +++ b/src/preload.js @@ -14,7 +14,150 @@ See the License for the specific language governing permissions and limitations under the License. */ -const { ipcRenderer } = require('electron'); +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 { + 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"); + }); + console.log(screens); + console.log(windows); + + const selectionElem = document.createElement("div"); + selectionElem.classList = "desktop-capturer-selection"; + selectionElem.innerHTML = ` +
+
    + ${ + sources.map(({ + id, + name, + thumbnail, + displayId, + appIcon, + }) => ` +
  • + +
    • + `).join("") + } +
+
+ + + `; + document.body.appendChild(selectionElem); + + document.querySelectorAll(".desktop-capturer-selection-button").forEach((button) => { + button.addEventListener("click", async () => { + console.log("Click"); + try { + const id = button.getAttribute("data-id"); + const source = sources.find((source) => source.id === id); + if (! source) { + throw 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, + }, + }, + }); + resolve(stream); + + selectionElem.remove(); + } catch (err) { + console.error("Error selecting desktop capture source:", err); + reject(err); + } + }); + }); + } catch (err) { + console.error("Error displaying desktop capture sources:", err); + reject(err); + } + }); +}; From a36321b697d66a23090e616305bd60929d296ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 25 Dec 2020 16:24:21 +0100 Subject: [PATCH 2/4] Some improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/preload.js | 69 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/src/preload.js b/src/preload.js index 85328a1..6e0d38e 100644 --- a/src/preload.js +++ b/src/preload.js @@ -23,6 +23,7 @@ window.ipcRenderer = ipcRenderer; window.navigator.mediaDevices.getDisplayMedia = () => { return new Promise(async (resolve, reject) => { try { + // Get screen-sharing sources const sources = await desktopCapturer.getSources({ types: ["screen", "window"], }); @@ -32,16 +33,15 @@ window.navigator.mediaDevices.getDisplayMedia = () => { const windows = sources.filter((source) => { return source.id.startsWith("window"); }); - console.log(screens); - console.log(windows); - const selectionElem = document.createElement("div"); - selectionElem.classList = "desktop-capturer-selection"; - selectionElem.innerHTML = ` + const streamSelector = document.createElement("div"); + streamSelector.classList = "stream-selector"; + streamSelector.innerHTML = ` +

Screens

    ${ - sources.map(({ + screens.map(({ id, name, thumbnail, @@ -50,9 +50,28 @@ window.navigator.mediaDevices.getDisplayMedia = () => { }) => `
  • +
    • + `).join("") + } +
+
+

Windows

+
+
    + ${ + windows.map(({ + id, + name, + thumbnail, + displayId, + appIcon, + }) => ` +
  • +
    • @@ -62,18 +81,19 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
`; - document.body.appendChild(selectionElem); + document.body.appendChild(streamSelector); document.querySelectorAll(".desktop-capturer-selection-button").forEach((button) => { - button.addEventListener("click", async () => { - console.log("Click"); + button.addEventListener("click", async (ev) => { + ev.stopPropagation(); + try { const id = button.getAttribute("data-id"); const source = sources.find((source) => source.id === id); - if (! source) { - throw new Error(`Source with id ${id} does not exist`); + if (!source) { + streamSelector.remove(); + reject(new Error(`Source with id ${id} does not exist`)); } const stream = await window.navigator.mediaDevices.getUserMedia({ @@ -146,17 +168,22 @@ window.navigator.mediaDevices.getDisplayMedia = () => { }, }, }); - resolve(stream); - selectionElem.remove(); + streamSelector.remove(); + resolve(stream); } catch (err) { - console.error("Error selecting desktop capture source:", 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) { - console.error("Error displaying desktop capture sources:", err); reject(err); } }); From c4b7e856db1604f458e0af45a5c8cc932c5d9531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 08:28:35 +0100 Subject: [PATCH 3/4] Expose desktopCapturer instead of the awfullness MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/preload.js | 173 ++----------------------------------------------- 1 file changed, 4 insertions(+), 169 deletions(-) diff --git a/src/preload.js b/src/preload.js index 6e0d38e..3978fac 100644 --- a/src/preload.js +++ b/src/preload.js @@ -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 = ` -

Screens

-
-
    - ${ - screens.map(({ - id, - name, - thumbnail, - displayId, - appIcon, - }) => ` -
  • - -
    • - `).join("") - } -
-
-

Windows

-
-
    - ${ - windows.map(({ - id, - name, - thumbnail, - displayId, - appIcon, - }) => ` -
  • - -
    • - `).join("") - } -
-
- - - `; - 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; +}); From 3b496c362b6bc3a9ffa227851575a7487237f393 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:45:34 +0100 Subject: [PATCH 4/4] Don't wait for loaded MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/preload.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/preload.js b/src/preload.js index 3978fac..438093a 100644 --- a/src/preload.js +++ b/src/preload.js @@ -20,6 +20,4 @@ const { ipcRenderer, desktopCapturer } = require('electron'); window.ipcRenderer = ipcRenderer; // expose desktopCapturer to the render process to make screen-sharing work -process.once('loaded', () => { - global.desktopCapturer = desktopCapturer; -}); +global.desktopCapturer = desktopCapturer;