rrweb + vue用户屏幕行为录制

• npm install rrweb -S
• npm install rrweb-player -S

这里我使用的是 PHP + mysql 接收数据 保存录屏数据的字段最好使用 longtext 类型 录屏数据一般比较大

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="rrweb-create">
      <el-button @click="crateWeb">开始录制</el-button>
      <el-button @click="saveWeb">保存录制</el-button>
      <el-button @click="getInfo">回放录屏</el-button>
    </div>
    <div id="replaycontent" style="width: 1000px;height: 500px;background-color: #cccccc"></div>
  </el-card>
</template>
<script>
import { record } from 'rrweb'
import 'rrweb-player/dist/style.css'
import rrwebPlayer from 'rrweb-player'
export default {
  name: 'Rrweb',
  components: {},
  data () {
    return {
      events: []
    }
  },
  props: {},
  watch: {},
  methods: {
    // 开始录屏
    crateWeb () {
      let _this = this
      _this.events = []
      record({
        emit (event) {
          // 用任意方式存储 event
          _this.events.push(event)
        }
      })
    },
    // 保存录屏
    saveWeb () {
      console.log(this.events)
      this.$http.post('/record/create/setCreate', {
        events: this.events
      }).then(({ data: res }) => {
        this.crateWeb()
      }).catch(() => {
        this.crateWeb()
      })
    },
    // 回放录屏
    getInfo () {
      this.$http.get('/record/create/getInfo', {
        params: {
          id: 18
        }
      }).then(({ data: res }) => {
        let events = JSON.parse(res.data.events)
        // eslint-disable-next-line no-new,new-cap
        new rrwebPlayer({
          target: document.getElementById('replaycontent'),
          data: {
            events
          }
        })
      }).catch(() => {
        this.crateWeb()
      })
    }
  },
  computed: {},
  created () {
  },
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
</style>