使用navigator.mediaDevices.getDisplayMedia无法显示当前标签页选项

云上老周

2026-6-13

问题解答

可以定位调用getDisplayMedia的标签页，但你的配置可能存在浏览器兼容性或实验特性未完全启用的问题，下面是具体分析和解决建议：

核心参数与浏览器要求

你代码中使用的selfBrowserSurface: "include"和preferCurrentTab: true是让当前标签页出现在捕获选项中的关键，但这些特性对Chrome系浏览器有以下要求：

浏览器版本：需要Chrome 102+、Edge 102+、Opera 88+以上版本，旧版本不支持这些参数。
实验性Flag：除了启用#enable-experimental-web-platform-features，还需要确保#enable-media-screen-capture-surface-selection（部分版本可能使用该名称）也处于启用状态，修改后必须重启浏览器才能生效。

确认用户触发逻辑

你的触发代码通过按钮点击调用API，这符合浏览器对getDisplayMedia必须由用户主动交互触发的要求，这部分没有问题。

调试建议

打开浏览器控制台，查看是否有参数不支持、权限拒绝等报错或警告信息，这些能直接定位问题根源。
简化测试代码，暂时剥离其他业务逻辑，只保留最基础的getDisplayMedia调用，验证是否能显示当前标签页选项：

async function captureElement() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        displaySurface: "browser",
        selfBrowserSurface: "include",
        preferCurrentTab: true
      }
    });
    console.log("捕获成功:", stream);
  } catch (err) {
    console.error("捕获失败:", err);
  }
}