navigator.mediaDevices.getDisplayMedia调用时Chrome不显示当前标签页求助

问题原因 #

Chrome默认会隐藏发起屏幕捕获请求的当前标签页，这是浏览器的默认行为，目的是防止出现循环捕获（比如标签页显示自身的捕获画面）。另外你的代码里getDisplayMedia的写法存在错误——该API返回Promise，不需要传入success/error回调，这种写法会导致逻辑异常。

解决方案 #

1. 修改捕获配置，允许显示当前标签页
   在displayMediaOptions的video选项中添加selfBrowserSurface: "include"，明确告知浏览器要包含当前标签页。

2. 修正getDisplayMedia的调用方式
   使用try/catch配合await来处理Promise的成功和失败，替代过时的回调写法。

修改后的完整代码 #

var displayMediaOptions = {
  video: {
    cursor: "always",
    height: 300,
    width: 300,
    selfBrowserSurface: "include" // 添加这一行，允许当前标签页被选择
  },
  audio: false
}

var configuration = { 
  "iceServers": [{ "url": "stun:stun2.1.google.com:19302" }]
};

theConn = new RTCPeerConnection(configuration); 

const theVideo = document.getElementById('theVideo');

try {
  theStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  // 成功获取流后的处理逻辑
  theStream.getTracks().forEach(t=>theConn.addTrack(t));
} catch(err) {
  // 捕获失败的处理
  alert("未找到流");
}

额外说明 #

• 确保你的页面运行在HTTPS环境下（本地开发的localhost不受此限制），否则getDisplayMedia可能无法正常工作。
• selfBrowserSurface是Chrome支持的标准约束参数，其他现代浏览器如Edge也支持该配置。

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