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

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

rrweb github开源地址

rrweb简介

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

rrweb的使用小demo

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

1.安装rrweb

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

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

2.录制

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

参数说明：

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

如果是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();
    });

3.播放

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

1. 视频放功能 引入 播放器的样式import “rrweb-player/dist/style.css”;
2. 引入播放的实例 import rrwebPlayer from “rrweb-player”;
3. 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>

希望可以帮到你