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...?

when i clicked seletect source buttun nothin will appear...
how to solve that

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');
`

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

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?

This line is giving error

const { desktopCapturer, remote } = require("electron");

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?

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

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.

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"

I got this messages after startup, and pressing "Start":

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

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

I want to record both user's mic audio and ouput from the speaker. How can I do that?

Environment

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.

Log

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)

Possible solution

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.

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:

• when the recorded file is getting saved it saves on all files type despite this we can save it to only video formats such as mp4, mkv, etc.
• display how much it recorded and after when the file is saved to show how much duration it recorded.

It is really nice video tutorial, but it has been outdated :(