diff --git a/package.json b/package.json
index d1a0d0b..70e622f 100644
--- 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
index 3818105..8e477fd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -52,7 +52,7 @@
text-center
bg-green-500
hover:bg-green-700">
- 🎬
Start
+ 🎬
Start
diff --git a/src/index.js b/src/index.js
index 2d4afc3..33e1150 100644
--- 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
index 9160227..2c84e9a 100644
--- 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 = "📼
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 = "🎬
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!');
+}
\ No newline at end of file