vue中使用rrweb实现页面回放功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中使用rrweb实现页面回放功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 rrweb
	npm 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.引入rrweb
	import * 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();
    });

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

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为视频播放器得倍速设置。

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

<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>

希望可以帮到你文章来源地址https://www.toymoban.com/news/detail-485123.html

到了这里，关于vue中使用rrweb实现页面回放功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！