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>

本文地址：https://blog.csdn.net/weixin_42406046/article/details/113991982