前端如何静悄悄录制用户的操作过程，静悄悄上

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

背景

公司有很多的项目，但是并不是每一个项目都很重要，其实重要的项目就那么几个，上面也是很重视这几个项目，尤其是对一些生产问题的关注度很高。

这几天上面交代下来了，需要对这些项目做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程。

图片

注意点

想要完成这个需求，仔细想了一下，需要注意几个点：

• 跨框架使用：这些项目有vue、angular、react，需要都能适用
• 能录制用户行为：能把用户在页面上的操作录制下来
• 能回放录制：如果不能回放，那么这个录制就无意义了
• 用户无感知：必须做到用户无感知才行

思考 技术方案

说到前端视频的录制，我们会想到webRTC这个技术，他能做到录制屏幕的效果，但是通过webRTC去完成这个方案的话，有几个缺点：

• 做不到用户无感知，需要用户同意才能录制
• 录制的视频太大了，太占内存了
• 学习成本比较高，这也是原因之一

那怎么才能做到：

• 用户无感知
• 不录制视频

其实只要不录制视频了，那么用户肯定就无感知，因为一旦要录视频，浏览器肯定要询问用户同意不同意。

所以我们选择了另一个方案rrweb，一个用来录制用户页面行为的库~

rrweb