前端录屏工具开发--可用于工程化错误回放

最新推荐文章于 2022-12-26 23:54:10 发布
最新推荐文章于 2022-12-26 23:54:10 发布
阅读量510 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33332184/article/details/113776848
版权

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>
<div style="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><textarea style="height: 80px;width: 200px;"></textarea>
</div>

<div style="float: left;">
    <h1>模拟背景颜色，用来检验录屏画质</h1>
    <div style="width: 100%;height: 50px;background-color: red;"></div>
    <div style="width: 100%;height: 50px;background-color: green;"></div>
    <div style="width: 100%;height: 50px;background-color: #ff50d0;"></div>
    <div style="width: 100%;height: 50px;background-color: #7eff1f;"></div>
</div>
<p></p>
<div style="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) {
                // 用任意方式存  储 event
                console.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">
          <textarea
                  id="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>
        <button
                class="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 = true
        const self = this
        record({
          emit(event) {
            if (self.recordFlag) {
              self.events.push(event)
            }
          },
        })
      },
      playRecord() {
        const rrwebEl = document.getElementById('rrweb')
        // eslint-disable-next-line no-new
        new RrwebReplay({
          target: rrwebEl,
          data: {
            events: this.events,
            autoPlay: true,
          },
        })
      },
      resetRecord() {
        this.recordFlag = false
        this.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-new
        new 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;
  }
  .switch
  input[type='checkbox']:checked
  + label.svelte-1mmdovf.svelte-1mmdovf:before {
    background: rgb(73, 80, 246);
  }
  .switch
  input[type='checkbox']:checked
  + label.svelte-1mmdovf.svelte-1mmdovf:after {
    animation: switch-on 0.2s ease-out;
    left: 1.1em;
  }
</style>

这里保存录像，可以采用setInterval，每个多少秒上传一次

代码效果

在这里插入图片描述
在这里插入图片描述

