前端——》使用Rrweb实现无感知录屏及回放

先看效果：

效果1

效果2

如图所示，当我在页面上进行一些交互的时候，我的操作：包括输入内容、鼠标滑动等操作轨迹 都在我毫无感知的情况下被录制到后台。如果不是受到中国保监会关于印发《保险销售行为可回溯管理暂行办法》的通知，公司要做投保流程的回溯功能，在h5页面实现录屏绝对是一个天马行空的离谱需求了。

既然监管有提需求，那么我们就来实现，通过rrweb...

涉及到的技术栈：rrweb、JavaScript、vue。我把该功能分为：录制端（H5页面）、播放端（后台管理系统）。

录制端

在录制端我没有通过npm install的方式安装依赖，而是直接引用下载好的js文件，就是下面这三个js文件

<script src="../../rrweb/js/rrweb.min.js"></script>
<script src="../../rrweb/js/rrweb-index.js"></script>
<script src="../../rrweb/js/rrweb-record.min.js"></script>
<script type="text/javascript">
    //1.存放DOM节点数据
    let events = [];
    //2.点击录制，按理来说会有一个rrwebStart
    function rrwebStart() {
        //emit会监听所有的DOM的动作， 鼠标等，
        rrwebMin.record({
            emit(event) {
                // 用任意方式存  储 event
                events.push(event);
            },
        });
    }
     //3.这一步，应该把数据转为JSON ，然后发送到后台存储，
    function rrwebSave() {
        const eventJson = JSON.stringify({ events });
        // 清空events
        events = []
        console.log(eventJson)
    }

    // 这个暂停的方法没用到
    let stopFn = rrweb.record({
          emit(event) {
            if (events.length > 100) {
              // 当事件数量大于 100 时停止录制
              stopFn();
            }
    }
</script>

播放端

1 首先在项目中添加播放依赖

# 执行命令
yarn add rrweb-player

2 由于本地eslint的检查，在new rrwebPlayer的时候需要添加如图的两行注释代码 避免检查

<template>
   <div id="replaycontent" style="width: 1000px;height: 500px;background-color: #cccccc"></div>
</template>

import rrwebPlayer from 'rrweb-player'
import 'rrweb-player/dist/style.css'

export default {
    data () {
        return {
            ...FormConfig,
            loading: false,
            visible: false,
            confirmLoading: false,
            events: []
        }
    },
    methods: {
        async show () {
            this.visible = true
            this.getRecord()
        },
        getRecord () {
            workPlaceService.getRrwebJson().then(res => {
                // res的值就是 录制端的 eventJson，json格式
                const events = res
                /* eslint-disable no-new */
                /* eslint new-cap: ["error", { "newIsCap": false }] */
                new rrwebPlayer({
                    target: document.getElementById('replaycontent'),
                    data: events
                })
            })
        }
    }
}

3 播放器的样式是css内置的，包括1、2、4、8倍速，播放、暂停按钮的功能都是内置的，不用额外写sql

数据端

rrweb录制的dom元素通过序列化为json后 虽然比mp4格式所占的内存小了非常多，但是一个常规的页面输入、校验的json大小也在二三百Kb，如果存到mysql数据库，无疑会产生非常大的负担，可以考虑存到oss对象储存库，而在mysql数据库中只存该段json对应的oss地址，每次读到地址后从oss库中直接读取json文件内容。

目前该需求还未上线，仅在此记录，以备不时之需...