{"id":18427221,"url":"https://github.com/amitdeka/screenrecorder-electronjs","last_synced_at":"2025-04-13T19:38:59.333Z","repository":{"id":143876887,"uuid":"311951630","full_name":"AmitDeka/ScreenRecorder-ElectronJS","owner":"AmitDeka","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-21T05:34:34.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T08:27:33.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AmitDeka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-11T11:33:47.000Z","updated_at":"2020-11-21T05:34:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"a30162cc-71f6-4dc3-b4d3-1373316a1cf1","html_url":"https://github.com/AmitDeka/ScreenRecorder-ElectronJS","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitDeka%2FScreenRecorder-ElectronJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitDeka%2FScreenRecorder-ElectronJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitDeka%2FScreenRecorder-ElectronJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitDeka%2FScreenRecorder-ElectronJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmitDeka","download_url":"https://codeload.github.com/AmitDeka/ScreenRecorder-ElectronJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248769570,"owners_count":21158838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T05:09:58.593Z","updated_at":"2025-04-13T19:38:59.325Z","avatar_url":"https://github.com/AmitDeka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Screensy\n#### This is my first Desktop app build with ElectronJS. This application  includes Per Window Screen Recording.\n\n\n## Quick Start Guide \n\n**Electron** is a framework that enables you to create desktop applications with JavaScript, HTML, and CSS. These applications can then be packaged to run directly on macOS, Windows, or Linux, or distributed via the Mac App Store or the Microsoft Store.\n\n### Prerequisites\n\nBefore proceeding with Electron you need to install [Node.js](https://nodejs.org/en/download/). \n\nTo check that Node.js was installed correctly, type the following commands in your terminal client:\n\n```\nnode -v\nnpm -v\n```\nThe commands should print the versions of Node.js and npm accordingly. If both commands succeeded, you are ready to install Electron.\n\n### Electron Forge\n\nCreate a new app with [Electron Forge](https://www.electronforge.io/) - it provides a solid starting point for building and distributing the app.\n\nOpen [VS Code Editor](https://code.visualstudio.com/) and create a project folder. Then type the following in the **Terminal**.\n\n```text\n\nnpx create-electron-app my-app\n\ncd my-app\nnpm start\n\n```\n\u003e **ProTip:** Enter `rs` into the terminal to restart the app after making code changes.\n\n####  HTML Markup\nThe HTML contains a `\u003cvideo\u003e` element to preview the output from a screen and provides buttons to start/stop recording.\n\n#### Include Node in Electron’s Render Process\n\nIn order to use Node in Electron’s frontend render process, we need to need to add the following config option:\n\n```javascript\n\nconst  createWindow  =  ()  =\u003e  {\n\tconst  mainWindow  =  new BrowserWindow({\n\twidth:  1080,\n\theight:  720,\n\twebPreferences:  {     /// \u003c-- Update this option.\n\t\tnodeIntegration:  true,\t\t\t\n\t\tenableRemoteModule:  true,\n\t\t}\n});\n\n```\n\n### Screen Recorder\n\nCreate a file named `src/app.js`. All code in this section runs in this file.\n\n#### Get Available Screens\n\nHow do we access the available windows or screens to record? Electron has a built-in [desktopCapturer](https://www.electronjs.org/docs/api/desktop-capturer) that returns a list of the user’s screens.\n```javascript\n\nconst videoSelectBtn = document.getElementById('videoSelectBtn');\nvideoSelectBtn.onclick = getVideoSources;\n\nconst { desktopCapturer, remote } = require('electron');\nconst { Menu } = remote;\n\n// Get the available video sources\nasync function getVideoSources() {\n  const inputSources = await desktopCapturer.getSources({\n    types: ['window', 'screen']\n  });\n}\n\n```\n#### Display a Popup Menu\n\nAt this point we have a list of screens, but need a UI element for the user to select one. This is a good use-case for a popup menu.\n\n```javascript\n\nconst { desktopCapturer, remote } = require('electron');\nconst { Menu } = remote;\n\nasync function getVideoSources() {\n  const inputSources = await desktopCapturer.getSources({\n    types: ['window', 'screen']\n  });\n\n  const videoOptionsMenu = Menu.buildFromTemplate(\n    inputSources.map(source =\u003e {\n      return {\n        label: source.name,\n        click: () =\u003e selectSource(source)\n      };\n    })\n  );\n\n\n  videoOptionsMenu.popup();\n}\n\n```\n\n#### Preview Video Stream\n\nOnce a screen is selected it should be previewed in the video element. The code below uses `navigator.mediaDevices.getUserMedia` to turn the screen into a raw video feed.\n\nA MediaRecorder instance is created to record the stream as a `webm` video file that can be played back.\n\n```javascript\n\nlet mediaRecorder; // MediaRecorder instance to capture footage\nconst recordedChunks = [];\n\n// Change the videoSource window to record\nasync function selectSource(source) {\n\n  videoSelectBtn.innerText = source.name;\n\n  const constraints = {\n    audio: false,\n    video: {\n      mandatory: {\n        chromeMediaSource: 'desktop',\n        chromeMediaSourceId: source.id\n      }\n    }\n  };\n\n  // Create a Stream\n  const stream = await navigator.mediaDevices\n    .getUserMedia(constraints);\n\n  // Preview the source in a video element\n  videoElement.srcObject = stream;\n  videoElement.play();\n\n  // Create the Media Recorder\n  const options = { mimeType: 'video/webm; codecs=vp9' };\n  mediaRecorder = new MediaRecorder(stream, options);\n\n  // Register Event Handlers\n  mediaRecorder.ondataavailable = handleDataAvailable;\n  mediaRecorder.onstop = handleStop;\n}\n\n```\n\n#### Record and Save a Video File\n\nThe final step is to give the user control over the recording and saving of a video file.\n```javascript\n\nconst { writeFile } = require('fs');\nconst { dialog, Menu } = remote;\n\nconst startBtn = document.getElementById('startBtn');\nstartBtn.onclick = e =\u003e {\n  mediaRecorder.start();\n  startBtn.classList.add('is-danger');\n  startBtn.innerText = 'Recording';\n};\n\nconst stopBtn = document.getElementById('stopBtn');\n\nstopBtn.onclick = e =\u003e {\n  mediaRecorder.stop();\n  startBtn.classList.remove('is-danger');\n  startBtn.innerText = 'Start';\n};\n\n\n// Captures all recorded chunks\nfunction handleDataAvailable(e) {\n  console.log('video data available');\n  recordedChunks.push(e.data);\n}\n\n// Saves the video file on stop\nasync function handleStop(e) {\n  const blob = new Blob(recordedChunks, {\n    type: 'video/webm; codecs=vp9'\n  });\n\n  const buffer = Buffer.from(await blob.arrayBuffer());\n\n  const { filePath } = await dialog.showSaveDialog({\n\n    buttonLabel: 'Save video',\n    defaultPath: `vid-${Date.now()}.webm`\n  });\n\n  console.log(filePath);\n\n  writeFile(filePath, buffer, () =\u003e console.log('video saved successfully!'));\n}\n\n```\n\n\n\n\n## Total Downloads\n![GitHub All Releases](https://img.shields.io/github/downloads/AmitDeka/ScreenRecorder-ElectronJS/total?color=green)\n\n### Downloads : \n\n\n[![](https://img.shields.io/github/v/release/AmitDeka/ScreenRecorder-ElectronJS?color=Green\u0026label=Release%20For%20Windows)](https://github.com/AmitDeka/ScreenRecorder-ElectronJS/releases/download/v1.0.0/Screen.Recorder-1.0.0.Setup.exe)\n\n\n### Latest Info\n\n![GitHub last commit](https://img.shields.io/github/last-commit/AmitDeka/ScreenRecorder-ElectronJS)\n![GitHub Release Date](https://img.shields.io/github/release-date/AmitDeka/ScreenRecorder-ElectronJS)\n\n\n### Licensing\n![GitHub](https://img.shields.io/github/license/AmitDeka/ScreenRecorder-ElectronJS)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitdeka%2Fscreenrecorder-electronjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famitdeka%2Fscreenrecorder-electronjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitdeka%2Fscreenrecorder-electronjs/lists"}