rrweb记录前端用户的操作

最新推荐文章于 2024-06-26 13:23:33 发布
最新推荐文章于 2024-06-26 13:23:33 发布
阅读量694 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29377771/article/details/113865410
版权

这个工具能将用户在 Web 页面上的操作过程记录下来，并转成可序列化的日志数据，也可进行回放。程序员可以拿它来远程调试 Bug，产品经理可以拿来收集分析用户行为，感觉还挺实用。

当然rrwen还有缺陷，不能完美的展示出原画面，某些复杂的样式会出现问题。期待以后的版本能更加完美。

js下载

参考下面的博客

https://blog.csdn.net/w926400c/article/details/106867343

那么烦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rrweb 浏览器录制及转视频方案
qq_28773159的博客
01-13 3452
背景 最近在做保险相关的项目，由于医保局的监管要求，用户购买保险的流程必须可以回溯。这样在用户和保险公司之前产生保险纠纷时，就可以有迹可循。 比如用户说当时为自己和妻子二人投了保，但是保险公司后台只有一个订单，这时如果只是把后台数据给用户看，用户肯定不会信服。 最好的手段就是把用户投保的具体操作录制成视频，在发生纠纷时，直接以视频为证，这样最有说服力。 ...
rrweb-to-video:rrweb 原始数据转换成视频
05-31
rrweb-to-video rrweb-to-video 是一个可以将 rrweb 录制的原始数据转换为视频的项目。 背景 rrweb 录制的原始数据为 json 格式，json 里会保存页面中的一些静态资源，如图片、css等。 当 rrweb 进行回放时，会加载这些静态资源。但是当项目不断的迭代后，这些静态资源的 hash 值早就变了，甚至已经被删除了，那么回访时就会有问题。 所以最好的方式是将 json 转换成视频，做永久保存。 安装 FFmpeg 生成视频需要依赖 FFmpeg，首先下载安装 FFmpeg，并配置环境变量，具体请咨询度娘。 下载地址： 例子 命令行运行：node test/index.js 如何贡献 提交一个 Issue 或一个 Merge Request
键盘鼠标录制回放器_rrweb：打开 web 页面录制与回放的黑盒子
weixin_39547158的博客
11-22 453
前段时间开源了我们的 web 录制、回放基础库 rrweb，它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据，以实现远程回放。研发这⼀⼯具起初是为了解决我们在客户环境 debug 时遇到的⼀些问题。我们的产品通常部署在客户的内⽹环境中，因此⼀旦出现问题只能通过各类远程操作⼯具登⼊客户环境中进⾏debug，操作的空间和时间都⾮常有限。如果不幸遇到⼀些偶发性的问题，复现就变得难上加难，deb...
还原现场——前端录制用户行为技术方案
最新发布
2401_83384536的博客
06-26 786
目前，用户行为录制已经在各个场景中广泛使用，例如用户调研、产品分析、Bug回溯、自动化测试和行为监控等等。视频录制、页面截图和 Dom 快照录制等技术方案各有优劣，在面对不同的使用场景时要选择合适的技术方案，但总体而言，以rrweb 库为代表的 Dom 快照录制技术是目前最为广泛使用也最具优势的技术方案，在各种商业化解决方案中也主要采用该技术方案或思路来实现。
前端监控理论
MichaelAn的博客
02-13 453
前端监控理论 原文来源： https://www.zhihu.com/column/c_101987637 加入了自己的笔记和整理 (一)场景和类型 最近半年一直都在研究前端监控，发现对于前端来说，监控真的很重要，萌发了想写一系列文章全面梳理一下对前端监控的了解和总结。 1、主要场景 产品，首先要建立在使用场景上，所...
rrweb旨在利用现代浏览器所提供的强大API录制并回放任意web界面中的用户操作
08-10
rrweb 旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作
rrvideo:将 rrweb 会话转换为视频
05-30
视频 rrvideo 是将 rrweb 录制的转换成视频的工具。 安装 rrvideo 安装 。 安装 。 运行npm i -g rrvideo安装 rrvideo CLI。 使用 rrvideo 将rrweb会话（JSON格式）转换为视频。 rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE 运行此命令将在当前工作目录中输出一个rrvideo-output.mp4文件。 配置输出路径 rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE --output OUTPUT_PATH 配置回放 您可以准备一个 rrvideo 配置文件并将其传递给 CLI。 rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_JSON_FILE --config PATH_TO_YOUR
rrweb：记录并重放网络
02-07
rrweb是指“记录并重放网络”，它是一种用于记录和重放用户在网络上的交互的工具。 目前，rrweb已经解决了录制和重放中的许多难题，但是在1.0版发行之前，数据结构可能仍会更改。 因此，请在生产环境中谨慎使用...
vue中使用rrweb录制与回放
08-17
Vue.js是一个轻量级的前端框架，以其组件化、易上手的特性深受开发者喜爱，而rrweb则是一个开源的Web操作记录与回放工具，能够详尽地捕获并重现用户在浏览器中的所有行为。 **rrweb（Record & Replay Web）** rrweb...
实现录制视频转换成mp4格式
04-01
该源码由源码天堂IOS源码频道免费提供下载。源码实现录制视频，并且将视频转换成mp4格式。
在ubuntu系统上安装ffmpeg支持rrweb使用rrvideo对视频文件转mp4格式遇到的一些问题及解决办法
程序员蜗牛的博客
04-08 723
此时大功告成，功夫不负有心人，ubuntu 等linux操作系统，部署rrweb, rrvideo生成mp4视频成功了。然后你发现使用rrvideo -input将rrweb视频文件转成mp4失败，这个时候需要git clone rrvide项目，本地打包build 拿到这里的cli.js和index.js放到服务器的项目里。然后重新生成mp4,你发现还有问题，只想发两句国粹，问题真多，一个个解决吧。
用JS记录鼠标的行为，并且回放。
12-31
如题。JS的一个小插件，有需要的拿去。
file2video:将任何文件转换为视频
03-12
File2Video 将任何文件转换为包含QR码的视频。 您可以将其上传到youtube，并将youtube用作无限存储空间。 输出视频大小可能比输入文件大150倍。 （如果您将视频上传到youtube并下载回去，则文件大小会减小。Youtube可以更好地压缩视频） 用法示例 首次安装要求 pip install -r requirements.txt 然后，您可以运行将文件转换为视频 python file2video.py test/test100k.txt out.mp4 您可以运行将其转换回文件 python video2file.py out.mp4 . 输出示例 笔记 如果收到诸如Could not find encoder for codec id 27: Encoder not found类的错误： Could not find encoder for codec id
基于rrweb框架对web 页面录制与回放
web修理工
05-23 2886
前言 最近来了个需求需要对web 页面上的操作行为做流程跟踪，并提供具体的数据,或者视频参照，作为合规的证据代码用户的操作轨迹，也避免一些纠纷。 对于web 页面的轨迹追踪，还需要知道操作行为。一想到这个第一想到的就是在线直播学习课程中，找个屏幕录播软件，讲解员打开该软件，开始在电脑上的一切行为都被录制成视频。然后就可以直接把视频分享给所有的人。而你再讲解过程中的一些列细节都能够播放出来。所以当初就想让原生APP开发一个这样类似的东西。再webview中进行播放。这样功能也就ok了。但是还是需要支持移动端w
使用rrweb实现页面录像
热门推荐
blackcat88的博客
04-02 1万+
rrweb适用场景： 用户行为分析； 远程debug； 录制操作； 实时协作； 项目github：https://github.com/rrweb-io/rrweb ，觉得有用，记得帮他加个星~ 官网：https://www.rrweb.io/ 开搞！ 第一步：引入rrweb <script src="https://cdn.jsdelivr.net/npm/rrweb@...
前端监控：回放录制库 rrweb
薛定谔的猫-前端领域
05-12 6637
rrweb rrweb 主要由 rrweb 、 rrweb-player 和 rrweb-snapshot 三个库组成： rrweb：提供了 record 和 replay 两个方法；record 方法用来记录页面上 DOM 的变化，replay 方法支持根据时间戳去还原 DOM 的变化。 rrweb-player：基于 svelte 模板实现，为 rrweb 提供了回放的 GUI 工具，支持暂停、倍速播放、拖拽时间轴等功能。内部调用了 rrweb 的提供的 replay 等方法。 rrweb-..
使用puppeteer,puppeteer-recorder,timecut,timesnap对web网页的操作浏览等行为进行录播，并输出视频
yingyangxing的博客
09-24 3626
前言 前段时间，使用了rrweb对web网页进行了录制与回放的功能开发，那么问题来了，虽然rrweb可以实现这个功能，但是它最终生成的就是一串json格式的数据。无法可以很好的提供给第三方一个很直观的表现，除非我们可以在这个行业里面统一使用rrweb这套框架，统一提供数据格式来实现行业内的统一原则，但是大众心理还是希望可以提供一个很直观的东西去呈现这样的效果，比如一个MP4格式的视频。web录屏的最终呈现的目的就是类似一个“犯罪”过程中的证据，比如我们出现bug了，但是我们不知道是哪里出现问题了，但是我们可
浏览器页面录制及转视频方案
时清云的博客
06-29 1693
背景 最近在做保险相关的项目，由于医保局的监管要求，用户购买保险的流程必须可以回溯。这样在用户与保险公司之间产生纠纷时，就可以有迹可循。比如用户说，当时为自己和妻子二人投了保，但是保险公司后台只有一笔订单，这时如果只是把后台数据给用户看，用户肯定不会信服。(我是转载者，我司也是保险公司，所以需求背景和我做的可回溯项目一样) 最好的手段就是把用户投保的具体操作过程录制成视频，在发生纠纷时，直接以视频为证，这样才更有说服力。 DOM 快照 当我们想要查看用户在投保过程中某一时刻的页面状态时，我们只需要将那一刻
使用rrweb 回溯（页面录制，到播放）
Li8L9xF的博客
03-21 5535
使用Rrweb 指南 一、 rrweb是什么？ rrweb 是 ‘record and replay the web’ 的简写，用来录制并回放任意 web 界面中的用户操作。 ⚠️注意：rrweb不支持 IE11 以下，如需兼容（https://caniuse.com/#feat=mutationobserver）访问这个连接 二、Rrweb 功能 记录用户使用产品的方式并加以分析，进一步优化； 采集用户遇到的bug的操作路径，予以复现； 回溯用户的行为，可作为证据存储； 录制体积更小，清晰度无损的演示视
rrweb如何记录canvas
04-05
rrweb可以通过以下步骤记录canvas： 1. 在页面中引入rrweb库。 2. 对canvas进行事件监听，例如鼠标点击、移动等事件。 3. 在监听到事件时，使用rrweb提供的API记录事件信息。 4. 当需要回放记录的canvas时，使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值