点赞 关注 收藏 学会了在 Web 开发中实现“屏幕分享”或“页面截图”曾是一件遥不可及的事情。但随着Screen Capture API的成熟开发者现在只需寥寥数行原生 JavaScript 代码就能在浏览器中直接捕获用户屏幕内容。Screen Capture API是 W3C 标准的一部分它引入了getDisplayMedia()方法。这套 API 的核心功能是允许网页录制用户的屏幕包括整个桌面、特定的应用程序窗口或当前的浏览器标签页。它的核心原理是将屏幕内容转化为一个MediaStream媒体流。你可以将这个流展示在video标签里或者利用canvas抽离出静态的图片。用法要实现“截图”功能本质上是一个“截取视频帧”的过程。核心逻辑流程激活权限调用getDisplayMedia弹出系统授权弹窗。承载画面创建一个隐藏的视频容器将实时屏幕流接入。瞬间定格利用 Canvas 的drawImage方法捕捉视频当前时刻的画面。资源回收截图完成后必须手动停止录制轨道否则浏览器上方会一直显示“正在共享”。我用 Vue3 代码演示一下。templatedivdivclasscapture-areastylepadding:20px;h2classno-screenshot这是2级标题/h2imgsrchttps://iili.io/fcR7gSe.md.pngaltstylewidth:140px;pstylefont-size:16px;margin:0;雷猴世界~/p/div!-- 截图按钮 --buttonclickcaptureScreen点击截图/button/div/templatescriptsetupasyncfunctioncaptureScreen(){try{// 第一步获取屏幕流必须由用户点击触发conststreamawaitnavigator.mediaDevices.getDisplayMedia({video:{cursor:always},audio:false});// 第二步通过 Video 元素渲染流constvideodocument.createElement(video);video.srcObjectstream;video.onloadedmetadata(){video.play();// 第三步将视频帧绘制到 Canvas 上constcanvasdocument.createElement(canvas);canvas.widthvideo.videoWidth;canvas.heightvideo.videoHeight;constctxcanvas.getContext(2d);// 稍作延迟确保画面已渲染setTimeout((){ctx.drawImage(video,0,0,canvas.width,canvas.height);// 第四步导出并下载图片constimagecanvas.toDataURL(image/png);downloadImage(image);// 第五步释放摄像头/屏幕资源极其重要stream.getTracks().forEach(tracktrack.stop());},500);};}catch(err){console.error(用户拒绝了授权或发生错误:,err);}}functiondownloadImage(dataUrl){constlinkdocument.createElement(a);link.hrefdataUrl;link.downloadscreenshot_${newDate().getTime()}.png;link.click();}/scriptstylescoped.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 反馈系统它都是一把利器。点赞 关注 收藏 学会了 浏览器截屏攻略，深入浅出 Screen Capture API
点赞 关注 收藏 学会了在 Web 开发中实现“屏幕分享”或“页面截图”曾是一件遥不可及的事情。但随着Screen Capture API的成熟开发者现在只需寥寥数行原生 JavaScript 代码就能在浏览器中直接捕获用户屏幕内容。Screen Capture API是 W3C 标准的一部分它引入了getDisplayMedia()方法。这套 API 的核心功能是允许网页录制用户的屏幕包括整个桌面、特定的应用程序窗口或当前的浏览器标签页。它的核心原理是将屏幕内容转化为一个MediaStream媒体流。你可以将这个流展示在video标签里或者利用canvas抽离出静态的图片。用法要实现“截图”功能本质上是一个“截取视频帧”的过程。核心逻辑流程激活权限调用getDisplayMedia弹出系统授权弹窗。承载画面创建一个隐藏的视频容器将实时屏幕流接入。瞬间定格利用 Canvas 的drawImage方法捕捉视频当前时刻的画面。资源回收截图完成后必须手动停止录制轨道否则浏览器上方会一直显示“正在共享”。我用 Vue3 代码演示一下。templatedivdivclasscapture-areastylepadding:20px;h2classno-screenshot这是2级标题/h2imgsrchttps://iili.io/fcR7gSe.md.pngaltstylewidth:140px;pstylefont-size:16px;margin:0;雷猴世界~/p/div!-- 截图按钮 --buttonclickcaptureScreen点击截图/button/div/templatescriptsetupasyncfunctioncaptureScreen(){try{// 第一步获取屏幕流必须由用户点击触发conststreamawaitnavigator.mediaDevices.getDisplayMedia({video:{cursor:always},audio:false});// 第二步通过 Video 元素渲染流constvideodocument.createElement(video);video.srcObjectstream;video.onloadedmetadata(){video.play();// 第三步将视频帧绘制到 Canvas 上constcanvasdocument.createElement(canvas);canvas.widthvideo.videoWidth;canvas.heightvideo.videoHeight;constctxcanvas.getContext(2d);// 稍作延迟确保画面已渲染setTimeout((){ctx.drawImage(video,0,0,canvas.width,canvas.height);// 第四步导出并下载图片constimagecanvas.toDataURL(image/png);downloadImage(image);// 第五步释放摄像头/屏幕资源极其重要stream.getTracks().forEach(tracktrack.stop());},500);};}catch(err){console.error(用户拒绝了授权或发生错误:,err);}}functiondownloadImage(dataUrl){constlinkdocument.createElement(a);link.hrefdataUrl;link.downloadscreenshot_${newDate().getTime()}.png;link.click();}/scriptstylescoped.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 反馈系统它都是一把利器。点赞 关注 收藏 学会了