前言

随着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。

什么是有感录屏？

有感录屏一般指通过获得用户的授权或者通知用户接下来的操作将会被录制成视频，并且在录制过程中，用户有权关闭中断录屏。即无论在录屏前还是录屏的过程中，用户都始终能够决定录屏能否进行。

基于 WebRTC 的有感录屏

常见的有感录屏方案主要是通过 WebRTC (https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API) 录制。WebRTC 是一套基于音视轨的实时数据流传播的技术方案。由浏览器提供的原生 API navigator.mediaDevices.getDisplayMedia 方法实现提示用户选择和授权捕获展示的内容或窗口，进而将获取 stream (录制的屏幕音视流)。我们可以对 stream 进行转化处理，转成相对应的媒体数据，并将其数据存储。后续需要回溯该次录制内容时，则取出媒体数据进行播放。

具体的有感录屏流程如下：

实现初始化录屏和数据存储

使用 navigator.mediaDevices.getDisplayMedia 初始化录屏，触发弹窗获取用户授权，效果图如下所示：

实现 WebRTC 初始化录屏核心代码如下：

const tracks = []; // 媒体数据
const options = {mimeType : "video/webm; codecs = vp8", // 媒体格式
};
let mediaRecorder;
// 初始化请求用户授权监控
navigator.mediaDevices.getDisplayMedia(constraints).then((stream) => {// 对音视流进行操作startFunc(stream);
});
// 开始录制方法
function start(stream) {// 创建 MediaRecorder 的实例对象，对指定的媒体流进行录制mediaRecorder = new MediaRecorder(stream, options);// 当生成媒体流数据时触发该事件，回调传参 event 指本次生成处理的媒体数据mediaRecorder.ondataavailable = event => {if(event?.data?.size > 0){tracks.push(event.data); // 存储媒体数据}};mediaRecorder.start();console.log("************开始录制************")
};
// 结束录制方法
function stop() {mediaRecorder.stop();console.log("************录制结束************")
}
// 定义constraints数据类型
interface constraints {audio: boolean | MediaTrackConstraints, // 指定是否请求音轨或者约束轨道属性值的对象video: boolean | MediaTrackConstraints, // 指定是否请求视频轨道或者约束轨道属性值的对象
}

实现录屏回溯

获取该次录屏的媒体数据，可以将其转成 blob 对象，并且生成 blob对象的 url 字符串，再赋值 video.src 中，便可以回放到录制结果，回溯的视频效果如下：

录屏回溯方法的核心代码如下所示：

// 回放录制内容
function replay() {const video = document.getElementById("video");const blob = new Blob(tracks, {type : "video/webm"});video.src = window.URL.createObjectURL(blob);video.srcObject = null;video.controls = true;video.play();
}

实现实时直播功能

由于存储的媒体数据是实时的，因此可以利用该数据实现直播功能。通过给 video.srcObject 赋值媒体流可以实现直播功能。

实现实时直播核心代码如下：

// 直播
function live() {const video = document.getElementById("video");video.srcObject = window.stream;video.controls = true;video.play();
}

浏览器兼容性

什么是无感录屏？

无感录屏指在用户无感知的情况，对用户在页面上的操作进行录制。实现上与有感录制区别在于，无感录制通常是利用记录页面的 DOM 来进行录制。常见的有 canvas 截图绘制视频和 rrweb 录制等方案。

canvas 截图绘制视频

用户在浏览页面时，可以通过 canvas 绘制多个 DOM 快照截图，再将多个截图合并成一段录屏视频。但是考虑到假设视频帧数为 30 帧，帧数代表着每秒所需的截图数量，为了视频的流畅和清晰，每张截图为 400 KB ，那么当视频长度为 1 分钟，则需要上传 703.125 MB 的资源，这么大的带宽浪费无疑会造成性能，甚至影响用户体验，不推荐使用，也不在此详细介绍本方案实现。

rrweb 录制

rrweb (record and replay the web) 是一个对于 DOM 录制的支持性非常好，利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作，能够将页面 DOM 结构通过相应算法高效转换 JSON 数据的开源库。相比较于使用 canvas 绘制录屏，rrweb 在保证录制不掉帧的基础上，让网络传输数据更加快速和轻量化，极大地优化了网络性能。

rrweb 开源库主要由 rrweb-snapshot、rrweb 和 rrweb-play 三部分组成，并且提供了动作筛选，数据加密、数据压缩、数据切片、屏蔽元素等功能。

rrweb-snapshot

rrweb-snapshot 提供 snapshot 和 rebuild 两个 API，分别实现生成可序列化虚拟 DOM 快照的数据结构和将其数据结构重建为对应 DOM 节点的两个功能。

