点赞 + 关注 + 收藏 = 学会了
在 Web 开发中，实现“屏幕分享”或“页面截图”曾是一件遥不可及的事情。但随着 Screen Capture API 的成熟，开发者现在只需寥寥数行原生 JavaScript 代码，就能在浏览器中直接捕获用户屏幕内容。
Screen Capture API 是 W3C 标准的一部分，它引入了 getDisplayMedia() 方法。这套 API 的核心功能是允许网页录制用户的屏幕（包括整个桌面、特定的应用程序窗口或当前的浏览器标签页）。
它的核心原理是将屏幕内容转化为一个 MediaStream（媒体流）。你可以将这个流展示在 <video> 标签里，或者利用 <canvas> 抽离出静态的图片。
用法
要实现“截图”功能，本质上是一个“截取视频帧”的过程。
核心逻辑流程
- 激活权限：调用
getDisplayMedia弹出系统授权弹窗。 - 承载画面：创建一个隐藏的视频容器，将实时屏幕流接入。
- 瞬间定格：利用 Canvas 的
drawImage方法，捕捉视频当前时刻的画面。 - 资源回收：截图完成后，必须手动停止录制轨道，否则浏览器上方会一直显示“正在共享”。
我用 Vue3 代码演示一下。
<template><div><div class="capture-area" style="padding: 20px;"><h2 class="no-screenshot">这是2级标题</h2><img src="https://iili.io/fcR7gSe.md.png" alt="" style="width: 140px;"><p style="font-size: 16px; margin: 0;">雷猴世界~</p></div><!-- 截图按钮 --><button @click="captureScreen">点击截图</button></div>
</template><script setup>async function captureScreen() {try {// 第一步：获取屏幕流（必须由用户点击触发）const stream = await navigator.mediaDevices.getDisplayMedia({video: { cursor: "always" }, audio: false });// 第二步：通过 Video 元素渲染流const video = document.createElement("video");video.srcObject = stream;video.onloadedmetadata = () => {video.play();// 第三步：将视频帧绘制到 Canvas 上const canvas = document.createElement("canvas");canvas.width = video.videoWidth;canvas.height = video.videoHeight;const ctx = canvas.getContext("2d");// 稍作延迟确保画面已渲染setTimeout(() => {ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 第四步：导出并下载图片const image = canvas.toDataURL("image/png");downloadImage(image);// 第五步：释放摄像头/屏幕资源（极其重要！）stream.getTracks().forEach(track => track.stop());}, 500);};} catch (err) {console.error("用户拒绝了授权或发生错误:", err);}
}function downloadImage(dataUrl) {const link = document.createElement("a");link.href = dataUrl;link.download = `screenshot_${new Date().getTime()}.png`;link.click();
}</script><style scoped>
.capture-area {width: 400px;box-sizing: border-box;border: 1px solid red;border-radius: 20px;
}
</style>
点击页面上的“点击截图”按钮，首次会让你授权浏览器截图，需要在系统设置里授权。
授权后回到浏览器重新截图就可以选择要截图的标签页、窗口，或者是整个屏幕。
注意事项
在实际应用中，Screen Capture API 有几条硬性红线：
| 约束项 | 说明 |
|---|---|
| HTTPS 协议 | 除了 localhost，必须在安全环境下运行，否则 getDisplayMedia 不存在。 |
| 用户交互限制 | 代码不能在页面加载时自动运行，必须由 click 等用户主动事件触发。 |
| 隐私保护 | 浏览器无法截取受系统保护的窗口（如密码管理器、某些加密视频软件）。 |
| 资源泄露 | 如果不调用 track.stop()，电脑的任务栏会一直显示录制图标，非常消耗性能。 |
Screen Capture VS 第三方库
之前介绍过 html2canvas 和 dom-to-image-more 这两个库，它们和 Screen Capture API 的应用场景完全不同。
- Screen Capture API：捕捉的是真实屏幕。它可以抓到浏览器之外的东西（如你的桌面、其他软件），适合做录屏工具、视频会议。
- html2canvas 和 dom-to-image-more：捕捉的是 DOM 结构。它通过读取 HTML/CSS 重新绘制出一个 Canvas。它不需要用户授权，但它无法捕捉浏览器之外的内容。
Screen Capture API 的出现让 Web 应用拥有了原生级的交互能力。无论是做远程协作工具，还是网页端的 Bug 反馈系统，它都是一把利器。
点赞 + 关注 + 收藏 = 学会了