niuyueyang
关注
专栏目录
前端开发专业录屏截图软件（免安装版）
09-18
一款轻量级录屏截图软件集成器，免安装版，FSCapture质上是一款图像软件，具有很棒的图像浏览、编辑和抓屏工具，支持包括BMP、JPEG、JPEG 2000、GIF、PNG、PCX、TIFF、WMF、ICO 和TGA在内的所有主流图片格式，同时拥有不规则抓图、滚动抓图、活动窗口抓图、图片简单处理、屏幕录制等很多很多实用的功能，真是数不胜数。
【音视频工具】前端屏幕录制工具 + 录制＜video＞标签内容
darlingmz的博客
01-29 932
网页版本的推、拉流页面，含有标签，屏幕录制需要处理很多边角，选择直接录制流内容本身，录制标签内容
前端错误监控之用户行为回放
GitChat
04-28 729
有时候错误上报完成解析具体行号后，并不能立马判断出是什么问题，我们可能需要知道用户当时操作的流程，比如在 Android 是点击了某个 button，然后发起了一个 Ajax 请求，控制台打印了某些日志，有点击某个 button 然后出错了，这个时候会触发错误上报，要是能把当之前用户的操作也记录下来就好了...
前端专用的截图，取色，录屏，可以自由录屏
07-10
FastStone Capture (FSCapture) 是经典好用的屏幕截图软件，还具有图像编辑和屏幕录制两大功能，可以捕捉全屏图像，或者活动窗口、窗口内的控件对象截图、支持手绘区域自由截图，或者滚动窗口等等，支持所有主流图片格式。FastStone 捕获可保存为 BMP、GIF、JPEG、PCX、PNG、TGA、TIFF 和 PDF 格式的文件。FastStone Capture 已经支持固定区域截图和重复上次截取功能，也增强了滚动窗口截图性能，支持到各大浏览器的最新版本。
一个用于录制用户输入操作并实时回放的小工具
weixin_33688840的博客
11-18 494
下载链接： git clone git://github.com/barzooka/robert.git 或者 http://files.cnblogs.com/files/pengdonglin137/robert.tar.gz
电脑软件录屏工具OBS-Studio-22.0.2-Full-Installer-x64.rar
10-20
在这个压缩包中，"电脑软件录屏工具OBS-Studio-22.0.2-Full-Installer-x64.exe" 是主安装程序。 OBS Studio的主要功能包括： 1. **多源场景**：用户可以创建多个包含不同源的场景，如桌面屏幕、摄像头视频、媒体...
windows开源录屏工具Captura-Portable9
最新发布
11-13
7. **定时录制**：用户可以预先设定录屏开始和结束时间，方便自动化任务，如无人值守时自动录制屏幕。 8. **命令行参数**：对于高级用户，可以通过命令行参数来控制Captura的启动和录屏设置，提高效率。 9. **多...
电脑软件超级清晰的电脑录屏工具Bandicam-v5.1.0.1822.rar
10-23
Bandicam是一款备受推崇的电脑录屏工具，以其出色的视频质量、高效的性能和用户友好的界面赢得了广大用户的喜爱。在v5.1.0.1822版本中，它继续提供了一系列强大的功能，旨在满足从新手到专业人士的各种录制需求。 ...
免费录屏软件Captura-Portable
10-22
在当今数字化时代，录屏软件已经成为许多用户日常生活和工作中不可或缺的工具，无论是制作教学视频、游戏直播还是远程协作，都需要高效的录屏解决方案。今天我们要深入探讨的是一款名为“Captura-Portable”的免费...
录屏软件----EV录屏
09-25
EV录屏是一款备受用户好评的免费录屏软件，它的出现为需要进行屏幕录制的用户提供了一个高效、便捷的解决方案。在日常生活中，无论是制作教程、游戏直播、网络会议记录，还是远程教学，录屏软件都扮演着重要的角色。...
rrweb旨在利用现代浏览器所提供的强大API录制并回放任意web界面中的用户操作
08-10
rrweb 旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作
前端录屏 + 定位源码，帮你快速定位线上 bug
zz_jesse的博客
12-26 814
前言如何快速定位线上bug，是多数开发者都会遇到的难题web-see[1]前端监控方案，提供了 前端录屏+定位源码 方式，让bug无处藏身这是前端监控的第二篇，该篇讲解如何实现错误还原功能，第一篇 从0到1搭建前端监控平台，面试必备的亮点项目（已开源）[2] 没有看过的小伙伴，建议先了解下最终效果在监控后台，通过报错信息列表，可以查看具体报错的源码，以及报错时的录屏回放效果演示：录屏记录了用户的...
前端录制回放初体验
时清云的博客
04-29 1477
1. 问题背景 1.1 什么是前端录制回放? 顾名思义，就是录制用户在网页中的各种操作，并且支持能随时回放操作。 1.2 为什么需要？ 说到需要就不得不说一个经典的场景，一般前端做异常监控和错误上报，会采用自研或接入第三方 SDK 的形式，来收集和上报网站交互过程中 JavaScript 的报错信息和其它相关数据，也就是埋点。 在传统的埋点方案中，根据 SourceMap 能定位到具体报错代码文件和行列信息等。基本能定位大部分场景问题，但有一些情况下是很难复现错误，多是在测试扯皮的时候，程序员口头禅之一（我
神策数据王磊：如何用 JS 实现页面录制与回放
神策数据
05-18 402
本文根据神策数据资深前端研发工程师王磊《如何用 JS 实现页面录制与回放》的直播整理而成。以下为正文：一、业务背景对于研发来说，总是需要处理一些线上问题。To B 和To C企业在应对...
前端页面的值存到session_前端错误监控之用户行为回放
weixin_39547158的博客
11-28 211
hucheng91：生产环境通过SourceMap还原压缩后JavaScript错误，快速定位异常​zhuanlan.zhihu.comhucheng91：前端错误监控之SourceMap还原Vue Demo 实现​zhuanlan.zhihu.com有时候错误上报完成解析具体行号后，并不能立马判断出是什么问题，我们可能需要知道用户当时操作的流程，比如在 Android 是点击了某个 button...
rrweb 中文使用说明
PHPER
12-06 2952
rrweb 在录制时会不断将各类 event 传递给配置的 emit 方法，你可以使用任何方式存储这些 event 以便之后回放。
rrweb学习案例（网页录制，回放）-demo
何时林听@
09-18 2282
昨天在抖音上刷到了一个up主分享的一个好玩儿的东西，叫做rrweb，它可以帮助我们录制网页视频/快照网页内容，这样我们可以清晰的看到记录的用户行径，便于优化我们的系统。 文档地址：热门极速下载/rrweb 下面是我进行学习的一个使用案例 首先我选择了HbuilderX快速创建一个空的vue项目。 前端组件选择了 ant-design-vue ，很久没用了，熟悉一下，虽然写不了几行代码哈哈。 1、main.js引入ant-design-vue 相关依赖 import Vue from 'vue'
USB摄像头录屏开发实例：H.264编码与实时传输
本篇文章主要介绍了如何使用USB摄像头进行录屏开发，并详细列举了实际操作步骤与相关的FFmpeg指令。以下将对关键知识点进行详细阐述： 1. **设备列表**： 文档首先提到了USB摄像头的设备名称，如 "USBCAM2" 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值