JS如何实现跨浏览器截取当前电脑屏幕？

Question

JS 无法直接跨浏览器截取**整个电脑屏幕**（如桌面、其他应用窗口），这是出于严格的安全沙箱限制。`getDisplayMedia()` API 仅支持捕获**当前用户主动选择的屏幕/窗口/标签页**，且需用户显式授权（点击“共享”弹窗），Chrome/Firefox/Edge 支持良好，但 Safari 直至 v17.4 才有限支持（仅允许共享当前标签页，不支持全屏或窗口）。常见误区是误以为 `html2canvas` 或 `canvas.captureStream()` 可实现系统级截图——前者仅渲染可见 DOM（不包含 iframe 跨域内容、视频帧、CSS 3D 变换等），后者无法捕获非当前页面内容。此外，PWA 或 Electron 等非纯 Web 环境虽可突破限制，但已脱离“浏览器内 JS”的范畴。因此，“跨浏览器截取电脑屏幕”本质上是一个**安全模型决定的不可行需求**，开发者应转向明确的媒体捕获场景（如在线会议共享），并做好降级与引导提示。

Answer 1

```html

一、现象层：为什么“一键截全屏”在浏览器中总是失败？

大量前端工程师（尤其是刚接触 WebRTC 的开发者）尝试调用 navigator.mediaDevices.getDisplayMedia({ video: true }) 后发现：无法自动捕获桌面，必须弹出选择框；Safari 下甚至根本无响应；而 html2canvas(document.body) 渲染出的图里 iframe 是空白、视频区域黑屏、3D 旋转元素错位——这并非代码 bug，而是浏览器主动拒绝。

二、机制层：安全沙箱如何从架构上封禁系统级截图？

• 进程隔离：现代浏览器将渲染进程（Renderer）、GPU 进程、浏览器主进程（Browser）严格分离，网页 JS 运行于受限的 Renderer 进程，无权访问操作系统图形句柄（如 Windows HDC / macOS CGDisplay）；
• 权限最小化原则：W3C Media Capture and Streams 规范明确要求 getDisplayMedia() 必须触发 瞬时、显式、可撤销 的用户授权流，禁止静默/预授权/后台捕获；
• 跨域与帧策略限制：iframe 的 sandbox 属性、crossorigin 策略、document.domain 隔离共同阻断 DOM 跨源合成，使 html2canvas 天然失效。

三、技术对比层：主流方案能力边界全景分析

方案	可捕获内容	跨浏览器支持	是否需用户交互	本质局限
getDisplayMedia()	用户手动选中的屏幕/窗口/标签页	Chrome/Firefox/Edge ✔️；Safari v17.4+ 仅限当前标签页 ⚠️	✅ 强制弹窗授权	无法绕过选择器，不支持程序化指定“桌面0”或“微信窗口”
html2canvas	当前页面可见 DOM 快照（含 CSS 渲染）	全平台 ✔️（但跨域/iframe/Canvas2D 上下文兼容性差）	❌ 无需交互	无法获取 video 帧、WebGL 内容、跨域资源、CSS transforms 深度合成

四、演进层：非纯 Web 方案的可行性与代价权衡

当业务强依赖系统级截图（如远程运维控制台），可考虑以下路径，但需清醒认知其脱离“纯浏览器 JS”的本质：

• Electron + nativeNode：通过 desktopCapturer API 获取屏幕流，再交由主进程调用 OS API（如 Windows BitBlt）；代价是安装包体积激增、安全审查复杂度上升、无法部署于无客户端场景；
• PWA + WebUSB/WebHID：理论上可桥接外置采集卡，但需用户物理连接设备、手动授予权限，且 iOS/macOS 完全不支持；
• 浏览器扩展（Manifest V3）：Chrome 扩展可申请 "desktopCapture" 权限，但需用户单独安装、每次使用仍需点击授权，且 Firefox/Safari 扩展生态碎片化严重。

五、实践层：面向用户的健壮媒体捕获实现范式

async function safeScreenShare() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { cursor: "always" },
      audio: false
    });
    // ✅ 成功：挂载到 <video> 或 WebRTC PeerConnection
    attachStreamToVideo(stream);
  } catch (err) {
    if (err.name === "NotAllowedError") {
      showUserGuide("请在弹出窗口中选择‘整个屏幕’并点击‘共享’");
    } else if (err.name === "NotFoundError") {
      fallbackToHtml2Canvas(); // 降级为 DOM 快照（注明局限）
    }
  }
}

六、架构层：基于 Mermaid 的媒体捕获决策流程图

flowchart TD
  A[发起截图请求] --> B{浏览器环境判断}
  B -->|Chrome/Firefox/Edge| C[调用 getDisplayMedia]
  B -->|Safari < 17.4| D[提示不支持，引导下载客户端]
  B -->|Safari ≥ 17.4| E[限制为 current-tab only]
  C --> F{用户是否授权？}
  F -->|是| G[开始媒体流传输]
  F -->|否| H[展示友好引导文案+重试按钮]
  G --> I[监听 track.onended 处理意外中断]

```