前端录屏工具开发--可用于工程化错误回放
2024-06-12 08:04:06
rrweb
https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md
html页面直接引入，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>rrweb demo web site</title><script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script><script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script><link rel="stylesheet" crossorigin="anonymous"href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" /><script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
</head>
<body>
<divstyle="float: left;"><h1>这里模拟一些html代码：</h1><label>用户名</label><input type="text"style="height: 30px;width: 200px;"><label>密码</label><input type="password"style="height: 30px;width: 200px;"><label>邮箱</label><input type="email"style="height: 30px;width: 200px;"><label>备注</label><textareastyle="height: 80px;width: 200px;"></textarea>
</div><divstyle="float: left;"><h1>模拟背景颜色，用来检验录屏画质</h1><divstyle="width: 100%;height: 50px;background-color: red;"></div><divstyle="width: 100%;height: 50px;background-color: green;"></div><divstyle="width: 100%;height: 50px;background-color: #ff50d0;"></div><divstyle="width: 100%;height: 50px;background-color: #7eff1f;"></div>
</div>
<p></p>
<divstyle="float: left;"><h1>视频回放</h1><div id="playback"style="width: 1000px;height: 500px;background-color: #cccccc"></div>
</div>
<button onclick="get_start()">点击录制</button>
<button onclick="playback()">点击播放</button>
</body>
<script>//1.存放DOM节点数据let events = [];//2.点击录制function get_start() {//rrwebMin 为启动对象//record() 方法启动录制//emit会监听所有的DOM的动作， 鼠标等，rrwebMin.record({emit(event) {// 用任意方式存 储 eventconsole.log(event);events.push(event);},});alert('正在录制')}//3.这一步，应该把数据转为JSON ，然后发送到后台存储，可以写个循环，10S发送一次，再定义一个窗口关闭事件监听，最后关闭时发送一次数据//SON.stringify({ events });//4.点击回放function playback() {new rrwebPlayer({target: document.getElementById('playback'), // 可以自定义 DOM 元素data: {events,},});}</script>
</html>
- 打开index.html，点击录制开始录制
- 点击播放开始回访
- 这里关键数据就是events，他可以将操作动作回放出来，并且可以将它保存在数据库中
代码效果
vue
<template><div class="main"><div class="container"><div class="row"><div class="col-25"><label for="fname">First Name</label></div><div class="col-75"><input type="text" name="firstname" placeholder="Your name.." /></div></div><div class="row"><div class="col-25"><label for="lname">Last Name</label></div><div class="col-75"><input type="text" name="lastname" placeholder="Your last name.." /></div></div><div class="row"><div class="col-25"><label for="country">Country</label></div><div class="col-75"><select id="country" name="country"><option value="australia">Australia</option><option value="canada">Canada</option><option value="usa">USA</option></select></div></div><div class="row"><div class="col-25"><label for="subject">Subject</label></div><div class="col-75"><textareaid="subject"name="subject"placeholder="Write something.."style="height: 200px"></textarea></div></div><div class="row"><input type="submit" value="Submit" /></div></div><div class="rr-block action"><div class="record"><button class="btn-record" @click="startRecord()">开始录屏</button><buttonclass="btn-replay":disabled="events.length < 2"@click="playRecord()">回放录屏</button></div><div class="reset"><button @click="resetRecord()">重置录屏</button><button @click="saveRecord()">保存录屏</button>
<!-- <button @click="replaySavedRecord()">重置保存录屏</button>--></div></div><div id="rrweb" class="replay"></div></div>
</template>
<script>import RrwebReplay from 'rrweb-player'import { record } from 'rrweb'export default {data() {return {events: [],recordFlag: false,}},methods: {startRecord() {this.recordFlag = trueconst self = thisrecord({emit(event) {if (self.recordFlag) {self.events.push(event)}},})},playRecord() {const rrwebEl = document.getElementById('rrweb')// eslint-disable-next-line no-newnew RrwebReplay({target: rrwebEl,data: {events: this.events,autoPlay: true,},})},resetRecord() {this.recordFlag = falsethis.events = []const replayEl = document.getElementsByClassName('rr-player')[0]if (replayEl) replayEl.remove()},saveRecord() {const data = JSON.stringify(this.events)window.localStorage.setItem('rrweb', data)},replaySavedRecord() {const replayEl = document.getElementsByClassName('rr-player')[0]if (replayEl) replayEl.remove()const rrwebEl = document.getElementById('rrweb')const savedEvents = window.localStorage.getItem('rrweb')// eslint-disable-next-line no-newnew RrwebReplay({target: rrwebEl,data: {events: JSON.parse(savedEvents),autoPlay: true,},})},},}</script>
<style>.main {position: relative;}.replay {top: 0;left: 200px;position: absolute;}.action {padding-top: 20px;}.reset {padding-top: 20px;}.container {max-width: 1000px;}* {box-sizing: border-box;}input[type='text'],select,textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;}label {padding: 12px 12px 12px 0;display: inline-block;}input[type='submit'] {background-color: #4caf50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;}input[type='submit']:hover {background-color: #45a049;}.container {border-radius: 5px;background-color: #f2f2f2;padding: 20px;}.col-25 {float: left;width: 25%;margin-top: 6px;}.col-75 {float: left;width: 75%;margin-top: 6px;}/* Clear floats after the columns */.row:after {content: '';display: table;clear: both;}.rr-controller.svelte-dxnc1j.svelte-dxnc1j {width: 100%;height: 80px;background: #fff;display: flex;flex-direction: column;justify-content: space-around;align-items: center;border-radius: 0 0 5px 5px;}.rr-timeline.svelte-dxnc1j.svelte-dxnc1j {width: 80%;display: flex;align-items: center;}.rr-timeline__time.svelte-dxnc1j.svelte-dxnc1j {display: inline-block;width: 100px;text-align: center;color: #11103e;}.rr-progress.svelte-dxnc1j.svelte-dxnc1j {flex: 1;height: 12px;background: #eee;position: relative;border-radius: 3px;cursor: pointer;box-sizing: border-box;border-top: solid 4px #fff;border-bottom: solid 4px #fff;}.rr-progress.disabled.svelte-dxnc1j.svelte-dxnc1j {cursor: not-allowed;}.rr-progress__step.svelte-dxnc1j.svelte-dxnc1j {height: 100%;position: absolute;left: 0;top: 0;background: #e0e1fe;}.rr-progress__handler.svelte-dxnc1j.svelte-dxnc1j {width: 20px;height: 20px;border-radius: 10px;position: absolute;top: 2px;transform: translate(-50%, -50%);background: rgb(73, 80, 246);}.rr-controller__btns.svelte-dxnc1j.svelte-dxnc1j {display: flex;align-items: center;justify-content: center;font-size: 13px;}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j {width: 32px;height: 32px;display: flex;padding: 0;align-items: center;justify-content: center;background: none;border: none;border-radius: 50%;cursor: pointer;}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:active {background: #e0e1fe;}.rr-controller__btns.svelte-dxnc1j button.active.svelte-dxnc1j {color: #fff;background: rgb(73, 80, 246);}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:disabled {cursor: not-allowed;}.replayer-wrapper {position: relative;}.replayer-mouse {position: absolute;width: 20px;height: 20px;transition: 0.05s linear;background-size: contain;background-position: 50%;background-repeat: no-repeat;background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==');}.replayer-mouse:after {content: '';display: inline-block;width: 20px;height: 20px;border-radius: 10px;background: #4950f6;transform: translate(-10px, -10px);opacity: 0.3;}.replayer-mouse.active:after {animation: click 0.2s ease-in-out 1;}.replayer-mouse-tail {position: absolute;pointer-events: none;}@keyframes click {0% {opacity: 0.3;width: 20px;height: 20px;border-radius: 10px;transform: translate(-10px, -10px);}50% {opacity: 0.5;width: 10px;height: 10px;border-radius: 5px;transform: translate(-5px, -5px);}}.rr-player {position: relative;background: white;float: left;border-radius: 5px;box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);}.rr-player__frame {overflow: hidden;}.replayer-wrapper {float: left;clear: both;transform-origin: top left;left: 50%;top: 50%;}.replayer-wrapper > iframe {border: none;}.switch.svelte-1mmdovf.svelte-1mmdovf {height: 1em;display: flex;align-items: center;}.switch.disabled.svelte-1mmdovf.svelte-1mmdovf {opacity: 0.5;}.label.svelte-1mmdovf.svelte-1mmdovf {margin: 0 8px;}.switch.svelte-1mmdovf input[type='checkbox'].svelte-1mmdovf {position: absolute;opacity: 0;}.switch.svelte-1mmdovf label.svelte-1mmdovf {width: 2em;height: 1em;position: relative;cursor: pointer;display: block;}.switch.disabled.svelte-1mmdovf label.svelte-1mmdovf {cursor: not-allowed;}.switch.svelte-1mmdovf label.svelte-1mmdovf:before {content: '';position: absolute;width: 2em;height: 1em;left: 0.1em;transition: background 0.1s ease;background: rgba(73, 80, 246, 0.5);border-radius: 50px;}.switch.svelte-1mmdovf label.svelte-1mmdovf:after {content: '';position: absolute;width: 1em;height: 1em;border-radius: 50px;left: 0;transition: all 0.2s ease;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);background: #fcfff4;animation: switch-off 0.2s ease-out;z-index: 2;}.switchinput[type='checkbox']:checked+ label.svelte-1mmdovf.svelte-1mmdovf:before {background: rgb(73, 80, 246);}.switchinput[type='checkbox']:checked+ label.svelte-1mmdovf.svelte-1mmdovf:after {animation: switch-on 0.2s ease-out;left: 1.1em;}</style>
这里保存录像，可以采用setInterval，每个多少秒上传一次
代码效果
前端录屏工具开发--可用于工程化错误回放相关推荐
- 用JS轻松实现一个录音、录像、录屏工具库
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- 前端录屏+定位源码，帮你快速定位线上bug
前言 如何快速定位线上bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身 这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 ...
- linux 录屏软件 按键,linux下常用的截图、录屏工具
linux下常用的截图.录屏工具 (2010-01-05 10:47:21) 由于和老公一起做一个百度俱乐部的小项目,在编写测试文档时要使用截图.录屏的小工具,于是展开搜索什么工具比较好使. 录屏: ...
- 推荐3款简约好用录屏工具
1.EV录屏 EV录屏是一款非常好用的国产录制软件,支持Windows.Mac.Android,你可以免费使用它来录制屏幕,拥有高清画质而且无水印与时间限制,你可以非常轻松的录制桌面 而对于专业人士, ...
- Win11如何录屏？压箱底的录屏工具分享给你
Win11如何录屏?我目前的工作需要经常用到录屏操作,听说win11电脑有自带的录屏功能,请问具体怎么操作呢?或者有没有好用的录屏工具推荐一下? 大部分人在使用的电脑的时候,因为不常用到录屏功能所以根 ...
- 6种电脑录屏工具，免费在线，桌面端Windows和Mac均适用
如果你想做一个教程类博主,不管是游戏类的,科技类的,还是语言类的,你首先需要一个不错的电脑录屏工具.自自媒体大流行开始以来,对电脑屏幕录制的需求有不断增长.来自不同领域的专业人士,例如教育领域的专业人 ...
- Camtasia喀秋莎2020中文版秘钥强大的录屏工具
作为一个自媒体人,每天都要录制编辑视频,选择一个好的视频编辑工具就是大家首先面临的一个难题,选择一个好工具,可以起到事半功倍的效果,大大提高工作效率. 视频编辑非常多,今天给大家推荐的是一款功能强大. ...
- ShowMore – 免费易用的在线录屏工具（可实时添加标注）
有时候,我们可能都需要将电脑屏幕操作活动给录制下来用于工作.学习或其他方面,比如说我们需要录制一小段在线视频,录制软件操作教程,录制电脑操作错误,录制一段自我展示视频,录制网络聊天视频,录制网络课程等 ...
- python录屏工具下载_Python移动端录屏库
Python移动端录屏库 背景 日常移动端专项测试和自动化测试通常有一些场景如:Ui自动化的操作捕获.App启动耗时.视频启播耗时等,通常都有需要边操作边录屏,而对于启动耗时测试通常还需要质量较高且帧 ...
- iShowU Studio for Mac(高清录屏工具)
iShowU Studio for Mac是一款高清录屏工具,拥有一个整洁但有用的屏幕录制界面,您可以直接访问所需的编辑工具.使用iShowU Studio Mac版可以添加文本,注释,过渡,指针和高 ...
最新文章
- OSChina 周六乱弹 —— 胖点其实挺好
- 提升Web应用程序性能的最佳实践
- python3 生成器的send_Python：生成器中send()的行为
- boost::sort模块spreadsort 完全排序的数据示例
- 联合索引使用规则(转载)
- 【Modern OpenGL】Shader
- python post上传大文件分片上传_基于七牛 用python实现分片上传 创建文件报错701...
- java hashcode 例子_Java UUID hashCode()用法及代码示例
- 建立一个全数据管理的分析平台，该如何落实？
- 数据的结构分类：结构化数据，半结构化数据以及非结构化数据
- 身份证号的每位数字的意义
- MySQL如何退出命令行
- Linux 系统进程、线程之间的爱恨纠葛
- python 读取本地txt文档发送邮件给qq邮箱
- Nbtscan介绍及使用
- 典型高速系统应用框图举例
- 如何绘制算法流程图？常见渠道一览
- Mac开发不上线打包dmg格式步骤
- 金仓数据库索引知多少
- 又快又稳，金融级分布式架构如何实现？
热门文章
- Expressive Body Capture: 3D Hands, Face, and Body from a Single Image
- codeforces838D - Airplane Arrangements
- VBA 获取最大行数和最大列数
- 计算机基础与知识点总结,计算机基础知识点总结
- SolidWorks如何提取stp格式装配体中的零件图
- 正方形数目 cmp 栈
- 使用vscode编写html代码
- 关于资金调拨系统的设计方法论
- Android子控件超出父控件的范围被覆盖问题
- 听云SDK影响其他项目报Caused by: java.lang.NoClassDefFoundError: Failed resolution of: Lcom/networkbench/agent