前言

今天项目中需要增加以及录屏bug和提交相关信息的需求，于是找了很多插件，最终选择了rrweb插件，这里实际记录vue3中使用该组件实现功能，还有遇到的几个问题和解决办法与思考

一、rrweb与rrweb-player引入项目中

npm install rrweb
npm install rrweb-player

二、使用步骤

1.引入代码

import * as rrweb from 'rrweb';
import rrwebPlayer from 'rrweb-player';

2.html部分代码

<template>
<divv-show="recordVisible"id="addContent"><div class="el-overlay-dialog"><div class="el-dialog"><header class="el-dialog__header"><span role="heading" class="el-dialog__title">提Bug</span><button aria-label="Close this dialog" class="el-dialog__headerbtn" type="button" @click="onCloseBug">X</button></header><div class="el-dialog__body" style="padding: revert;">//这里是表格元素，<el-form :model="form" :inline="true" class="demo-form-inline" label-width="120px"  size="small"><el-form-item label="所属产品"><el-select v-model="form.region" placeholder="please select your zone"><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="所属模块"><el-select v-model="form.region" placeholder="please select your zone"><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item></el-form>//这里是包含录屏的div<div id="playback" style="width: 1050px;height: 350px;overflow: hidden">
//这里是包含录屏的div</div></div>
</div>
</template>

3.script部分代码

 let events=[]//这里存放录屏的信息，rrweb-player解析的是这个//找两个按钮绑定这两个方法就行了
//省略部分代码methods: {//开始录制调用的方法onStartRecord(){events=[];new rrweb.record({emit(event) {// 用任意方式存储 eventevents.push(event)},})},//结束录制调用的方法onStartPlayer(){this.recordVisible = true;new rrwebPlayer({target: document.getElementById("playback"), // 可以自定义 DOM 元素props: {events,width:'1050',height:'200',},});}}

三、遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助

1.这个录屏本来是放在el-dialog弹窗组件里的，原始代码如下，但是一直到录屏结束调用上面的方法onStartPlayer()就是会报错,一开始我以为是我导入的包有问题，基本弄了一天，首先发现放在最外面是可以正常显示录屏的，类似如下

<template>
<div id="playback" style="width: 1050px;height: 350px;overflow: hidden">
</template>

然后需求是在el-dialog弹窗里显示录屏视频，但是放在el-dialog就不显示了，一直报错，最后发现是el-dialog这个元素一开始是没有的，只有 v-model=true时才会加载，而这行代码target: document.getElementById("playback")在一开始是获取不到的，所以最终放弃了el-dialog的使用，用div模仿了el-dialog的样式就正常了

  <el-dialogv-model="listVisible"title="Tips"width="60%">//这里是包含录屏的div<div id="playback" style="width: 1050px;height: 350px;overflow: hidden">
//这里是包含录屏的div></el-dialog>

2.解决了第1个问题之后接着遇到了第2个棘手的问题，ui设计是在弹窗里跟表单一起，所以我理所当然的将<div id="playback" style="width: 1050px;height: 350px;overflow: hidden">放在了el-form 里面，视频可以正常显示，但是按下面的功能按键之类的会跳转页面，基本也耗费了大半天的时间，最后是在不断摸索中找到了方法，把这个<div id="playback" style="width: 1050px;height: 350px;overflow: hidden">放在了el-form外面，不在该元素里，就正常了，但是原理暂时还不知道。
4.最后一个问题就是已经录屏了一个但是关闭弹窗需要清空，直接贴解决办法，在关闭弹窗的方法里加上这个就可以重置了。

 const replayEl = document.getElementsByClassName('rr-player')[0]if (replayEl) replayEl.remove();

四、有问题可以互相讨论哦

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考相关推荐

补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能问题描述提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
网页录屏 - rrweb
文章目录 1.rrweb 是什么 2.基本概念 3.安装 4.录制和播放(vue) 5.原理官网: https://www.rrweb.io/ github: https://gitcode.net ...
网页录屏(帧记录)调研总结
帧记录关键点首先,每一次会话都有一个唯一的session ID,这是串联起所有行为的纽带. 其次,用户行为又分成两个部分,其一是用户的操作,比如鼠标滑动,点击,页面滚动等,其二是页面的变化.这两者我 ...
抖音中的视频怎么使用手机录制安卓手机录屏软件哪个好
抖音短视频已经普及一段时间了,这个效果我们都看到了,不管走到哪里,几乎可以达到人人都在刷抖音的壮观场面,坐在公交上,等公交都是看个短视频的好时间,经常刷抖音的朋友一定分享过抖音视频给好友,但是如果直接 ...
Vue3中内置组件 Teleport 详解
1. 基本概念 1.1 简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
vue项目中实现录屏两种方式rrweb和RecordRTC
rrweb原理 rrweb 是一个实现web页面录制和回放的基础库 ,它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据,以实现远程回放. RecordRTC原理 1.rrweb 安装npm ...
Vue3中使用Monaco Editor代码编辑器记录～持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器前端框架使用Vue3 + elementUI m ...
vue3中axios跨域问题解决记录
问题: 在vue3中使用axios,因为后端运行在本机11000端口,vue运行在8080端口,所以理所当然遇到了跨域问题问题解决: 网上查了许多方法,试过很多,但最后只用这样做问题就解决了. ...

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考

文章目录

前言

一、rrweb与rrweb-player引入项目中

二、使用步骤

1.引入代码

2.html部分代码

3.script部分代码

三、遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助

四、有问题可以互相讨论哦

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考相关推荐

最新文章

热门文章

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考

文章目录

前言

一、rrweb与rrweb-player引入项目中

二、使用步骤

1.引入代码

2.html部分代码

3.script部分代码

三、 遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助

四、有问题可以互相讨论哦

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考相关推荐

最新文章

热门文章

三、遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助