项目场景：

vue3中rrweb-player组件实现网页录屏功能

问题描述

提示：这里描述项目中遇到的问题：

录制的视频会重复记录录制中这个按钮的状态，每打开一次开始录制视频中就会多一个按钮，bug效果如下

<el-row class="mb-4" @click="onFinishRecord()" v-if="type == '1'"><span v-if="str!=''">{{this.str}}</span><div> <img src="./assets/recordAfter.png"></div><div>录制中</div></el-row>

原因分析：

一开始以为是录屏插件api里的设置问题，找遍了里面所有的api方法都太不行，最后在代码上找解决办法，因为想到v-if在false的时候是没有这个元素的，会不会是这个导致了录屏插件会记录这种凭空出来的元素，最后改成v-show的话问题解决。

解决方案：

<el-row class="mb-4" @click="onFinishRecord()" v-show="type == '1'"><span v-show="str!=''">{{this.str}}</span><div> <img src="./assets/recordAfter.png"></div><div>录制中</div></el-row>

搞了两天的问题没想到最后简单的解决了，还是摸索过程中思路需要多多拓展

补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决相关推荐

实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考
文章目录前言一.rrweb与rrweb-player引入项目中二.使用步骤 1.引入代码 2.html部分代码 3.script部分代码三. 遇到的3个问题总结,全部都是找了很久解决办法没找到 ...
网页录屏怎么录制？有哪些好用的录屏方法？
有时候我们需要录制网页上的视频或操作过程,这时候就需要使用录屏软件来进行录制.下面将介绍几种好用的录屏方法. 使用在线录屏工具有一些在线录屏工具可以直接在网页上进行录制,无需下载安装任何软件.其中比 ...
网页录屏将视频截图保存成gif图片并压缩的方法超详细
我在一个网站上找到一个视频素材很不错.于是利用360浏览器的网页录屏功能.先把视频录下来了.然后.使用迅雷播放器的gif工具.截取了需要的界面.然后手动选中要生成的时间轴!然后选择不同的分辨率即可! ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
Vue3中内置组件 Teleport 详解
1. 基本概念 1.1 简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
Vue3 中使用组合式API替换mixins，实现代码复用并解决隐患
我们在vue mixin混入–基础中聊过mixins可以使我们的代码进行复用,非常的灵活方便. 但是在vue3中却不推荐使用了,因为它存在一些问题. mixins问题不清晰的数据来源:当使用了多个 ...
网页录屏 - rrweb
文章目录 1.rrweb 是什么 2.基本概念 3.安装 4.录制和播放(vue) 5.原理官网: https://www.rrweb.io/ github: https://gitcode.net ...
谷歌浏览器中polyv直播间设置网页全屏和打开下置评论区
疫情期间,上网课,使用的是保利威polyv的直播服务打开直播间点击切换flash 会弹出以下窗口: 点击它,发现Chrome不允许运行flash(Chrome默认禁止flash) 地址栏右边出现插 ...
基于HTML5+JavaScript实现的网页录屏器设计
资源下载地址:https://download.csdn.net/download/sheziqiong/85773105 资源下载地址:https://download.csdn.net/downl ...

补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决