Added basic screen capture

ColinTr · Oct 21, 2024 · f7885d9 · f7885d9
1 parent 9345414
commit f7885d9
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 22 deletions.
diff --git a/electron_app/control_menu.html b/electron_app/control_menu.html
@@ -1,15 +1,28 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
     <head>
         <meta charset="UTF-8">
         <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
-        <title>Hello World!</title>
+        <meta http-equiv="Content-Security-Policy"
+              content="img-src 'self' data: filesystem:; default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-eval' https://unpkg.com">
+        <title>Live Desktop Translator</title>
     </head>
+
     <body>
-        <h1>Hello World!</h1>
-        We are using Node.js <span id="node-version"></span>,
-        Chromium <span id="chrome-version"></span>,
-        and Electron <span id="electron-version"></span>.
+        <div style="text-align: center;">
+            <button id="startButton" class="button">Start</button>
+            <button id="stopButton" class="button">Stop</button>
+
+            <br />
+            <br />
+
+            <video width="800" height="450" autoplay></video>
+
+            <hr />
+
+            <button id="videoSelectButton" class="button">Choose a Video Source</button>
+
+            <script src="renderer.js"></script>
+        </div>
     </body>
-</html>
+</html>
diff --git a/electron_app/main.js b/electron_app/main.js
@@ -1,16 +1,29 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, desktopCapturer, session } = require('electron')
 
 const path = require('node:path')
 
 const createWindow = () => {
     const win = new BrowserWindow({
-        width: 800,
-        height: 600,
+        width: 850,
+        height: 700,
         webPreferences: {
-            preload: path.join(__dirname, 'preload.js')
+            preload: path.join(__dirname, 'preload.js'),
+            nodeIntegration: true,
+            contextIsolation: false
         }
     })
 
+    session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
+        desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
+            // Grant access to the first screen found.
+            callback({ video: sources[0] })
+        })
+        // If true, use the system picker if available.
+        // Note: this is currently experimental. If the system picker
+        // is available, it will be used and the media request handler
+        // will not be invoked.
+    }, { useSystemPicker: true })
+
     win.loadFile('electron_app/control_menu.html')
 }
 

diff --git a/electron_app/preload.js b/electron_app/preload.js
@@ -1,10 +0,0 @@
-window.addEventListener('DOMContentLoaded', () => {
-    const replaceText = (selector, text) => {
-        const element = document.getElementById(selector)
-        if (element) element.innerText = text
-    }
-
-    for (const dependency of ['chrome', 'node', 'electron']) {
-        replaceText(`${dependency}-version`, process.versions[dependency])
-    }
-})

diff --git a/electron_app/renderer.js b/electron_app/renderer.js
@@ -0,0 +1,38 @@
+const startButton = document.getElementById('startButton')
+const stopButton = document.getElementById('stopButton')
+const videoSelectButton = document.getElementById('videoSelectButton')
+
+const video = document.querySelector('video')
+
+startButton.addEventListener('click', () => {
+    console.log("startButton")
+    navigator.mediaDevices.getDisplayMedia({
+        audio: true,
+        video: {
+            width: 800,
+            height: 450,
+            frameRate: 30
+        }
+    }).then(stream => {
+        video.srcObject = stream
+        video.onloadedmetadata = (e) => video.play()
+    }).catch(e => console.log(e))
+})
+
+stopButton.addEventListener('click', () => {
+    console.log("stopButton")
+    video.pause()
+})
+
+// Get the available video sources
+const { desktopCapturer } = require('electron')
+videoSelectButton.addEventListener('click', () => {
+    console.log("videoSelectButton")
+
+    const inputSources = desktopCapturer.getSources({
+        types: ['window', 'screen']
+    });
+
+    console.log(inputSources)
+
+})