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-butto描写冬天的好词n @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/tCreate', {         events: this.events      }).then(({  data: res }) => {         岁月神偷观后感this.crateWeb()      }).catch(() => {         this.crateWeb()      })    },    // 回放录屏    getInfo () {       thi拒绝毒品s.$http.get('/record/create/getInfo', {         params: {           id: 18        }      }).then(({  data: res }) => {         let events = JSON.par(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