网页应该如何录屏呢?
摘要: 网页应该如何录屏呢?
Fundebug经授权转载,版权归原作者所有。
关键点
- 首先,每一次会话都有一个唯一的session ID,这是串联起所有行为的纽带。
- 其次,用户行为又分成两个部分,其一是用户的操作,比如鼠标滑动,点击,页面滚动等,其二是页面的变化。这两者我们都统称为用户行为,记录在同一个队列中。
- 一开始的时候,系统会记录下初始的页面作为第一帧,这是唯一的一次完整页面记录。
- 针对用户操作,我们会记录事件的类型,鼠标位置等关键信息,保存到队列中。
- 针对页面变动,我们会起一个mutationObserve侦听页面的改动,每次只记录改动的部分,保存到队列中。
- 无论是事件还是页面改动,都是对等的一帧,每一帧都会有当前时间,与上一帧间隔时间等基本信息用户还原
- 一旦出错,SDK就把队列发送到监控系统,并清空当前队列。
- 还原端根据记录的行为队列,根据时间逐一播放出来。最终形成一个类似于视频的效果。
初步思路
方式一:
- 前端收集信息,首先,初始化的时候记录一个页面的初始状态,然后利用 MutationObserver 监听dom的改变事件,然后监听所有的鼠标事件、滚动事件等等所有的页面变化。
- 在合理的时机把这些信息队列上传到服务器,如页面出错时等。
- 后台分析前端收集到的信息,转为图片,然后形成"视频",或者用户行为栈。提供对应的调用 api。
- 前端需要查找问题时,根据用户id等信息找到对应的出错栈。
方式二:
- 前端根据 html 转为对应的图片(可以转为 base64 格式)
- 将图片发送给后台
- 后台将图片按序组成"视频"
现有SDK
录屏(截图)
- 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 出来。以下是初步成果:demo代码
补充资料
rrweb的一些思路原理
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。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
MessagePack Java 0.6.X 快速开始指南 - 安装
0.6.x 版本的 MessagePack 已经过期被淘汰了。如果你现在开始使用 MessagePack 话,请不要使用这个版本。 我们再这里保留 0.6.x 版本的内容主要用于参考用途。 最新的MessagePack 版本请参考:https://github.com/msgpack/msgpack-java中的项目源代码。 MessagePack 中文文档请参考:http://docs.ossez.com/messagepack-docs/index.html MessagePack 测试和示例源代码:https://github.com/cwiki-us-demo/serialize-deserialize-demo-java 这个指南提供了使用msgpack-java 的快速指南。在开始的时候,我们将会介绍如何安装msgpack-java,然后将会运行如何使用msgpack 来对对象序列化/反序列化(serialize/deserizalize)对象。 安装 你可以使用下面 2 种方法来安装 msgpack-java —— 从 maven 下载或者直接构建 jar 包。 从 Ma...
- 下一篇
圆通快递快速免费对接快递鸟单号查询api接口
快递查询API接口是使用的物流单号即可实现查询物流信息。主要应用在电商商城、ERP系统商、WMS系统商、快递柜、银行等企业。多家快递物流公司接口统一接入,建议对接接口提供商,一次性可以接入多家快递,在后期的技术维护也会省下很多工作。 目前快递查询API接口有两种实现方式,一种是主动查询,一种是订阅接口推送数据。以快递鸟接口为例(接口对接需要接口秘钥,这里用的是测试的,不能够正式使用,可以到快递鸟官网申请www.kdniao.com/,是免费申请秘钥的)最后附有一个的demo,更多demo可登陆快递鸟网站查询。 一.主动查询(即时查询API)1)接口规则a、查询接口支持按照运单号查询(单个查询,并发不超过10个/S)。b、指定的物流运单号选择相应的快递公司编码,格式不对或则编码错误都会返失败的信息。如圆通快递物流单号应选择圆通快递公司编码(YTO)c、返回的物流跟踪信息按照发生的时间升序排列。d、接口指令1002。e、请求地址:快递鸟注册2)系统级和应用级输入参数系统级输入参数 3)返回结果参数 4)JSON请求示例 { “OrderCode”: “”, “ShipperCode”: “...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS关闭SELinux安全模块
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群