rrweb + vue用户屏幕行为录制_rrweb用户行为录制后端需要做什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42406046/article/details/113991982

该博客介绍了如何使用PHP和MySQL来存储网页录屏数据，并使用rrweb库进行录制和播放。作者通过Vue.js创建了一个简单的用户界面，包括开始录制、保存录制和回放录屏的功能。录屏数据被存储为longtext类型的字段，以适应大型数据。回放部分通过rrweb-player库实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

• 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>