JavaScript 屏幕录制 API 学习

（给前端速报加星标，提升前端技能.）

作者：饭等米

segmentfault.com/a/1190000020267689

屏幕录制？截屏？网页生成图片？帧图？说到录屏，我一开始想到的是前面这些词。大致的想法是持续的生成当前页面的截图，然后把这些帧图再合并成一个视频文件。前端页面生成图片我们应该比较熟悉的是html2canvas。另外也有一些现成的库可以使用来进行屏幕的录制，RecordRTC上就有很多屏幕录制的实现。有声音（Audio）、视频（Video）、屏幕（Screen）的录制；有针对canvas的录制等等，一共有三十多个示例。这里主要想简单的讲一讲原生的 Screen Capture API。参见：Using the Screen Capture API

一、屏幕内容的捕获

该方法会返回一个promise, 该promise会resolve当前屏幕内容的实时数据流。

使用 async / await 实现如下：

使用 promise 的方式实现如下：

我们在获取屏幕数据的时候有可能会获取到一些敏感信息，所有在使用getDisplayMedia的时候，为了安全考虑，会弹出一个选择框，然用户自己选择需要共享那一部分的内容。可以共享当前屏幕，也可以共享其他的应用窗口和浏览器的其他标签页。

二、参数配置：

我们在上面的实现中可以看到， 传递给startCapture函数的参数为displayMediaOptions。这个参数是用于配置返回数据流的。数据形式如下：

开可以针对音视频做详细的配置：

三、示例

HTML:

CSS：

JS：

效果如下：

点击Start Capture 之后选择需要共享的部分就可以共享如下的内容：

点击Stop Capture即可˙停止录制共享。

这个例子只是调取接口获取到当前分享屏幕的数据流，并通过video的形式显示出来。我们在拿到数据流信息这个，可以把这些信息上传到服务器，生成相应的视频文件。也可以结合websocket之类的处理方式，实现实时的屏幕共享功能。

本文对你有帮助？请分享给更多人!

关注「前端速报」，提升前端技能!

点1个“在看”，少n个bug!