前端录制与回放

1. 背景

　　1.1 selenium等自动化测试工具

　　1.2 webRTC屏幕录制

　　1.3 rrweb+rrwebplayer

2. 对比

　　selenium适用于自动化测试、自动运行脚本；webRTC适用于录制视频与上传分析；rrweb适用于后台录制与行为分析。都可用来排查问题、指导用户操作等场景。

3. rrweb使用

　　3.1 引入

　　npm i来安装rrweb和rrwebplayer

　　3.2 api

　　rrweb.record，可接收多个参数，第一个参数为响应，其他为配置；

　　rrwebPlayer，target回放元素，props配置项；

　　3.3 示例

// HTML
<template>
  <div class="main">
    <div >
      <el-button @click="record">录制</el-button>
      <el-button @click="replay">回放</el-button>
      <el-button @click="reset">返回</el-button>
    </div>
    <div v-if="!showReplay"