如何通过getDisplayMedia仅允许捕获全屏显示器？

目前Web API层面无法直接强制限制用户只能选择全屏显示器，displaySurface: 'monitor'参数仅能预设初始选中的捕获源，不能过滤掉浏览器标签页或窗口这类可选选项——这是浏览器基于用户控制权和安全考量的设计，避免网页未经允许强制锁定特定捕获内容。

不过你可以通过事后验证+监听变更的方式，确保最终捕获的是显示器内容：

1. 捕获后验证当前源类型 #

获取媒体流后，通过视频轨道的getSettings()方法检查displaySurface属性，若不是'monitor'则提示用户并停止流：

const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: false,
  video: {
    displaySurface: 'monitor',
    width: { ideal: 1280, max: 1920 },
    height: { ideal: 720, max: 1080 },
  },
});

const videoTrack = stream.getVideoTracks()[0];
const trackSettings = videoTrack.getSettings();

if (trackSettings.displaySurface !== 'monitor') {
  videoTrack.stop();
  alert('请选择全屏显示器进行捕获');
}

2. 监听捕获源变更 #

如果担心用户在捕获过程中切换到其他源（比如从显示器切到窗口），可以监听轨道的settingschange事件，实时验证并处理：

videoTrack.addEventListener('settingschange', () => {
  const updatedSettings = videoTrack.getSettings();
  if (updatedSettings.displaySurface !== 'monitor') {
    videoTrack.stop();
    alert('仅允许捕获全屏显示器，请重新选择');
  }
});

在你使用的基于Chromium的Brave浏览器（macOS Ventura环境）中，上述方法完全有效，因为Chromium内核支持displaySurface属性的检测与监听。

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