如何获取getDisplayMedia选择类型及检测标签页是否被共享录制？

1. 能否获取用户选择的是标签页还是窗口？ #

可以通过getDisplayMedia返回的MediaStreamTrack的label属性判断。不同浏览器的label格式有差异，但通常会明确包含选择类型：

• Chrome/Edge中，标签页的label以"Tab:"开头，窗口则以"Window:"开头
• Firefox中，标签页的label包含" - 标签页"，窗口包含" - 窗口"

示例代码：

async function startCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    const videoTrack = stream.getVideoTracks()[0];
    const label = videoTrack.label;
    
    if (label.startsWith('Tab:')) {
      console.log('用户选择了标签页');
    } else if (label.startsWith('Window:')) {
      console.log('用户选择了窗口');
    }
  } catch (err) {
    console.error('捕获失败:', err);
  }
}

2. 能否通过JS检测标签页是否正在被共享/录制？ #

可以，分两种场景处理：

• 自身发起的共享：保存获取到的MediaStream或MediaStreamTrack，通过事件监听和状态属性判断：
  • 监听MediaStreamTrack的ended事件，触发时表示共享已停止
  • 检查MediaStreamTrack的active属性，值为true时表示正在共享
• 检测当前页面是否被共享：利用浏览器特性——当标签页被共享时，即使窗口最小化，document.visibilityState仍会保持"visible"，结合这一点可以做间接判断：

function checkTabSharedStatus() {
  return document.visibilityState === 'visible' && !document.hidden;
}

// 监听状态变化
document.addEventListener('visibilitychange', () => {
  if (checkTabSharedStatus()) {
    console.log('标签页正在被共享');
  } else {
    console.log('标签页未被共享');
  }
});

另外，navigator.permissions.query({ name: 'display-capture' })可查询是否拥有显示捕获权限，但仅能判断授权状态，无法实时检测是否正在共享。

3. 如何通过编程获取标签栏的共享标识信息？ #

浏览器标签栏的共享标识是原生UI组件，JS无法直接读取其状态。但可以通过前面的方法间接推断：当标签页处于共享状态时，对应的MediaStreamTrack会保持active，且document.visibilityState为"visible"，以此来判断标签栏是否显示共享标识。

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