vue项目中实现录屏两种方式rrweb和RecordRTC

rrweb原理

rrweb 是一个实现web页面录制和回放的基础库，它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据，以实现远程回放。

RecordRTC原理

1.rrweb

安装npm i rrweb

直接上代码

<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 () {const _this = this_this.events = []record({emit (event) {// 用任意方式存储 event_this.events.push(event)_this.$store.commit('getEvents', _this.events)}})},// 保存录屏saveWeb () {// console.log(this.events)// this.$http.post('/record/create/setCreate', {//   events: this.events// }).then(({ data: res }) => {//   this.crateWeb()// }).catch(() => {//   this.crateWeb()// })},// 回放录屏getInfo () {console.log(this.$store.state.events)var events = this.$store.state.events// this.$http.get('/record/create/getInfo', {//   params: {//     id: 18//   }// }).then(({ data: res }) => {//   const events = JSON.parse(res.data.events)// eslint-disable-next-line no-new,new-capnew rrwebPlayer({target: document.getElementById('replaycontent'),data: {events}})// }).catch(() => {//   this.crateWeb()// })}},computed: {},created () {},mounted () {}
}
</script>
<style lang="scss" scoped>
</style>

效果：

2.RecordRTC

npm i rrweb

npm i rrweb-player

直接上代码

<template><div class="record-page"><div style="margin-bottom: 15px;"><el-button @click="startRecording" :disabled="videoStart" size="small">开始录制</el-button><el-button @click="stopRecording" :disabled="!videoStart" size="small" id="btn-stop-recording">结束录制</el-button></div><video controls autoplay playsinline ref="video" width="400" height="300"></video></div>
</template><script>
import RecordRTC from 'recordrtc'
export default {name: 'screenRecord',data () {return {video: null,videoStart: false,recorder: null}},created () {console.log(navigator.getDisplayMedia)if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {const error = 'Your browser does NOT support the getDisplayMedia API.'throw new Error(error)}},mounted () {this.video = document.querySelector('video')},methods: {// 调用获取显示媒体invokeGetDisplayMedia (success, error) {const displaymediastreamconstraints = {video: {displaySurface: 'window', // monitor, window, application, browserlogicalSurface: false,cursor: 'always' // never, always, motion}}// above constraints are NOT supported YET// that's why overridnig them// displaymediastreamconstraints = {//   video: true// }if (navigator.mediaDevices.getDisplayMedia) {console.log(navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints))navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error)} else {navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error)}},// 捕获屏幕captureScreen (callback) {this.invokeGetDisplayMedia(screen => {console.log(screen)this.addStreamStopListener(screen, () => {//})callback(screen)},function (error) {console.error(error)alert('Unable to capture your screen. Please check console logs.\n' + error)})},addStreamStopListener (stream, callback) {stream.addEventListener('ended',function () {callback()callback = function () {}},false)stream.addEventListener('inactive',function () {callback()callback = function () {}},false)stream.getTracks().forEach(track => {track.addEventListener('ended',() => {this.stopRecording()callback()callback = function () {}},false)track.addEventListener('inactive',function () {callback()callback = function () {}},false)})},startRecording () {this.captureScreen(screen => {this.video.srcObject = screenthis.recorder = RecordRTC(screen, {type: 'video'})this.recorder.startRecording()// release screen on stopRecordingthis.recorder.screen = screenthis.videoStart = true})},stopRecordingCallback () {this.video.src = this.video.srcObject = nullthis.video.src = URL.createObjectURL(this.recorder.getBlob())// 如果需要下载录屏文件可加上下面代码const url = URL.createObjectURL(this.recorder.getBlob())const a = document.createElement('a')document.body.appendChild(a)a.style.display = 'none'a.href = urla.download = new Date() + '.mp4'a.click()window.URL.revokeObjectURL(url)// 以上是下载所需代码this.recorder.screen.stop()this.recorder.destroy()this.recorder = nullthis.videoStart = false},stopRecording () {this.recorder.stopRecording(this.stopRecordingCallback)}}
}
</script><style scoped>
</style>

效果：

vue项目中实现录屏两种方式rrweb和RecordRTC相关推荐

在Vue项目中使用Echarts的一种方式
主要使用了vue-echarts 1.依赖: npm i echarts -S npm i jquery -S npm i vue-echarts -S 2.使用在main.js中: import ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
Vue项目中添加锁屏功能
0. 直接上预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
实验四：使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
贺邦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数 ...
Java中HashMap遍历的两种方式
第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...
使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
实验4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用姓名:李冬辉学号:20133201 注: 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http ...
sh执行文件参数传递_详解shell中脚本参数传递的两种方式
方式一:$0,$1,$2.. 采用$0,$1,$2..等方式获取脚本命令行传入的参数,值得注意的是,$0获取到的是脚本路径以及脚本名,后面按顺序获取参数,当参数超过10个时(包括10个),需要使用${ ...

vue项目中实现录屏两种方式rrweb和RecordRTC

1.rrweb

效果：

2.RecordRTC

vue项目中实现录屏两种方式rrweb和RecordRTC相关推荐

最新文章

热门文章