网页录屏(帧记录)调研总结
帧记录关键点
首先,每一次会话都有一个唯一的session ID,这是串联起所有行为的纽带。
其次,用户行为又分成两个部分,其一是用户的操作,比如鼠标滑动,点击,页面滚动等,其二是页面的变化。这两者我们都统称为用户行为,记录在同一个队列中。
一开始的时候,系统会记录下初始的页面作为第一帧,这是唯一的一次完整页面记录。
针对用户操作,我们会记录事件的类型,鼠标位置等关键信息,保存到队列中。
针对页面变动,我们会起一个mutationObserve侦听页面的改动,每次只记录改动的部分,保存到队列中。
无论是事件还是页面改动,都是对等的一帧,每一帧都会有当前时间,与上一帧间隔时间等基本信息用户还原
一旦出错,SDK就把队列发送到监控系统,并清空当前队列。
还原端根据记录的行为队列,根据时间逐一播放出来。最终形成一个类似于视频的效果。
初步思路
方式一:
前端收集信息,首先,初始化的时候记录一个页面的初始状态,然后利用 MutationObserver 监听dom的改变事件,然后监听所有的鼠标事件、滚动事件等等所有的页面变化。
在合理的时机把这些信息队列上传到服务器,如页面出错时等。
后台分析前端收集到的信息,转为图片,然后形成"视频",或者用户行为栈。提供对应的调用 api。
前端需要查找问题时,根据用户id等信息找到对应的出错栈。
方式二:
前端根据 html 转为对应的图片(可以转为 base64 格式)
将图片发送给后台
后台将图片按序组成"视频"
现有SDK
fundebug
录屏(截图)
html2canvas
puppeteer
rrweb+rrweb-player+rrweb-snapshot
html2canvas介绍
html2canvas 是通过分析页面中已加载好的 DOM 元素,然后 canvas 将生成的 DOM 节点绘制在画布上,最后转换为图片。它不是真正的截屏,只是根据页面元素信息还原出图片,所以并不是 100% 和页面相同的。
局限性
页面中的图片不能跨域
不是所有的 css 特性都支持,如不支持 box-shadow、filter 等
不支持截取插件内容,如 Flash
不支持 iframe 内容
浏览器支持
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+
puppeteer介绍
Puppeteer 是 Google Chrome 团队官方的无界面(Headless)Chrome 工具,它是一个 Node 库,提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。
局限性
Puppeteer 需要 Chromium。其主要应用在自动化测试上。
功能
生成页面的截图和PDF。
抓取SPA并生成预先呈现的内容(即"SSR")。
从网站抓取你需要的内容。
自动表单提交,UI测试,键盘输入等
创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
捕获您的网站的时间线跟踪,以帮助诊断性能问题。
结论html2canvas 更适合于 C 端的用户行为截图跟踪,而 Puppeteer 适用于自动化测试。
rrweb介绍
rrweb 主要由 3 部分组成:
rrweb-snapshot,包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识;rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
rrweb,包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更(mutation);replay 则是将记录的变更按照对应的时间一一重放。
rrweb-player,为 rrweb 提供一套 UI 控件,提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
rrweb适用场景:
用户行为分析;
远程debug;
录制操作;
实时协作;
局限性
社区资源较少
部分代码用较旧的模式写的,有未知坑
最终结论
综合来看,结合思路一,基于 rrweb 来开发是最可行最快捷的。
Demo目前,我基于 rrweb 已经做了个 demo 出来。
【由于微信限制,上传不了大于5M的gif,要看效果可以到打开下面的链接到github上看】
以下是初步成果:
代码:https://github.com/LuckyWinty/UserBehaviorRecord
补充资料
rrweb的一些思路原理
zhuanlan.zhihu.com/p/60639266
MutationObserver介绍
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。
特点
它等待所有脚本任务完成后,才会运行(即异步触发方式)。
它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。
它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。
example// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
observe方法接受两个参数,第一个是所要观察的DOM元素是article,第二个是所要观察的变动类型(子节点变动和属性变动),方法调用时必须指定一种或多种变动类型,否则报错,变动类型如下:
boolean childList = false;
boolean attributes;
boolean characterData;
boolean subtree = false; //表示是否将该观察器应用于该节点的所有后代节点。
boolean attributeOldValue; //表示观察attributes变动时,是否需要记录变动前的属性值。
boolean characterDataOldValue; //表示观察characterData变动时,是否需要记录变动前的值。
sequence<DOMString> attributeFilter;//数组,表示需要观察的特定属性(比如['class','src'])
disconnect方法用来停止观察。调用该方法后,DOM 再发生变动,
也不会触发观察器。takeRecords方法用来清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。
MutationRecord对象: DOM 每次发生变化,就会生成一条变动记录(MutationRecord 实例)。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。MutationRecord对象包含了DOM的相关信息,有如下属性:
type:观察的变动类型(attribute、characterData或者childList)。
target:发生变动的DOM节点。
addedNodes:新增的DOM节点。
removedNodes:删除的DOM节点。
previousSibling:前一个同级节点,如果没有则返回null。
nextSibling:下一个同级节点,如果没有则返回null。
attributeName:发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性。
oldValue:变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null。
最后
点右下角「在看」,让更多的人也能看到这篇内容,好东西一起分享...
欢迎加我微信(winty230),拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个有态度的技术人..
网页录屏(帧记录)调研总结相关推荐
- 补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能 问题描述 提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
- 网页录屏将视频截图保存成gif图片并压缩的方法超详细
我在一个网站上找到一个视频素材很不错.于是利用360浏览器的网页录屏功能.先把视频录下来了.然后.使用迅雷播放器的gif工具.截取了需要的界面.然后手动选中要生成的时间轴!然后选择不同的分辨率即可! ...
- 网页录屏怎么录制?有哪些好用的录屏方法?
有时候我们需要录制网页上的视频或操作过程,这时候就需要使用录屏软件来进行录制.下面将介绍几种好用的录屏方法. 使用在线录屏工具 有一些在线录屏工具可以直接在网页上进行录制,无需下载安装任何软件.其中比 ...
- 实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能,还有遇到的问题和解决思考
文章目录 前言 一.rrweb与rrweb-player引入项目中 二.使用步骤 1.引入代码 2.html部分代码 3.script部分代码 三. 遇到的3个问题总结,全部都是找了很久解决办法没找到 ...
- 基于HTML5+JavaScript实现的网页录屏器设计
资源下载地址:https://download.csdn.net/download/sheziqiong/85773105 资源下载地址:https://download.csdn.net/downl ...
- showmore网页录屏操作指南
使用免费在线录屏网站showmore轻松录屏:https://showmore.com/zh/ 使用步骤: 不用下载软件,直接到网站下载个启动器,再启动程序即可. 这个网页上点"开始录制&q ...
- 网页录屏 - rrweb
文章目录 1.rrweb 是什么 2.基本概念 3.安装 4.录制和播放(vue) 5.原理 官网: https://www.rrweb.io/ github: https://gitcode.net ...
- 对AnyChat录屏解决方案的调研报告
音视频录制是音视频解决方案中最重要的功能特性之一,特别是一些行业应用中音视频录制是最基本的功能需求,AnyChat作为业界一流的跨平台音视频解决方案,在音视频录制方面也提供了非常完善的整体解决方案. ...
- iOS 12+ ReplayKit 系统录屏(三) 丢帧压缩
视频录制后需要上传,但是录制视频要想压缩,有几个可以压缩的点:比特率.帧率.分辨率 比特率:单位像素所占的比特值 帧率:单位时间内的视频帧数 分辨率:图片所占的像素点的一个度量 w * h 这里我们在 ...
最新文章
- Windows 2008 VS2008 IIS7 中调试Asp.net 2.0 两个问题
- package.json中dependencies 与devDependencies 的区别
- 【图解计算机组成原理】第1章 计算机系统概论
- 3、java中的数据类型和运算符
- FastDFS(分布式文件系统)
- [IIS6.0]Silverlight网站配置
- 如何使用IntelliJ IDEA搭建spark开发环境(上)
- java 在主方法中定义两个变量 调用方法进行加10_计算机考试二级考试Java模拟试题附答案...
- big endian与little endian
- python画雷达图-python使用matplotlib绘制雷达图
- 通过LINQ表达式树动态构建查询条件
- Java中JCP, JEP, JLS, JSR是什么
- 发那科机器人寄存器Ar_浅谈发那科机器人与TP参数之间的关系
- 比较PAFF和MBAFF
- 一文教会你使用R语言和基本统计分析
- BLAST原理和用法总结(二)
- 雨中拍照:廉价好用的自制伞架
- Jquery实现textarea自动换行
- Python Selenium 字节校招实习岗筛选
- Activity中的数据传送—案例: 购买装备