Merge pull request #3 from ruymon/development

Development Merge
ruymon · Mar 9, 2021 · a16ff85 · a16ff85
2 parents da41658 + cac1e5b
commit a16ff85
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "electron-screen-recorder",
   "productName": "electron-screen-recorder",
   "version": "1.0.0",
-  "description": "My Electron application description",
+  "description": "A Electron based Screen Recorder. Built with Tailwind-CSS.",
   "main": "src/index.js",
   "scripts": {
     "start": "electron-forge start",
@@ -13,7 +13,7 @@
   },
   "keywords": [],
   "author": {
-    "name": "ruymon",
+    "name": "Ruy Monteiro",
     "email": "ruystfrancis@gmail.com"
   },
   "license": "MIT",
@@ -24,7 +24,7 @@
         {
           "name": "@electron-forge/maker-squirrel",
           "config": {
-            "name": "electron_screen_recorder"
+            "name": "Electron Screen Recorder"
           }
         },
         {

diff --git a/src/index.html b/src/index.html
@@ -52,7 +52,7 @@
                   text-center 
                   bg-green-500 
                   hover:bg-green-700">
-                  🎬 <br/> Start
+                  🎬 <br /> Start
       </button>
 
       <button id="stopBtn" class="py-1 px-4 
@@ -63,7 +63,7 @@
                   text-center
                   bg-red-500
                   hover:bg-red-700">
-                  🛑 <br/> Stop
+                  🛑 <br /> Stop
       </button>
 
     </div>

diff --git a/src/index.js b/src/index.js
@@ -18,11 +18,15 @@ const createWindow = () => {
     }
   });
 
+  mainWindow.removeMenu();
+
   // and load the index.html of the app.
   mainWindow.loadFile(path.join(__dirname, 'index.html'));
 
+
+
   // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+  //mainWindow.webContents.openDevTools();
 };
 
 // This method will be called when Electron has finished

diff --git a/src/render.js b/src/render.js
@@ -1,12 +1,52 @@
+const { desktopCapturer, remote } = require('electron');
+
+const { dialog, Menu } = remote;
+
+const { writeFile } = require('fs');
+const { start } = require('repl');
+
+
+
+// Global States
+let mediaRecorder;
+const recordedChunks = [];
+
+
+
 //Buttons
 const videoElement = document.querySelector('video');
+
 const startBtn = document.getElementById('startBtn');
+startBtn.onclick = e => {
+    mediaRecorder.start();
+
+    startBtn.classList.remove('bg-green-500');
+    startBtn.classList.remove('hover:bg-green-700');
+
+    startBtn.classList.add('bg-blue-500');
+    startBtn.classList.add('hover:bg-blue-700');
+
+    startBtn.innerHTML = "📼 <br /> Recording";
+};
+
+
 const stopBtn = document.getElementById('stopBtn');
+stopBtn.onclick = e => {
+    mediaRecorder.stop();
+
+    startBtn.classList.remove('bg-blue-500');
+    startBtn.classList.remove('hover:bg-blue-700');
+
+    startBtn.classList.add('bg-green-500');
+    startBtn.classList.add('hover:bg-green-700');
+
+    startBtn.innerHTML = "🎬 <br /> Start";
+};
+
+
 const videoSelectBtn = document.getElementById('videoSelectBtn');
 videoSelectBtn.onclick = getVideoSources;
 
-const { desktopCapturer, remote } = require('electron');
-const { Menu } = remote;
 
 // Get the available video sources
 async function getVideoSources() {
@@ -23,7 +63,6 @@ async function getVideoSources() {
         })
     );
 
-
     videoOptionsMenu.popup();
 }
 
@@ -50,5 +89,36 @@ async function selectSource(source) {
     videoElement.srcObject = stream;
     videoElement.play();
 
+    // Create the Media Recorder
+    const options = { mimeType: 'video/webm; codecs=vp9' };
+    mediaRecorder = new MediaRecorder(stream, options);
+
+    // Register Event Handlers
+    mediaRecorder.ondataavailable = handleDataAvailable;
+    mediaRecorder.onstop = handleStop;
+}
 
+// Captures all Recorded Chunks
+function handleDataAvailable(e) {
+    console.log('Video data available')
+    recordedChunks.push(e.data);
 }
+
+
+// Saves the video file on stop
+async function handleStop(e) {
+    const blob = new Blob(recordedChunks, {
+        type: 'video/webm; codecs=vp9',
+    });
+
+    const buffer = Buffer.from(await blob.arrayBuffer());
+
+    const { filePath } = await dialog.showSaveDialog({
+        buttonLabel: 'Save video',
+        defaultPath: `vid-${Date.now()}.webm`
+    })
+
+    console.log(filePath);
+
+    filePath ? writeFile(filePath, buffer, () => console.log('Video saved successfully!')) : console.log('No File Path!');
+}