Electron中调用getDisplayMedia遇NotAllowedError权限拒绝求助

一、修复getDisplayMedia的"NotAllowedError"问题 #

你遇到的权限错误核心是两个点：系统权限给错了进程，或者Electron窗口配置不全。

1. 修正系统权限配置 #

你之前给VS Code开了屏幕录制权限，但实际发起权限请求的是Electron进程（开发环境下显示为「Electron」的应用）。去系统设置调整：

• macOS：进入「系统设置 > 隐私与安全性 > 屏幕录制」，找到Electron并勾选权限
• Windows：进入「设置 > 隐私和安全性 > 屏幕录制」，允许Electron应用访问屏幕

2. 调整Electron窗口配置 #

创建BrowserWindow时，确保webPreferences包含必要的权限配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true, // 保持默认开启，符合安全规范
    preload: path.join(__dirname, 'preload.js'), // 用于暴露IPC方法（若需）
    mediaPermissionsPolicy: 'display-capture=*' // 明确允许屏幕捕获权限
  }
});

3. 简化getDisplayMedia调用参数 #

不需要指定mediaSource: 'screen'，getDisplayMedia默认就是捕获屏幕，调整代码如下：

try {
  const recordStream = await navigator.mediaDevices.getDisplayMedia({
    audio: true,
    video: {
      width: { ideal: 1920 },
      height: { ideal: 1080 },
      frameRate: { ideal: 30 }
    }
  });
  // 后续处理录制流
} catch (err) {
  console.error('捕获失败:', err);
}

二、用getUserMedia配合desktopCapturer实现录屏 #

如果getDisplayMedia仍无法正常工作，Electron官方推荐结合desktopCapturer和getUserMedia实现录屏，步骤如下：

1. 主进程获取屏幕/窗口源 #

在主进程（main.js）中，通过IPC接收渲染进程的请求，返回可用的屏幕或窗口源：

const { app, BrowserWindow, desktopCapturer, ipcMain } = require('electron');

// 监听渲染进程的屏幕源请求
ipcMain.handle('get-screen-sources', async () => {
  const sources = await desktopCapturer.getSources({
    types: ['window', 'screen'],
    thumbnailSize: { width: 1920, height: 1080 }
  });
  return sources;
});

2. Preload脚本暴露IPC方法 #

在preload.js中，将IPC方法暴露给渲染进程（因上下文隔离开启，渲染进程无法直接调用Electron API）：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getScreenSources: () => ipcRenderer.invoke('get-screen-sources')
});

3. 渲染进程调用getUserMedia录制 #

在渲染进程中，先获取目标源的ID，再调用getUserMedia启动录制：

async function startRecording() {
  // 获取所有可用屏幕/窗口源
  const sources = await window.electronAPI.getScreenSources();
  // 这里默认选第一个源，可改为让用户选择目标窗口/屏幕
  const targetSource = sources[0];
  
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false, // 若需捕获系统音频，需额外配置命令行参数，参考Electron文档
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: targetSource.id,
          minWidth: 1280,
          maxWidth: 1920,
          minHeight: 720,
          maxHeight: 1080,
          minFrameRate: 30
        }
      }
    });
    // 用MediaRecorder处理录制流
    const recorder = new MediaRecorder(stream);
    recorder.start();
    // 后续可监听recorder的ondataavailable事件保存文件
  } catch (err) {
    console.error('录制失败:', err);
  }
}

若需要捕获系统音频，需在主进程启动时添加命令行参数：

app.commandLine.appendSwitch('enable-usermedia-screen-capturing');
app.commandLine.appendSwitch('auto-select-desktop-capture-source', '你的应用名称');

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