rrweb实现页面回放功能实现页面可回溯

rrweb github开源地址

rrweb简介

rrweb他是啥？*rrweb 指的是’record and replay the web’，它是一个用于记录和回放用户在网络上的交互的工具。作为一个开发者可能在项目中你可能会遇到各种奇怪的需求。例如记录和回访网页上所有的操作记录。
rrweb能干嘛？相信看到标题的同学都知道是用于记录用户在页面上的所有操作纪录，那么问题来了在日常开发中可以用在那些地方呢？答:微信小程序，h5小程序，uni-app，浏览器页面。（只要你所开发得东西是由html+css开发得就能实现录制回放）
rrweb的录制原理？**就是记录你操作的元素并且把操作时候的时间戳给你记录下来，把这些操作和时间戳存储成增量的快照，然后通过时间戳依次播放出来。**如果想更详细的了解可以转移官方文档rrweb录制播放实现原理

rrweb的使用小demo

rrweb的主要就是录制和播放两个方法

1.安装rrweb

下面两个依赖包 rrweb的是录制依赖包，rrweb-player为回放依赖包

 npm install --save rrwebnpm install --save rrweb-player

2.录制

由于我是在一进入页面就开始录制的所以我的录制是放在App.vue文件下面的。

参数说明：

import * as rrweb from “rrweb”; 引入rrweb录制
通过rrweb.record()的方法开启录制。这个方法里面传入一个emit方法，方法的event就是录制视频的视频片段，他会把所有的数据都存到event里面。
我们需要把这个event视频片段存起了我这里是存到了 vuex里面，当然你也可以存到
localstorage，sessionstrage,indexedDB浏览器内存里面，再或者可以直接通过axios，或者ajax
发送给后台，等播放的时候再拿出来。
当然rrweb.record返回一个方法（stopFn）你可以使用这个方法去停止视频录制，我这里是在12秒后去停止了录制，如果你想一直录制视频可以把定时器去掉他就会一直录制视频。了解录制更多参数
最后在页面进入的时候调用这个方法。到这个地方录制一切准备就以就绪了。

如果是vue2的话直接把onMounted 改成mounted就行了。

 //1.引入rrwebimport * as rrweb from "rrweb";//2.点击录制const startRecord = () => {//record() 方法启动录制//stopFn为暂停录制的方法let stopFn = rrweb.record({//12秒后停止页面的录制，如果想一直录得话可以去掉。emit(event) {setTimeout(() => {stopFn();}, 12000);// 用任意方式存  储 event store.commit("updateEvents", { event: event });},});ElMessage({message: "开启视频录制",type: "success",});};onMounted(() => {startRecord();});

3.播放

新建一个组件back.vue当进入这个页面得时候就暂停录制，或者你也可以写个按钮去出发暂停。

视频放功能引入播放器的样式import “rrweb-player/dist/style.css”;
引入播放的实例 import rrwebPlayer from “rrweb-player”;
new rrwebPlayer()这个实例，里面可以传一个对象。对象里面传入target 字段，对应得是视频播放的区域，还有一个props。了解更多参数可以去开发文档
props: {
events: store.state.events,
speedOption: [1, 2, 5, 10],
},传入props字段里面得events为你在录制时候存储得视频片段。speedOption为视频播放器得倍速设置。

<template><div class="counte"><div id="playback"></div></div>
</template><script>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";
export default {name: "Back",setup(props) {const store = useStore();//回放实例const replayer = ref(null);onMounted(() => {stopRecord();});// //4.点击回放const stopRecord = () => {replayer.value = new rrwebPlayer({target: document.getElementById("playback"), // 可以自定义 DOM 元素props: {events: store.state.events,speedOption: [1, 2, 5, 10],},});};return {};},
};
</script><style>
.n {display: none;
}
</style>

希望可以帮到你

vue中使用rrweb实现页面回放功能相关推荐

vue中组件在不同页面中渲染出错
vue中组件在不同页面中渲染出错封装了一个组件封装了一个组件遇到问题了,特向各位大佬请教比如我封装了一个 child 组件我在father 页面中引入可以正常使用而且css 样式不会出现 ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
vue中按ctrl原页面锁定打开新页面
可以通过vuex 或者写个公共文件实现 vuex 实现思路 1.监听键盘按下事件 2.如果按下的按钮为ctrl, 就修改状态为true, 键盘抬起或者按键不对状态都为false 3.需要监听所有的 ...
vue中自定义组件“ directives “的常用功能
directives 可以全局使用以及组件内部定义使用 directives是什么? 注册自定义的指令 directives有什么作用? 对普通 DOM 元素进行底层操作,就会用到自定义指令 dire ...
vue中实现拖拽调整顺序功能
一.使用vuedraggable是标准的组件式封装或 vue-dragging 指令方式实现拖拽调整顺序功能. 1:安装依赖 npm install vuedraggable或yarn add v ...
Vue中实现pdf文件预览功能
写在前面: 实现的功能就是点击预览按钮,弹出对话框在线预览pdf文件实现此功能的前提是需要在Vue项目中安装组件vue-pdf, 在终端命令行输入运行如下语句: npm install --save ...
vue中tab选项卡刷新页面后保持选中状态_Altium Designer中的快捷键汇总
双十一活动详情请联系客服了解在任何软件环境中,为了提高工作效率,你可以做的一件事就是学习快捷键.击键比将鼠标小心地放在按钮上或点击菜单来查找命令更有效,一旦用熟悉了,它们就变成了您的第二天性.本文将 ...
vue中使用微信jssdk语音聊天功能
1.绑定域名 2.引入JS文件前面两步不细说,直接看官方文档就行,官方文档 3.wx.config配置: 在这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败 ...
vue中如何在登陆页面不显示导航栏
导航栏作为系统的通用组件,我并不想让其显示在登陆页面中,因此可以按照以下方法实现 1.将通用组件如导航栏等和<router-view />放在一起 app.vue <div>& ...
Vue中实现图片下载到本地功能和导出（下载）excel文件功能：
一.实现图片下载到本地功能需求: 将勾选的列表项的id传给后台,让后台处理并下载对应的图片 1. 后台接口: 下载图片zip: GET /download 请求数据类型 application/x- ...

vue中使用rrweb实现页面回放功能

rrweb实现页面回放功能实现页面可回溯

rrweb简介

rrweb的使用小demo

1.安装rrweb

2.录制

3.播放

vue中使用rrweb实现页面回放功能相关推荐

最新文章

热门文章

vue中使用rrweb实现页面回放功能

rrweb实现页面回放功能 实现页面可回溯

rrweb简介

rrweb的使用小demo

1.安装rrweb

2.录制

3.播放

vue中使用rrweb实现页面回放功能相关推荐

最新文章

热门文章

rrweb实现页面回放功能实现页面可回溯