Build a screen recorder with Electron from scratch.
Watch the Electron 8 Tutorial on YouTube.
Episode 223 - Build a Screen Recorder with Electron
Build a screen recorder with Electron from scratch.
Watch the Electron 8 Tutorial on YouTube.
Hello I am trying to learn electron and javascript but i encounter this error like a lot... and i realy dont get why i got this error.
There is literally no difference on my render.js script:
// Buttons
const videoElement = document.querySelector('video');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const videoSelectBtn = document.getElementById('videoSelectBtn');
videoSelectBtn.onclick = getVideoSources;
const { desktopCapturer, remote } = require('electron');
const { Menu } = remote;
async function getVideoSources() {
const inputSources = await desktopCapturer.getSources({
types: ['window', "screen"]
});
const videoOptionsMenu = Menu.buildFromTemplate(
inputSources.map(source => {
inputSources.map(source => {
return {
label: source.name,
click: ( ) => selectSource(source)
}
})
})
);
};
Here is the error i get:
Uncaught ReferenceError: require is not defined
at render.js:8:37
Can someone pls help me about this...?
Hello Jeff,
First of all, thanks a lot for this very nice project for screen recording.
This app is working perfectly on local machine( both Linux: Ubuntu 18.04 LTS; MacOS).
But the app is unable to launch on ec2 instance (AWS)
Can you please help here?
Note-1: Initially in running the app. I was facing the issue, which resolved by installing the lib xcb.so.1
sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
Now I'm able to successfully run this: $ npm start.
ubuntu@ip-172-xx-xx-xx7:~/home$ npm start
[email protected] start /home/ubuntu/demo_streamming
electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies
✔ Launching Application
Note-2: Unable to Launch the application
App is not launching.
Thanks & Regards,
Arun Dhwaj
The remote module was deprecated in Electron 12, and will be removed in Electron 14. It is replaced by the @electron/remote module.
app.on('ready', createWindow);
^
TypeError: Cannot read properties of undefined (reading 'on')
is an error i get
This line is giving error
const { desktopCapturer, remote } = require("electron");
I've tested commit feb08cd (present HEAD of master), on Ubuntu 22.04 with npm v18.7.1 (Latest LTS: Hydrogen). The app crashes after few seconds when I try to launch it with npm run start
.
Snapshot of DevTools just after the crash:
Log message:
$>npm run start
> [email protected] start
> electron-forge start
✔ Checking your system
✔ Locating application
✔ Loading configuration
✔ Preparing native dependencies [0.2s]
✔ Running generateAssets hook
[234469:0815/201340.050509:ERROR:CONSOLE(1)] "Uncaught (in promise) TypeError: Failed to fetch", source: devtools://devtools/bundled/panels/elements/elements.js (1)
It seems that the line causing the error is src/index.js:15
:
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true // ERROR HERE
}
});
When I comment this line, the application does not crash anymore. Moreover, it seems broadly realated to a comment I've found below the related youtube video :
@andyholm-jensen9075
As of Electron v9 you can't call remote on the renderer unless you set the enableRemoteModule as true on the BrowserWindow (like you did with nodeIntegration). Great tutorial nonetheless. :)
In conclusion, it seems that the error is due to difference of version of electron
version between my environment and the video tutorial. Commenting the aforementioned line seems to solve the issue.
this isn't really an issue, i understand that this tutorial is pretty old, but how do i make it work in electron 8.16.0?
if I'm recording anything it saved successfully at my desired path, but when I open the recorded video it's not playing; either it is showing a black screen or green screen. One more thing, The recorded video is not showing how much duration it got recorded.
suggestion:
i have nodeIntegration sets to true and everything is exactly the same as your project
note: cloning your project leads to success!
i think it has something to do with electron version
index.js:
`
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// and load the index.html of the app.
mainWindow.loadFile(path.join(__dirname, 'index.html'));
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
**render.js:**
const { desktopCapturer, remote } = require('electron');
`
In the newest version of electron and electron forge, the code breaks. If you create a new fresh create-electron-app project and put the code from the repo into the project, the console spits out "Uncaught TypeError: Cannot destructure property 'dialog' of 'remote' as it is undefined. at render.js:5"
When I run the app and click Choose a Video Source nothing happens? there is an error msg
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
even after I build the app and run the exe it doesn't work?
I spent about 2 hours running thru ur code and my own to see if there were an discrepancies in my code and there literally isnt anything different.
const { desktopCapturer, remote } = require('electron')
const { writeFile } = require('fs')
const { dialog, Menu } = remote
//Global State
let mediaRecorder;
const recordedChunks = []
//buttons
const videoElement = document.querySelector('video')
const startBtn = document.getElementById('startBtn')
startBtn.onclick = e => {
mediaRecorder.start()
startBtn.classList.add('is-danger')
startBtn.innerText = 'Recording'
}
const stopBtn = document.getElementById('stopBtn')
stopBtn.onclick = e => {
mediaRecorder.stop()
startBtn.classList.remove('is-danger')
startBtn.innerText = 'Start'
}
const videoSelectBtn = document.getElementById('videoSelectBtn')
videoSelectBtn.onclick = getVideoSources
//get availabe video sources
async function getVideoSources() {
const inputSources = await desktopCapturer.getSources({
types: ['window', 'screen']
});
const videoOptionsMenu = Menu.buildFromTemplate(
inputSources.map(source => {
return {
label: source.name,
click: () => selectSource(source)
};
})
);
videoOptionsMenu.popup();
}
async function selectSource(source) {
videoSelectBtn.innerText = source.name
const constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id
}
}
}
//create stream
const stream = await navigator.mediaDevices.getUserMedia(constraints);
//preview the source in a video element
videoElement.srcObject = stream
videoElement.play();
//create media recorder
const options = { mimeType: 'video/webm; codecs=vp9' }
mediaRecorder = new MediaRecorder (stream, options);
//register even handlers
mediaRecorder.ondataavailabe = handleDataAvailable
mediaRecorder.onstop = handleStop
}
//capture 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`
})
if (filePath) {
writeFile(filePath, buffer, () => console.log('video was saved succesfully!'))
}
}
render.js:16 Uncaught TypeError: Cannot read property 'start' of undefined
at HTMLButtonElement.startBtn.onclick (render.js:16)
I download your source and run it.. but its doesnt work
I want to record both user's mic audio and ouput from the speaker. How can I do that?
when i clicked seletect source buttun nothin will appear...
how to solve that
Hello Jeff,
First of all, thanks a lot for this very nice Video/Project for screen recording.
This app is working perfectly on local machines ( Linux: Ubuntu 18.04 LTS; and MacOS).
But the app is unable to launch on ec2 instance (AWS)
Can you please help here?
Note-1: Initially in running the app. I was facing the issue, which resolved by installing the lib xcb.so.1
sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 ...
Now I'm able to successfully run this on ec2 instance: $ npm start.
ubuntu@ip-172-xx-xx-xx7:~/home$ npm start
[email protected] start /home/ubuntu/demo_streamming
electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies
✔ Launching Application
Note-2: Unable to Launch the application
App is not launching.
Thanks & Regards,
Arun Dhwaj
It is really nice video tutorial, but it has been outdated :(
If you attempt to stop the first recording save it, and then try recording again this does not work. It results in a new file being created and saved with duplicate data from first recording.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.