浏览器截屏攻略，深入浅出 Screen Capture API

处于Web开发范畴时，要达成“屏幕分享”或者“页面截图”，往昔可是极为遥远难以触及之事。然而伴随Screen Capture API趋向成熟，如今开发者仅仅凭借寥寥几行原生JavaScript代码，便能够于浏览器之内直接捕获用户屏幕内容。

Screen Capture API属于W3C标准范畴，它引入了getDisplayMedia()方法，这套API的核心功能在于，能准许网页录制用户的屏幕，其中涵盖整个桌面、特定的应用程序窗口或者当前的浏览器标签页。

它的核心原理在于，把屏幕内容转变成一个 MediaStream（媒体流），你能够将此流呈现在 标签之中，或者借助 提取出静态的图片。

用法

要实现“截图”功能，本质上是一个“截取视频帧”的过程。

核心逻辑流程

使权限被激活，调用 getDisplayMedia 弹出系统授权弹窗，并承载画面，即创建一个隐藏的视频容器，将实时屏幕流接入，还要瞬间定格，利用 Canvas 的 drawImage 方法，捕捉视频当前时刻的画面，最后进行资源回收，截图完成后，必须手动停止录制轨道，不然浏览器上方会一直显示“正在共享”。

我用 Vue3 代码演示一下。

页面之上，有个名为“点击截图”的按钮，当你去点击它的时候，首次情形下，会致使你要去授权浏览器进行截图这一行为，而此授权这一动作，是要在系统设置的范畴之内去完成的。

在获得授权之后，返回到浏览器，接着进行重新截图，此时能够选择要去进行截图的标签页，也能够选择窗口，或者还能够选择整个屏幕。

注意事项

在实际的运用当中，Screen Capture API存在着几条硬性的红线，这些红线是明确规定的，是不能被轻易触碰的，是有着严格界限的。

约束项说明

HTTPS 协议

除了localhost之外，运行必须处于安全环境，不然getDisplayMedia是不存在的。

用户交互限制

要让那代码运行，它在页面加载的这个时候，是不会自动去运行的，非得存在像click这类的，得是用户主动引发的事件，才能够触发它运行。

隐私保护

浏览器没办法截取那种受到系统保护的窗口，像密码管理器，还有某些加密视频软件所关联的窗口，是不行的。

资源泄露

要是不进行 track.stop() 的调用操作，那关于电脑这一设备的任务栏便会持续地显示录制图标，这是极其耗费性能的。

Screen Capture VS 第三方库

此前介绍过html2canvas这个库，还介绍过dom-to-image-more这个库，它们与Screen Capture API的应用场景全然不一样，是完全不同的。

屏幕捕捉应用程序编程接口的现身，使得网络应用具备了原生等级别的交互本领，不管是打造远程协作工具，还是网页端的错误反馈系统，它都是一件强有力的工具。

相关标签： # ScreenCaptureAPI # 浏览器截屏 # Web开发 # MediaStream # HTTPS协议