MDN项目：深入理解Screen Capture API的使用指南

概述

Screen Capture API是现代浏览器提供的一个强大功能，它允许网页应用捕获用户屏幕的全部或部分内容。这项技术广泛应用于在线会议、远程协助、教学演示等场景。本文将全面介绍如何使用Screen Capture API，包括基本用法、高级配置选项以及实际应用中的注意事项。

核心API：getDisplayMedia()

Screen Capture API的核心是navigator.mediaDevices.getDisplayMedia()方法，它返回一个Promise，解析为一个包含屏幕内容的MediaStream对象。

基本用法

async function startScreenCapture() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false // 默认不捕获音频
    });
    // 使用stream对象
  } catch (error) {
    console.error('屏幕捕获失败:', error);
  }
}

高级配置选项

我们可以通过配置对象更精细地控制捕获行为：

const advancedOptions = {
  video: {
    displaySurface: 'window', // 捕获整个窗口
    frameRate: { ideal: 30, max: 60 }, // 帧率控制
    width: { max: 1920 }, // 分辨率限制
    cursor: 'always' // 始终显示光标
  },
  audio: {
    echoCancellation: true, // 回声消除
    noiseSuppression: true, // 噪声抑制
    sampleRate: 44100 // 采样率
  }
};

显示表面类型

Screen Capture API支持捕获多种显示表面：

1. 浏览器标签页：单个浏览器标签内容
2. 应用程序窗口：整个应用程序窗口
3. 显示器：整个物理显示器
4. 逻辑表面：可能部分或完全被遮挡的内容

可见表面与逻辑表面

• 可见表面：完全显示在屏幕上的内容（如最前面的窗口）
• 逻辑表面：被部分遮挡或完全不可见的内容（浏览器通常会模糊或遮盖这些区域以保护隐私）

音频捕获

现代浏览器支持在屏幕捕获时同时捕获系统音频，但需要注意兼容性问题：

const audioOptions = {
  video: true,
  audio: {
    suppressLocalAudioPlayback: true, // 抑制本地音频播放
    systemAudio: 'include' // 包含系统音频
  }
};

实际应用示例

示例1：简单的屏幕捕获与显示

<video id="preview" autoplay></video>
<button id="start">开始捕获</button>
<button id="stop">停止捕获</button>

<script>
  const preview = document.getElementById('preview');
  const startBtn = document.getElementById('start');
  const stopBtn = document.getElementById('stop');
  let stream;
  
  startBtn.addEventListener('click', async () => {
    try {
      stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
      preview.srcObject = stream;
    } catch (err) {
      console.error('捕获失败:', err);
    }
  });
  
  stopBtn.addEventListener('click', () => {
    if (stream) {
      stream.getTracks().forEach(track => track.stop());
      preview.srcObject = null;
    }
  });
</script>

示例2：捕获特定窗口并记录元数据

async function captureWithMetadata() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      displaySurface: 'window',
      width: 1280,
      height: 720
    }
  });
  
  const videoTrack = stream.getVideoTracks()[0];
  console.log('当前设置:', videoTrack.getSettings());
  console.log('支持约束:', videoTrack.getConstraints());
  
  return stream;
}

安全与隐私考虑

1. 用户授权：浏览器会显示明显的提示，用户必须明确授权才能开始屏幕共享
2. 隐私保护：被遮挡的内容通常会被模糊处理
3. 权限策略：需要通过Permissions-Policy或iframe的allow属性启用

权限策略配置

在HTTP头中设置：

Permissions-Policy: display-capture=(self)

或在iframe中设置：

<iframe src="..." allow="display-capture"></iframe>

常见问题与解决方案

1. 兼容性问题：某些旧版浏览器可能需要polyfill
2. 音频捕获失败：检查浏览器是否支持系统音频捕获
3. 权限被拒绝：确保在用户交互事件中触发捕获请求
4. 性能问题：合理设置分辨率和帧率限制

最佳实践

1. 始终在用户交互（如点击事件）中触发捕获请求
2. 提供清晰的界面说明，告知用户正在共享什么内容
3. 及时释放资源，停止不需要的捕获
4. 处理各种错误情况，提供友好的用户反馈

总结

Screen Capture API为Web应用提供了强大的屏幕共享能力。通过合理配置选项，开发者可以创建丰富的屏幕共享体验，同时保护用户隐私。理解各种显示表面类型、掌握音频捕获技巧、遵循安全最佳实践，将帮助您构建更专业、更可靠的屏幕共享功能。