fix(show-me/desktopcapturer): allow example to work for v17 and above (#1186)

Author: thewheat

static/show-me/desktopcapturer/main.js

@@ -4,7 +4,7 @@
 // For more info, see:
 // https://electronjs.org/docs/api/desktop-capturer
 
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, desktopCapturer } = require('electron')
 const path = require('path')
 
 app.whenReady().then(() => {
@@ -19,4 +19,14 @@ app.whenReady().then(() => {
   })
 
   mainWindow.loadFile('index.html')
+  if (parseInt(process.versions.electron) >= 17) {
+    desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
+      for (const source of sources) {
+        if (source.id.startsWith('screen')) {
+          mainWindow.webContents.send('SET_SOURCE', source.id)
+          return
+        }
+      }
+    })
+  }
 })

static/show-me/desktopcapturer/preload.js

@@ -1,4 +1,5 @@
 const { desktopCapturer } = require('electron')
+const { ipcRenderer } = require('electron')
 
 // The following example shows how to capture video from
 // the screen. It also grabs each window, so you could
@@ -12,31 +13,49 @@ function startCapture () {
     for (let i = 0; i < sources.length; ++i) {
       console.log(sources[i])
       if (sources[i].id.startsWith('screen')) {
-        navigator.mediaDevices.getUserMedia({
-          audio: false,
-          video: {
-            mandatory: {
-              chromeMediaSource: 'desktop',
-              chromeMediaSourceId: sources[i].id,
-              minWidth: 1280,
-              maxWidth: 1280,
-              minHeight: 720,
-              maxHeight: 720
-            }
-          }
-        }).then((stream) => handleStream(stream))
-          .catch((error) => console.log(error))
+        showStream(sources[i].id)
       }
     }
   })
 }
 
+async function showStream (sourceId) {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: sourceId,
+          minWidth: 1280,
+          maxWidth: 1280,
+          minHeight: 720,
+          maxHeight: 720
+        }
+      }
+    })
+    handleStream(stream)
+  } catch (e) {
+    handleError(e)
+  }
+}
+
 function handleStream (stream) {
   const video = document.querySelector('video')
   video.srcObject = stream
   video.onloadedmetadata = (e) => video.play()
 }
 
-window.addEventListener('DOMContentLoaded', () => {
-  startCapture()
-})
+function handleError (e) {
+  console.log(e)
+}
+
+if (parseInt(process.versions.electron) >= 17) {
+  ipcRenderer.on('SET_SOURCE', async (event, sourceId) => {
+    showStream(sourceId)
+  })
+} else {
+  window.addEventListener('DOMContentLoaded', () => {
+    startCapture()
+  })
+}