rrweb + vue用户屏幕行为录制
程序员文章站
2022-07-06 15:00:21
• npm install rrweb -S• npm install rrweb-player -S这里我使用的是 PHP + mysql 接收数据 保存录屏数据的字段最好使用 longtext 类型 录屏数据一般比较大
• 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