调用navigator.mediaDevices.getUserMedia时桌面源窗口自动前置问题求助

这个问题其实是Chromium内核（Electron基于它）在桌面捕获时的默认行为——为了让用户明确知道哪个窗口正在被录制/捕获，内核会自动将目标窗口前置并获取焦点。不过确实会打断操作体验，下面给你两种可行的解决办法：

方法一：通过Media约束直接阻止焦点切换 #

在较新的Electron版本中，你可以在getUserMedia的video约束里添加focused: false参数，直接告诉内核不要将目标窗口置为焦点状态：

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    mandatory: {
      chromeMediaSource: "desktop",
      chromeMediaSourceId: desktop_id,
      minWidth: 2480,
      maxWidth: 2480,
      minHeight: 1440,
      maxHeight: 1440,
      focused: false // 新增：阻止目标窗口获取焦点
    }
  }
}).then(gotStream).catch(getUserMediaError);

这个参数是Chromium针对桌面捕获新增的约束，大部分Electron 10+的版本都支持，如果你的项目用的是较新的Electron版本，优先试这个方法。

方法二：捕获后强制聚焦回你的应用窗口 #

如果上面的参数不生效（比如用了较旧的Electron版本），可以在成功获取流之后，立刻将你的应用窗口重新聚焦。这里分两种场景处理：

1. 旧版Electron（支持remote模块） #

在渲染进程的gotStream函数里添加窗口聚焦逻辑：

function gotStream(stream) {
  // 你的原有流处理代码（比如绑定到video元素）
  // 强制聚焦回当前应用窗口
  const { remote } = require('electron');
  const mainWindow = remote.getCurrentWindow();
  mainWindow.focus();
}

注意：如果你的Electron版本在14及以上，remote模块默认被禁用，需要改用IPC通信的方式。

2. 新版Electron（IPC通信方式） #

主进程代码（main.js）

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true, // 新版默认开启
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 监听渲染进程的聚焦请求
  ipcMain.on('request-focus-main-window', () => {
    if (mainWindow) {
      mainWindow.focus();
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

预加载脚本（preload.js）

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

// 向渲染进程暴露API
contextBridge.exposeInMainWorld('windowAPI', {
  focusMainWindow: () => ipcRenderer.send('request-focus-main-window')
});

渲染进程的gotStream函数

function gotStream(stream) {
  // 你的原有流处理代码
  // 调用暴露的API聚焦主窗口
  window.windowAPI.focusMainWindow();
}

额外小技巧：捕获前临时置顶应用窗口 #

如果担心目标窗口前置会挡住你的应用，还可以在调用getUserMedia前，先把应用窗口设置为始终置顶，捕获完成后再取消：

// 捕获前临时置顶
const { remote } = require('electron');
const mainWindow = remote.getCurrentWindow();
mainWindow.setAlwaysOnTop(true);

navigator.mediaDevices.getUserMedia(/* 你的约束配置 */)
.then(stream => {
  // 处理流
  mainWindow.setAlwaysOnTop(false);
  mainWindow.focus();
})
.catch(err => {
  // 即使捕获失败，也要取消置顶
  mainWindow.setAlwaysOnTop(false);
  getUserMediaError(err);
});

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