需求：

1、对所有用户的操作进行监控，包括用户行为的录制

2、通过用户操作热度地图，来监控每个功能的使用频率，从而来决策产品的下一步迭代

一、浏览器自带的录频方法

MediaDevices.getUserMedia()

二、html2canvas页面截屏方法

三、虚拟Dom快照方法

四、Web监控工具Clarity

Microsoft Clarity - Free Heatmaps & Session RecordingsClarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.https://clarity.microsoft.com/

1、功能

具有热度地图、绘画录制仪表盘等

2、仪表板页

Microsoft Clarity - Free Heatmaps & Session RecordingsClarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/dashboard?date=Last%203%20days（1）实时访问的用户数量、所有的用户数量

（2）用户点击行为的统计

（3）网站内访问最多的页面排行榜

（4）访问网站内各种浏览器的百分比

（5）热门页面

（6）页面内js报错统计

3、录制页

（1）用户操作的录频回放

（2）通过用户的操作，能精准的拿捏用户的行为

4、热度地图页

（1）通过热力图，展示网站内每个位置的点击频率

5、使用步骤

（1）注册账号=》添加新项目

（2）点击获取跟踪代码=》将代码复制到网站的head元素中即可