Electron多显示器桌面捕获流分辨率过低问题求助

你的问题根源在于直接调用getUserMedia且未指定具体桌面捕获源ID时，Electron默认会将多显示器拼接的画面缩放到主显示器的分辨率，同时此时的宽高约束参数会被忽略。要解决这个问题，需要结合Electron的desktopCapturer API指定具体的桌面源，并配置正确的分辨率约束。

解决步骤及代码示例 #

1. 获取显示器信息与总分辨率
   先通过Electron的screen模块获取所有显示器的尺寸，计算出整个桌面的真实总分辨率（这里假设显示器为横向排列，若为纵向排列可调整计算逻辑）。

2. 获取桌面捕获源
   使用desktopCapturer获取桌面捕获源，选择对应整个桌面的源（不同系统的源名称可能不同，比如macOS下是"Entire Desktop"，Windows下可匹配对应名称）。

3. 调用getUserMedia并指定源ID与分辨率约束
   在getUserMedia的视频约束中添加chromeMediaSourceId指定捕获源，并将宽高约束设置为桌面的真实总分辨率，确保流以原始尺寸生成。

const { desktopCapturer, screen } = require('electron');

async function getFullResolutionDesktopStream() {
  // 获取所有显示器信息，计算整个桌面的总分辨率
  const displays = screen.getAllDisplays();
  const totalWidth = displays.reduce((sum, display) => sum + display.size.width, 0);
  const totalHeight = Math.max(...displays.map(display => display.size.height));

  // 获取桌面捕获源
  const sources = await desktopCapturer.getSources({
    types: ['screen'],
    thumbnailSize: { width: totalWidth, height: totalHeight }
  });

  // 选择对应整个桌面的捕获源（适配不同系统的命名）
  const desktopSource = sources.find(source => 
    source.name.includes('Entire Desktop') || 
    source.name.includes('整个桌面')
  ) || sources[0];

  // 获取真实分辨率的桌面流
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: 'desktop'
      }
    },
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: desktopSource.id,
        minWidth: totalWidth,
        maxWidth: totalWidth,
        minHeight: totalHeight,
        maxHeight: totalHeight
      }
    }
  });

  return stream;
}

关键说明 #

• 指定chromeMediaSourceId：这是核心，未指定时Electron会默认采用主显示器的分辨率压缩整个桌面画面；指定具体源ID后，捕获逻辑会针对该源的真实尺寸处理，宽高约束不再被忽略。
• 分辨率约束设置：将minWidth/maxWidth和minHeight/maxHeight设置为桌面总分辨率，确保生成的流强制使用该尺寸，避免自动缩放。
• 系统适配：不同操作系统的桌面源命名可能有差异，代码中通过模糊匹配名称来兼容多系统。

如果需要让用户选择单个显示器进行捕获，只需将选择源的逻辑改为让用户从sources列表中挑选对应显示器的条目即可，此时流的分辨率会自动匹配该显示器的真实尺寸。

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