视频可回溯系统技术方案vue3+ts+tegg+mysql+redis+oss


highlight: a11y-dark
theme: yu

一、 项目背景

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

image.png

了解政策原文

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

image.png

二、前期准备

  • 行业研究:

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

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

    • 本人前端出身,对宇宙后端第一大语言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="h

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/757763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3使用jsx渲染以及注意点

安装对应的babel npm install vue-plugin-jsx -Dbabel配置: 在文件.babelrc 或者 babel.config.js中添加 {"plugins": ["vue/babel-plugin-jsx"] }写法&#xff1a; // 在App.tsx文件中编写 import { definedComponent, reactive } from "vue"…

设计模式 门面模式

01.先看写信的过程接口&#xff0c;定义了写信的四个步骤&#xff1a; public interface LetterProcess {//首先要写信的内容public void writeContext(String context); //其次写信封public void fillEnvelope(String address); //把信放到信封里public void letterInotoEnve…

java算法第23天 | ● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 思路&#xff1a; 这道题和删除节点异曲同工。不过要注意避坑&#xff1a;当遍历到不在范围内的节点时&#xff0c;不要直接返回null或直接返回其左或右孩子&#xff0c;而是继续对其左或右孩子做递归。 /*** Definition for a binary tree node.* public…

搭建EMQX MQTT服务器(超详细)

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;服务器是一种实现 MQTT 协议的服务器软件。MQTT 是一种轻量级的、发布/订阅模式的消息传输协议&#xff0c;通常用于物联网&#xff08;IoT&#xff09;应用中的设备通信。MQTT 服务器负责接收来自客户端的消息…

虚拟化技术在企业中的价值

在当前快速演变的商业环境中&#xff0c;企业面临的市场竞争压力正不断加剧。为了在这场竞争中保持自身的优势&#xff0c;公司急需寻找那些能够提升效率、削减成本以及加快创新步伐的解决方案。在这样的背景下&#xff0c;虚拟化技术作为一种强有力的工具&#xff0c;正助力众…

【SpringCloud】使用Seata实现分布式事务

目录 一、Seata 框架的需求背景二、Seata 事务模式与架构2.1 Seata 组成2.2 Seata 事务模式 三、Seata 实战演示3.1 部署 Seata Server3.1.1 下载 Seata Server3.1.2 更改 Seata Server 配置3.1.3 创建 Seata Server 所需的数据库、数据库表3.1.4 启动 Seata Server 3.2 Seata …

php作为服务器端语言,处理网页没有问题,但是gui就差了点。先看一下主流的gui框架有哪些

其他php桌面应用程序 1 PHP 程序打包为桌面应用-PHPDesktop 的 Linux 版本介绍 2 nativephp 3 借助 js 还可以用electron 还是tauri 除了wxWidgets和Qt&#xff0c;还有许多其他的GUI框架可供选择&#xff0c;每个框架都有其独特的优势和缺点。以下是一些常见的GUI框架及其特…

C++ 变量类型

C 变量类型 变量其实只不过是程序可操作的存储区的名称。C 中每个变量都有指定的类型&#xff0c;类型决定了变量存储的大小和布局&#xff0c;该范围内的值都可以存储在内存中&#xff0c;运算符可应用于变量上。 变量的名称可以由字母、数字和下划线字符组成。它必须以字母…

Fabric.js在vue2中使用

Fabric.js安装 这里我是基于vue来使用的&#xff0c;先安装上Fabric.js npm install fabric 在main.js中 import fabric from fabric Vue.use(fabric);Fabric 提供了 7 种基础形状&#xff1a; fabric.Circle (圆)fabric.Ellipse (椭圆)fabric.Line (线)fabric.Polyline (多条…

伊理威科技:抖音店铺运营好做吗

在数字营销的浪潮中&#xff0c;抖音以其强大的用户基础和独特的算法推荐机制成为了众多商家眼中的“香饽饽”。然而&#xff0c;对于许多初涉此领域的商家来说&#xff0c;心中不免有这样的疑问&#xff1a;“抖音店铺运营好做吗?” 运营一个抖音店铺并非易事。它既需要创意的…

