rrweb+vue3.0实现用户操作记录

在需要录制的页面添加如下代码

// 行为录制区

import * as rrweb from "rrweb";
import "rrweb-player/dist/style.css";
import { eventWithTime } from "@rrweb/types";

const userStore = useUserStore();

let events: eventWithTime[] = [];

let stopFn;

onMounted(() => {
  onStartRecord();
});

onUnmounted(() => {
  onStopRecord();
});

const onStartRecord = () => {
  console.log("启动录制");
  stopFn = rrweb.record({
    emit(event) {
      // 用任意方式存储 event
      console.log("event(startRecord): " + JSON.stringify(event));
      events.push(event);
    },
    recordCanvas: true
  });
};

const onStopRecord = () => {
  console.log("结束录制");
  stopFn!({ UNSAFE_replayCanvas: true });
  userStore.setEvent(events);
};

实现进入页面自动录屏，退出页面结束记录的功能，并将快照内容加入Store中

import { defineStore } from "pinia";
import { UserState } from "@/stores/interface";
import piniaPersistConfig from "@/stores/helper/persist";
import { User } from "@/api/interface";
import { eventWithTime } from "@rrweb/types";
​
export const useUserStore = defineStore({
  id: "geeker-user",
  state: (): UserState => ({
    token: "",
    userInfo: {
      id: "",
      username: "",
      idnumber: "",
      name: "",
      password: "",
      phone: "",
      head_url: "",
      createTime: "",
      status: 0,
      avatar: "",
      roles: [],
      roleNames: [],
      isFirst: ""
    },
    userID: "",
    isFirst: "",
    event: []
  }),
  getters: {},
  actions: {
    // Set Token
    setToken(token: string) {
      this.token = token;
    },
    // Set setUserInfo
    setUserInfo(userInfo: User.ResUserList) {
      console.log("userInfo(进入set): " + JSON.stringify(userInfo));
      this.userInfo = userInfo;
    },
    // Set setUserID
    setUserID(userID: string) {
      this.userID = userID;
    },
    // Set setIsFirst
    setIsFirst(isFirst: string) {
      this.isFirst = isFirst;
    },
    // Set setEvent
    setEvent(event: eventWithTime[]) {
      this.event = event;
    },
    //get Token
    getToken(): string {
      return this.token;
    },
    //get UserInfo
    getUserInfo(): User.ResUserList {
      return this.userInfo;
    },
    //getUserID
    getUserID(): string {
      return this.userID;
    },
    //getUserID
    getIsFirst(): string {
      return this.isFirst;
    },
    // Set setUserID
    getEvent(): eventWithTime[] {
      return this.event;
    }
  },
  persist: piniaPersistConfig("geeker-user")
});
​
/* UserState */
export interface UserState {
  token: string;
  userInfo: User.ResUserList;
  userID: string;
  isFirst: string;
  event: eventWithTime[];
}

接着我们创建一个用于回放的页面
​

<template>
  <div id="app">
    <div>
          <a-button type="primary" ghost @click="doReplay"> 回放 </a-button>
    </div>
    <div id="doPlay" style="width: 600px; height: 500px" class="margin-8"></div>
  </div>
</template>
<script setup lang="ts" name="dataScreen">
import { eventWithTime } from "@rrweb/types";
import * as rrweb from "rrweb";
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
​
const userStore = useUserStore();
​
const text = ref();
​
let events: eventWithTime[] = [];
​
let stopFn;
​
const startRecord = () => {
  stopFn = rrweb.record({
    emit(event) {
      // 用任意方式存储 event
      console.log("event(startRecord): " + JSON.stringify(event));
      events.push(event);
    }
  });
};
​
const stopRecord = () => {
  stopFn!();
  userStore.setEvent(events);
};
​
const doReplay = () => {
  events = userStore.getEvent();
  console.log("events: " + JSON.stringify(events));
  console.log("events(length): " + events.length);
  const replayer = new rrwebPlayer({
    target: document.getElementById("doPlay")!, // 可以自定义 DOM 元素
    // 配置项
    props: {
      events
    }
  });
  console.log(replayer);
  console.log("replayer(doReplay): " + JSON.stringify(replayer));
};
</script>
​
<style>
.margin-8 {
  margin: 8px 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在此页面中点击回放按钮即可回放记录的页面操作