深夜总结视频可回溯系统技术方案vue3+ts+tegg+mysql+redis+oss，源码共享

一、 项目背景

保险、基金、银行等众多行业在做技术平台时都会需要一种能够准确了解用户操作行为的方式方法。诸如通过埋点、平台监控、视频可回溯等，通过技术手段，保存用户操作轨迹，以此规范安全销售、平台健康检查、出现纠纷时可追溯、问题出现有证据。 为规范保险行业销售行为，zf出台相关政策：

了解政策原文

在本人开发系统之前，全网似乎也有几家公司已经在推广销售双录系统，但是介于价格较高，且本人有兴趣挑战这种比较大型的平台系统。对未知领域充满无限好奇心的驱动力使我一步一步将一套完整的视频可回溯项目比较完整的实现了。在此先给自己鼓个掌！👍👍😁

二、前期准备

• 行业研究：

  • 怎么将用户在web前端应用（pc端、h5移动端等）的操作轨迹通过视频的形式保存下来可以说是一个比较难实现的技术要求。
  • 最初想法：寻找录屏插件、通过轮询截图，最后生成视频、等等不太可行的方案都想过。后来经过各种问度娘，搜github, 技术论坛；
  • 最终锁定到了github一个非常优秀的开源框架rrweb上。一句话，这个框架核心思想就是，将用户操作的行为通过mutationObseverjs原生方法将dom按照时间顺序保存成对象数组，数组里是包含唯一的dom、value、事件等。实现原理可以看这篇文章戳这里

• 功能要素：

  • 该开源框架提供了核心部分，但是怎么利用这个底层框架，开发一套完整的系统也是一件不简单的事；
  • 该系统需要包含以下几个大模块：
  • 1. 放在web项目的录屏sdk（应具备无代码浸入方式接入）
  • 2. 需要一套后台管理系统，分为前端界面和后端服务
  • 3. 数据存储方法论，数据治理、数据清洗等
  • 4. 系统应具备安全稳定，方便部署应用的能力

• 技术方案：

  • 本人前端出身，对宇宙后端第一大语言Java学习的还不够，自知学海无涯、无心无力边学边用，java就果断放弃。
  • 选择了同样优秀但是目前仍然比较新的后端开发框架tegg, tegg是eggjs的升级版本，加入了ts元素和注解方式，约定优于配置是其灵魂，加入respository我认为是最好用的，扯远了。
  • 技术核心如下：
  • 探针sdk(录屏)（vue3+ts+vite+pako+loadsh-es等，也包括打包所用工具css、js文件注入，js混淆加密等）
  • 后端管理系统(前端)（vue2+ant-design-vue+vue全家桶+rrweb+loadsh+store等）
  • 后端管理系统(后端)（tegg框架相关+ali-oss+mysql+egg-redis+pako+puppeteer+rrweb+rrweb-player等）
  • 项目管理：本项目采用pnpm monorepo微前端管理体系。eslint+pretter+commitlint提交规范配置+stylelint样式规范等前端基础工程化配置。
  • 存储：使用mysql数据库+redis缓存数据库+阿里云oss永久存储
  • 部署：采用Dockerfile及docker-compose.yml配合docker容器部署
  • 发布：使用jenkins代码发布工具+gitee版本仓库
  • 服务器: 云服务器

三、 项目开发

1. 录屏sdk

• sdk应具备的能力：

  1. 视频文件events的收集上报
  2. sdk鉴权方式
  3. sdk与使用方业务关联（例如，绑定订单id,通过订单id查询此视频）
  4. 业务方需主动触发结束录屏动作
  5. 需要配置业务web哪个页面需要录屏
  6. 功能上考虑节流防抖，click、scroll、keyup页面事件操作时的上报策略等

• sdk服务于sdk探针：

  1. 本项目使用sdk与sdk服务（node）相互配合达到一行代码注入使用的能力。
  2. js混淆加密使项目更加安全。

<script defer src="http://127.0.0.1:8085/snail_record_wr_start?id=&#