snapshot 将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识 id，使得一个 id 映射对应的一个 DOM 节点，方便后续以增量的方式来操作。

首先需要通过深拷贝 document 生成初始化 DOM 快照。

// 深拷贝 document 节点
const docEl = document.documentElement.cloneNode(true);
// 回放时再将深拷贝的节点挂在回去即可
document.replaceChild(docEl, document.documentElement);

由于获取到的 DOM 对象并不是可序列化的，因此仍需要将其转成特定的文本格式（如 JSON）进行传输，否则无法做到远程录制。在实现 DOM 快照可序列化的过程中，还需对数据进行特殊处理：

将相对路径改成绝对路径；
将页面引用的样式改成内联样式；
禁止脚本运行，被录制页面中的所有 JavaScript 都不应该被执行。把 <script> 转成 <noscrpit> ；
由于部分表单（如 <input type="text" /> ）不会把值暴露在 html 中，故需读取表单的 value 值。

虽然已经能够获取到全量的 DOM 对象，但是无法将增量快照中被交互的 DOM 节点和现已有的 DOM 节点关联上，所以还需要给 DOM 添加一层映射关系（id => Node），后续 DOM 节点的更新都通过该 id 来记录并对应到完整的 DOM 节点中。

如下是初始时获取到的 DOM 节点：

<html><body><header></header></body>
</html>

通过遍历整个 DOM 树，以 Node 节点为单位，给每个遍历到的 Node 都添加了唯一标识 id ，生成全量序列化的 DOM 对象快照。以下是序列化后的数据结构示意：

{"type": "Document","childNodes": [{"type": "Element","tagName": "html","attributes": {},"childNodes": [{"type": "Element","tagName": "head","attributes": {},"childNodes": [],"id": 3},{"type": "Element","tagName": "body","attributes": {},"childNodes": [{"type": "Text","textContent": "\n    ","id": 5},{"type": "Element","tagName": "header","attributes": {},"childNodes": [{"type": "Text","textContent": "\n    ","id": 7}],"id": 6}],"id": 4}],"id": 2}],"id": 1
}

rebuild

将 snapshot 记录的初始化快照的数据结构，继而通过递归给每个节点添加属性来重建 DOM ，生成可序列化的 DOM 节点快照。

rrweb

rrweb 提供 record 和 replay 两个 API，分别实现记录所有增量数据和将记录的数据按照时间戳回放的两个功能。

record

通过触发视图的变化和 DOM 结构的改变（如 DOM 节点的删减和属性值的变化）来劫持增量变化数据存入 JSON 对象中，每个增量数据对应一个时间戳，这些数据称之为 Oplog（operations log）。

视图的变化可通过全局事件监听和事件代理方法收集增量数据，而这些事件大多是和用户的操作行为相关，能够触发这类事件的动作如 DOM 节点或内容的变动、鼠标移动或交互、页面或元素滚动、键盘交互和窗口大小变动。

DOM 结构的改变可以通过浏览器提供的 MutationObserver (https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver) 接口能监视，触发参数回调，获取到本次 DOM 的变动的节点信息，进而对数据进行筛选重组等处理。回调参数的数据结构如下：

let MutationRecord1: MutationRecordObject[];
interface MutationRecordObject {/*** 如果是属性变化，则返回 "attributes"；* 如果是 characterData 节点变化，则返回 "characterData"；* 如果是子节点树 childList 变化，则返回 "childList"。*/type: String,// 返回被添加的节点。如果没有节点被添加，则该属性将是一个空的 NodeList。addedNodes: NodeList,// 返回被移除的节点。如果没有节点被移除，则该属性将是一个空的 NodeList。removedNodes: NodeList,// 返回被修改的属性的属性名，或者 null。attributeName: String | null,// 返回被修改属性的命名空间，或者 null。attributeNamespace: String | null,// 返回被添加或移除的节点之前的兄弟节点，或者 null。previousSibling: Node | null,// 返回被添加或移除的节点之后的兄弟节点，或者 null。nextSibling: Node | null,/** 返回值取决于 MutationRecord.type。* 对于属性 attributes 变化，返回变化之前的属性值。* 对于 characterData 变化，返回变化之前的数据。* 对于子节点树 childList 变化，返回 null。*/oldValue: String | null,
}

record 收集的 Oplog 数据结构如下图所示：

