WebRTC getDisplayMedia：如何跳过屏幕选择对话框捕获当前标签页？

很棒的需求！我刚好研究过类似的场景，不用浏览器扩展实现当前标签页的精准屏幕捕获，确实可以通过WebRTC的API优化来实现，下面给你一步步讲清楚：

现代浏览器（Chrome、Edge、Firefox等）已经支持getDisplayMedia的preferCurrentTab参数，这个参数能让浏览器默认选中当前激活的标签页，甚至在部分场景下简化授权流程。另外搭配displaySurface参数，还能过滤掉屏幕、应用窗口这些不需要的选项，只保留浏览器标签页供选择。

直接上可用的代码示例：

async function captureCurrentTab() {
  try {
    // 请求捕获当前标签页的媒体流
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        preferCurrentTab: true, // 核心参数：优先选择当前标签页
        displaySurface: 'browser', // 可选：只显示浏览器标签页选项
        width: { ideal: window.innerWidth },
        height: { ideal: window.innerHeight }
      }
    });

    // 将流渲染到video元素，再捕获为图片
    const video = document.createElement('video');
    video.srcObject = stream;
    video.onloadedmetadata = () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0);
      
      // 获取捕获的图片DataURL，可用于展示或上传
      const captureImage = canvas.toDataURL('image/png');
      console.log('捕获完成:', captureImage);
      
      // 务必停止媒体流，释放资源
      stream.getTracks().forEach(track => track.stop());
    };
  } catch (error) {
    console.error('捕获失败:', error.message);
  }
}

// 给捕获按钮绑定事件
document.querySelector('#captureBtn').addEventListener('click', captureCurrentTab);

这里得说句实话：出于安全隐私考虑，目前所有现代浏览器都不允许完全跳过选择对话框——屏幕捕获属于敏感权限，必须经过用户的明确授权。不过preferCurrentTab已经能把操作降到最简：首次请求时用户只需要确认选中的当前标签页即可，后续如果浏览器记住了权限，甚至可以自动完成捕获。

如果你觉得getDisplayMedia的对话框还是有点繁琐，还有一个思路：结合浏览器的MediaRecorderAPI和getDisplayMedia，如果只是需要捕获静态截图，上面的代码已经足够；如果需要录制视频，只需要把stream传给MediaRecorder即可。

另外，你之前提到的html2canvas，其实它的最新版本精度已经提升了不少，但如果页面有复杂的CSS动画、WebGL内容，还是getDisplayMedia的捕获效果更精准，毕竟是直接捕获浏览器的渲染画面。

• 该功能必须在HTTPS环境下运行，本地开发的localhost也符合要求；
• 不同浏览器的版本支持略有差异，比如Firefox从v106开始支持preferCurrentTab，Chrome则是更早的版本就支持了；
• 捕获完成后一定要调用track.stop()释放媒体资源，避免浏览器占用过多内存。

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