Electron开发：导入desktopCapturer返回undefined问题求助

这个问题我之前也踩过坑，核心原因是Electron的API权限划分：desktopCapturer是主进程专属API，如果直接在渲染进程（比如你的前端组件代码里）用import { desktopCapturer } from 'electron'，是获取不到有效实例的，自然返回undefined。下面给你两种靠谱的解决办法：

方法一：使用IPC通信（推荐，符合Electron安全规范） #

这是Electron官方推荐的跨进程通信方式，安全性更高，适合大多数场景：

1. 在主进程（比如main.js）中监听IPC请求，调用desktopCapturer

   const { app, BrowserWindow, ipcMain, desktopCapturer } = require('electron');
   
   // 你的窗口创建逻辑...
   
   // 注册一个IPC处理函数，响应渲染进程的请求
   ipcMain.handle('fetch-desktop-sources', async () => {
     try {
       // 获取屏幕和窗口的捕获源
       const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] });
       return sources;
     } catch (error) {
       console.error('获取捕获源失败:', error);
       throw error;
     }
   });
   

2. 在渲染进程中通过ipcRenderer调用该方法

   import { ipcRenderer } from 'electron';
   
   async function getCaptureSources() {
     try {
       // 向主进程发送请求并等待结果
       const sources = await ipcRenderer.invoke('fetch-desktop-sources');
       console.log('可用的捕获源:', sources);
       // 这里可以根据sources渲染截图选择界面
     } catch (err) {
       console.error('请求捕获源出错:', err);
     }
   }
   
   // 调用函数测试
   getCaptureSources();
   

方法二：启用remote模块（不推荐，仅兼容旧场景） #

如果你的Electron版本低于14，或者有特殊需求必须在渲染进程直接调用主进程API，可以启用remote模块，但注意这个模块在Electron 14+默认禁用，且安全性较低：

1. 在主进程创建窗口时开启remote模块

   const { BrowserWindow } = require('electron');
   
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
       nodeIntegration: true, // 需要开启node集成
       enableRemoteModule: true // 启用remote模块
     }
   });
   

2. 在渲染进程中通过remote获取desktopCapturer

   import { remote } from 'electron';
   const { desktopCapturer } = remote;
   
   async function getSources() {
     try {
       const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] });
       console.log('捕获源:', sources);
     } catch (err) {
       console.error('获取捕获源失败:', err);
     }
   }
   

额外注意事项 #

• 从Electron 12开始，nodeIntegration默认是false，如果用方法二需要手动设为true，但这会降低应用安全性，所以更推荐方法一
• 测试时要确保主进程和渲染进程的代码是分离的，不要把主进程代码写到渲染进程文件里
• 如果用框架（比如React/Vue）打包，要确保Electron的API能被正确识别，必要时可以在打包配置里添加externals

内容的提问来源于stack exchange，提问作者Akashdeep Saluja