let Oplog: OplogObject[];
interface OplogObject {/** 返回值取决于收集的事件类型* DomContentLoaded: 0, Load: 1,* FullSnapshot: 2, IncrementalSnapshot: 3,* Meta: 4, Custom: 5, Plugin: 6*/type: Number,data: {// 返回添加的节点数据adds: [],// 返回修改的节点属性数据attributes: [],// 返回移除的节点属性数据removes: [],/** 返回值取决于增量数据的增量类型* Mutation: 0, MouseMove: 1,* MouseInteraction: 2, Scroll: 3,* ViewportResize: 4, Input: 5,* TouchMove: 6, MediaInteraction: 7,* StyleSheetRule: 8, CanvasMutation: 9,* Font: 10, Log: 11,* Drag: 12, StyleDeclaration: 13**/source: Number,// 返回当前修改的值，无则不返回text: String | undefined,},// 当前时间戳timestamp: Number,
}

replay

基于初始化的快照数据和增量数据，将其按照对应的时间戳一一回放。由于一开始创建快照时已经禁止了脚本运行，所以可以通过 iframe 作为容器来重建 DOM 全量快照，并且通过 sanbox 属性禁止了脚本执行、弹出窗和表单提交之类的操作。把 Oplog 放入操作队列中，按照每个的时间戳先后进行排序，再使用定时器 requestAnimationFrame 回放 Oplog 快照。

rrweb-player

为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。

总结

文章从有感和无感两个角度来浅析录屏方案的实现。页面录屏的应用场景场景比较丰富，有感录制常见用于网页线上考试、直播和语音视频通话等实时交互场景，而无感录制则更多应用在重要操作记录、bug 重现场景和产品运营分析用户习惯等场景，二者各有千秋。基于用户数据的安全和敏感，目前政采云倾向采用有感录制进行试点试用，避免引起安全纠纷。在录屏技术方案不断地完善和趋向成熟的同时，我们也应尊重用户的数据安全和隐私，选择更合适自身场景的方案使用。

参考

rrweb (https://github.com/rrweb-io/rrweb)

如何用 JS 实现页面录制与回放 (https://mp.weixin.qq.com/s/kJ4-eGeaByybU_Uk3bw8Sw

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式重温系列（9篇全）

4. 正则 / 框架 / 算法等重温系列（16篇全）

5. Webpack4 入门（上）|| Webpack4 入门（下）

6. MobX 入门（上） || MobX 入门（下）

7. 120+篇原创系列汇总

回复“加群”与大佬们一起交流学习~

点击“阅读原文”查看 130+ 篇原创文章

【Web技术】1159- 浅析 Web 录屏技术方案与实现相关推荐

web前端录屏技术方案与实现详解
前言随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们开发人员研发过程中,对于部分偶发事件,异常监控系统仅仅只能告知程序出错 ...
DXGI快速截屏录屏技术
DXGI快速截屏录屏技术概述很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...
DXGI快速截屏录屏技术，高帧率直播桌面
DXGI快速截屏录屏技术概述很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...
澄清Fundebug录屏技术的几点误会
1. "视频"并非真的视频.也不是通过连续播放大量截图来实现首先请大家观看这个视频: 视频中,当鼠标点击"场景重现",会立即播放一段"视频" ...
iOS 防止截屏、录屏技术
0x00 直接看图看图演示,可防止截屏和录屏可以开启或者关闭,是否允许截屏和录屏 0x01 代码 JHNonRecordableView *view1 = [[JHNonRecordableVie ...
soi cmos技术及其应用_投屏技术及其教学应用
投屏技术及其教学应用 AWIND奇机从2003年成立之初,就一直将无线投屏的市场定位于"商教领域",家用领域也是这几年才开始发展,但是我们的重点从始至终都是"商教领域&q ...
手游录屏直播技术详解 | 直播 SDK 性能优化实践
直播无疑是 2016 年的大热话题,七牛云在 6 月底发布了实时流网络 LiveNet 和直播云解决方案后,我们用<直播技术详解>系列文章系统地介绍了直播各个环节的关键技术,帮助视频直播创 ...
技术干货 | 录屏采集实现教程 —— Windows桌面端
在进入具体的方式讨论前,我们先看看 Windows 桌面图形界面的简化架构,如下图: 在 Windows Vista 之前,Windows 界面的复合画面经由 Graphics Device Inte ...
技术干货 | 录屏采集实现教程 —— macOS桌面端
实时屏幕共享功能,在视频会议.游戏直播.在线教育等场景中已广泛被应用.近日,主打屏幕分享的社交应用「Squad」被Twitter收购,让我们看到了实时屏幕共享融于更多行业,开启丰富玩法的趋势. 作为实 ...

【Web技术】1159- 浅析 Web 录屏技术方案与实现

前言