ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用rrweb静静录制用户操纵过程 [打印本页]

作者: 小秦哥 时间: 2024-6-11 12:27
标题: 使用rrweb静静录制用户操纵过程
一、前言

在做项目监控埋点中，有些时间很欠好复现用户操纵的步调。这时就需要做一些用户举动的记录，重要是为了更好地还原用户在某一个时间点的操纵过程。
1.1、难点

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

1.2、调研

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

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

那怎么才能做到：

用户无感知
不录制视频

其实只要不录制视频了，那么用户肯定就无感知，由于一旦要录视频，浏览器肯定要询问用户同意差异意。
以是我们选择了另一个方案 rrweb，一个用来录制用户页面举动的库
二、rrweb

rrweb 是 record and replay the web 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放恣意 web 界面中的用户操纵。
2.1、效果展示

2.2、根本使用(vue示例)

2.2.1、HTML

我们先界说好 html 布局，replayer 用来当做回放的容器

<template>
<div class="main">
<el-button
size="mini"
round
type="primary"
icon="el-icon-refresh-left"
@click.native="record"
>
录制
</el-button>
<el-button
size="mini"
round
type="primary"
icon="el-icon-refresh-left"
@click.native="replay"
>
回放
</el-button>
<div id="replayer" v-show=&#

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)