基于h5端的视频录制和回溯功能的实现

背景

出于目前的对保险项目的监管要求，需要对用户操作进行录屏保存，特别是提交资料、文件审核等核心操作。这样在用户与保险公司之间产生纠纷时，就可以有迹可循。市面上有的录屏系统太大并且收费较贵，无法适用于目前我们内嵌于ReactNative 的一个单页h5应用。基于此我们试图寻找一种类似快照记录的方式，将h5界面的历史行为记录下来。文章将以一个本地demo 的为例展开用法（gitee地址：gitee.com/zhengechitu… ）

1. DOM快照

当我们想要查看用户在投保过程中某一时刻的页面状态时，我们只需要将那一刻的页面 dom结构以及页面中的 css 样式记录下来，然后在浏览器中重新渲染出来就能达到回溯的效果了。这样我们就实现了某一时刻 DOM 快照的功能。但是这个录制还只是内存中的一个对象，并没有实现远程录制。为了实现远程录制，我们需要将这个内存对象序列化成字符串，保存到服务端，然后在回放的时候从服务器上取出来，交给浏览器重新渲染。

2. rrweb插件引入

rrweb原理 —— rrweb 通过记录初始页面的DOM 状态，或者特定某个时刻的DOM 状态，后续收集不同时间点的操作指令或者某个时刻某个DOM 的变化作为一个增量快照，在原先快照的基础上，不断加入根据行为解析的DOM 数据，构建了后续的快照，减少大量数据的存储或传输。

2.1 实现录制功能

写一个原生的静态界面，支持一些简单的交互操作，如下代码所示：

<div id="root">
    <div class="container">
        <div class="content">
            <span id="showText">0</span>
        </div>
        <div class="btnBox">
            <div id="decrease" class="btn">减少</div>
            <div id="add" class="btn">增加</div>
            <div id="payStart" class="btn">支付开始(sdk场景)</div>
            <div id="payEnd" class="btn">支付结束(sdk场景)</div>
            <div id="record" class="btn">录制</div>
            <div id="upload" class="btn">上传</div>
            <a id="play" class="btn" href="play.html" target="_blank">跳转到播放器</a>
        </div>
    </div>
</div>

录制 —— 点击录制，本地demo中方便测试会先调用 clearFile() 清除本地缓存，通过rrweb.record() 方法开始快照抓取界面操作，将所有的快照信息缓存在 rrwebEvents 队列。如果界面操作时间过长，缓存队列也会很大，所以需要在前端做分片文件处理，例如我们以rrwebEvents 长度 50 为分片的边界，当rrwebEvents长度为50时候，调用 uploadFile() 方法调用接口上传文件。每次上传成功后，会讲当前缓存的 rrwebEvents 队列内容清空。

import * as rrweb from '@palife/fork-rrweb'
let dispose = null
let rrwebEvents = []

......

record.onclick = function () {
    console.log('开始录制 ========>>>>>>>>>>>>>>')
    clearFile(); // 录制之前清楚本地缓存json文件
    dispose = rrweb.record({
        emit(event) {
            rrwebEvents.push(event);
            // 以 rrwebEvents 的长度作为分片持续上传：
            if(rrwebEvents.length >= 50) {
                uploadFile();
                // 分片之后清空队列：    
                rrwebEvents = [];
            }
        }
    })
}

// 接口上传文件
function uploadFile() {
    console.log('上传文件 ========>>>>>>>>>>>>>>', '\n', rrwebEvents);
    fetch('http://localhost:8076/upload', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            rrwebEvents
        })
    })
    .then(response => {
        console.log('response', response)
    })
    .catch(error => {
        console.log('error', error)
    })
}

上传 —— 录制结束之后需要上传缓存的文件，当rrwebEvents 长度到边界时，其实一直在执行上传的动作，当最后点页面的上传按钮时候，会处理当前的 rrwebEvents 内容。

upload.onclick = function () {
    console.log('结束录制 ========>>>>>>>>>>>>>>')
    if (dispose) {
        // 实际场景需要分片传输的话，就不需要这个关闭，当真正业务不需要录制的时候再调用
        // 分片逻辑是，序列化的rrwebEvents.length的累加大于某个值  --- 分片逻辑看业务需求
        dispose()
    }
    if (rrwebEvents.length === 0) return
    uploadFile();
    rrwebEvents = []
}

2.2 启用本地nodejs服务实现文件的后台处理

构建本地nodejs 服务处理前端上传的文件内容，获取到的文件快照会议json 的数据格式存在本地。通过增加文件处理的相关接口，可以实现前端本地的视频回放功能。

const Koa = require('koa')
const router = require('koa-router')()
const cors = require('koa-cors')
const bodyParser = require('koa-bodyparser')
const fs = require('fs')
const path = require('path')
const app = new Koa()
app.use(cors())
app.use(bodyParser())

app.use(router.routes())
app.use(async (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*')
    ctx.set(
        'Access-Control-Allow-Headers',
        'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'
    )
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
    if (ctx.method == 'OPTIONS') {
        ctx.body = 200
    } else {
        await next()
    }
})
// 前端上传文件内容，后台服务写入
router.post('/upload', ctx => {
    const jsonFile = path.join(process.cwd(), `./file/jsonFile${Date.now()}.json`)
    fs.writeFileSync(jsonFile, JSON.stringify(ctx.request.body.rrwebEvents))
    ctx.response.body = {
        status: '00'
    }
})
// 前端获取文件内容
router.post('/getFile', ctx => {
    const fileDirPath = path.join(process.cwd(), `./file`);
    const files = fs.readdirSync(fileDirPath);
    let file;
    if(files && files.length) {
        file = fs.readFileSync(`${fileDirPath}/${files[0]}`); // 此处只取第一个文件片段验证
    }
    ctx.response.body = {
        status: '00',
        data: JSON.parse(file)
    }
})
// 清理文件内容
router.post('/clearFile', ctx => {
    const fileDirPath = path.join(process.cwd(), `./file`);
    const files = fs.readdirSync(fileDirPath);
    if(files && files.length) {
        files.forEach(item => {
            const filePath = `${fileDirPath}/${item}`;
            fs.unlinkSync(filePath);
        })
    }
    ctx.response.body = {
        status: '00'
    }
})

app.listen(8076)

2.3 实现本地的录制视频回溯

新建一个播放页面，全局引入 rrwebPlayer 的源码用来支持视频的回放功能

<body>
    <div id="rrwebplayer"></div>
    <script src="./bundle.js"></script>
    <script>
        fetch('http://localhost:8076/getFile', {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            new rrwebPlayer({
                target: document.getElementById('rrwebplayer'),
                data: {
                    events: data.data,
                    skipInactive: true,
                    showDebug: false,
                    showWarning: false,
                    autoPlay: true
                }
            })
        })
    </script>
</body>