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>

希望可以帮到你

Logo

前往低代码交流专区

更多推荐