基于WebRTC的跨域屏幕共享转Electron后失效，点击房间按钮应用冻结

我之前也踩过Electron适配WebRTC跨域屏幕共享的坑，结合你描述的情况——Chrome里功能完全正常，转成Electron后点击“打开房间”或“加入房间”就冻结、控制台无报错但屏幕共享窗口始终打不开，大概率是Electron的安全策略、权限配置或者API兼容差异导致的，下面是几个针对性的解决方向：

1. 调整BrowserWindow的WebPreferences配置 #

Electron的默认安全设置会限制屏幕共享所需的权限，你需要在创建窗口时明确开启相关配置，尤其是跨域和权限相关的：

const { BrowserWindow } = require('electron');
const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: false, // 若你的WebRTC代码依赖全局对象，暂时关闭上下文隔离（或用preload脚本桥接）
    webSecurity: false, // 跨域场景下需关闭，生产环境建议用CORS配置替代
    allowRunningInsecureContent: true, // 若加载的资源是HTTP协议时需要
    permissions: ['desktopCapture'], // 明确申请桌面捕获权限
    sandbox: false // 关闭沙箱，避免系统API访问限制
  }
});

注意：Electron 12+默认开启contextIsolation，如果你的业务代码不需要Node.js API，更推荐用preload脚本桥接权限，而不是直接关闭上下文隔离。

2. 用Electron的desktopCapturer替代原生getDisplayMedia #

Chrome中屏幕共享依赖navigator.mediaDevices.getDisplayMedia()，但Electron在跨域场景下这个API的行为和浏览器有差异，建议直接用Electron官方的desktopCapturerAPI来获取屏幕流：

// 主进程代码（main.js）
const { ipcMain, desktopCapturer } = require('electron');

// 监听渲染进程的屏幕源请求
ipcMain.handle('fetch-screen-sources', async () => {
  const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] });
  return sources.map(source => ({ id: source.id, name: source.name }));
});

// 渲染进程代码（你的WebRTC页面中）
const { ipcRenderer } = require('electron');

async function initScreenShare() {
  // 获取屏幕/窗口源列表
  const sources = await ipcRenderer.invoke('fetch-screen-sources');
  // 这里可以让用户选择要共享的源，示例选第一个
  const selectedSource = sources[0];
  
  // 通过getUserMedia获取屏幕流
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: selectedSource.id,
        minWidth: 1280,
        maxWidth: 1920,
        minHeight: 720,
        maxHeight: 1080
      }
    }
  });
  
  // 将stream传入你的RTCMultiConnection逻辑中
  // 比如：connection.addStream(stream);
}

这种方式绕开了浏览器原生的权限弹窗，直接通过Electron的系统API获取屏幕源，能避免跨域和权限冲突问题。

3. 检查系统级权限 #

虽然控制台没报错，但Electron可能在后台被系统拒绝了屏幕录制权限：

• macOS：打开「系统偏好设置」→「安全性与隐私」→「屏幕录制」，确保你的Electron应用在列表中并已勾选。
• Windows：打开「设置」→「隐私和安全性」→「屏幕录制」，允许你的应用访问屏幕录制权限。

你也可以在渲染进程中主动检查权限状态：

navigator.permissions.query({ name: 'display-capture' }).then(result => {
  console.log('屏幕捕获权限状态:', result.state);
  if (result.state === 'denied') {
    alert('请在系统设置中为应用开启屏幕录制权限');
  }
});

4. 升级Electron版本 #

不同版本的Electron对WebRTC的支持差异较大，旧版本可能存在getDisplayMedia的兼容性bug，建议升级到较新的稳定版本（比如20.x及以上），能解决不少底层兼容问题。

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