【C语言】守护进程(daemon)的输出到一个文本文件

一、常用的守护进程函数 void daemonize () {//deamonizepid_t pid fork();if( pid > 0 ){ //parent exitexit(0);}//child continuesetsid();chdir("/");close(0);open("/dev/null", O_RDWR);//no env debugif(!getenv("debug")){cl…

Spring 拦截器实现请求拦截与参数处理【拦截器(Interceptor)和过滤器(Filter)的区别】

业务场景&#xff1a; 项目中需要使用请求头传输一个密文字符串&#xff0c;后端服务获取密文字符串后&#xff0c;进行解密验证&#xff0c;然后执行响应的业务&#xff0c;这里有好几个接口都用需要使用这个密文字符串&#xff0c;如果我们在每个接口中进行校验处理&#xff…

AI预测福彩3D第13弹【2024年3月20日预测--第3套算法重新开始计算第3次测试】

今天咱们继续对第3套算法进行第3次测试&#xff0c;第3套算法加入了012路的权重。废话不多说了&#xff0c;直接上结果吧~ 最终&#xff0c;经过研判分析&#xff0c;2024年3月20日福彩3D的七码预测结果如下&#xff1a; 百位&#xff1a;7 4 8 3 6 9 0&#xff08;5换0&#x…

锂电池寿命预测 | Matlab基于ALO-SVR蚁狮优化支持向量回归的锂离子电池剩余寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于ALO-SVR蚁狮优化支持向量回归的锂离子电池剩余寿命预测 基于蚁狮优化和支持向量回归的锂离子电池剩余寿命预测: 1、提取NASA数据集的电池容量&#xff0c;以历史容量作为输入&#xff0c;…

Java项目:66 ssm实验室耗材管理系统设计与实现+jsp

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员管理实验材料&#xff0c;审核教师与学生对实验材料的申请信息&#xff0c;统计每学年实验材料的使用总数信息。 教师申请使用实验材料…

【探索Linux】—— 强大的命令行工具 P.28(网络编程套接字 —— 简单的UDP网络程序模拟实现)

阅读导航 引言一、UDP协议二、UDP网络程序模拟实现1. 预备代码⭕makefile文件⭕打印日志文件⭕打开指定的终端设备文件&#xff0c;并将其作为标准错误输出的目标文件描述符 2. UDP 服务器端实现&#xff08;UdpServer.hpp&#xff09;3. UDP 客户端实现&#xff08;main函数&a…

day04vue学习

day04 一、学习目标 1.组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09; ​ scoped解决样式冲突/data是一个函数 2.组件通信 组件通信语法父传子子传父非父子通信&#xff08;扩展&#xff09; 3.综合案例&#xff1a;小黑记事本&#xff08;组件版&#xff09…

全量知识系统的核心-全量知识的一个“恰当组织”的构想及百度AI答问

全量知识系统的核心-全量知识的一个恰当组织 Q1. 以下是对 我刚刚完成的文档“全量知识系统的核心&#xff1a;全量知识的一个恰当组织构想”的百度AI答复。由于字数400的限制&#xff0c;内容被分成四段. 第一次回答&#xff1a;学科和科学的框架 关于技术学科、一般学科和…

DeprecationWarning: isDaemon() is deprecated, get the daemon attribute instead

报错处理 # t.setDaemon(True) # 阙辉注释 t.daemonTrue # 阙辉新增

已有TensorFlow安装包新建相应python版本的虚拟环境

已有TensorFlow安装包新建虚拟环境 新建conda虚拟环境 新建的虚拟环境默认在Anaconda安装目录D:\Anaconda3\envs&#xff08;根据自己的安装目录看&#xff09; 切换到新建的虚拟环境 在这里可以直接安装下载好的TensorFlow安装包 检查是否安装好 输入python进入python环境…