专栏首页Fundebug澄清Fundebug录屏技术的几点误会

澄清Fundebug录屏技术的几点误会

摘要: 此录屏非彼录屏!

1. “视频”并非真的视频、也不是通过连续播放大量截图来实现

首先请大家观看这个视频:

视频中,当鼠标点击“场景重现”,会立即播放一段“视频”。它完整的记录了用户点餐时候遇到障碍之前的一段操作。这段“视频”看起来和真的视频几乎一样,所以会被误以为是通过录制视频来记录的。实际上,它并非视频。我们在客户端通过记录操作序列(用户行为、DOM 变化),在重放的时候将操作序列再执行一遍,看起来就像视频一样了。当然,涉及到很多复杂的细节,在这里不便赘述。近期,SMARTX 公司开源的rrweb也使用了类似的技术。如果感兴趣,可以去了解详细内容。

这样做有几大优点:

  • 可自定义的隐私保护:通过配置_fun-hide标签,插件会自动将隐私数据抹去。如果是视频,很难做到。
  • “视频”的体积很小:如果是录制视频,使用 iPhone X 录制一个 20s 的视频大概是 6MB,假设压缩比例为 10%,那么依然有 620KB。针对大多数的网页,20s 的录屏数据可以小至几十 KB。当然不排除极个别的情况数据量过大,我们会主动放弃录制。

2. 不仅只支持 Chrome

几乎所有高版本的浏览器(IE(>=11),Chrome(>=26),Safari(>=7), Firefox(>=14))都是支持的,包括微信内置浏览器(Webview)。比如下面这一条记录,设备信息显示为 Safari。“场景重现”的标签是可点击的,证明录屏有数据,可以播放。

另外,微信/钉钉等应用内打开的网页也是可以录制的:

3. 性能充分优化,不会影响用户使用

因为不是真的录制视频,所以并不会占用太多资源。另外,录屏插件的核心算法经过充分的优化,将 CPU 和内存使用率降到最低。录屏算法的性能本质上和页面发生变化的节点数有关,我们做过这样一个测试:在网页中插入一定数量的 DOM 节点,并统计接入和不接入录屏插件耗时情况。

插入的节点数量

不接入录屏(ms)

平均时间(ms)

接入录屏(ms)

平均时间(ms)

10

110.0, 152.4, 121.9, 147.4, 133.5, 105.8, 153.3

132.04

187.1, 131.4, 121.4, 160.3, 139.9, 123.2, 143.3

143.8

50

114.7, 92.7,107.2, 114.3, 112.1, 124.5, 119.3

112.11

126.4, 128.8, 137.5, 143.5, 133.6, 135.1, 133.3

134.02

100

125.5, 118.9, 112.5, 115.4, 129.5, 107.9, 113.8

117.64

152.8, 136.0, 144.4, 146.9, 131.0, 146.0, 148.6

143.67

200

164.0, 121.6, 167.7, 122.1, 119.7, 139.4, 129.6

137.72

196.0, 190.7, 201.8, 177.5, 194.9, 175.5, 201.0

191.06

500

141.5, 197.5, 173.9, 193.7, 193.1, 170.6, 192.3

180.37

229.2, 274.8, 324.8, 348.0, 368.6, 324.3, 324.1

313.4

1000

345.7, 278.0, 316.1, 258.1, 285.7, 284.0, 331.2

299.83

468.9, 486.9, 453.0, 376.4, 361.8, 462.7, 462.3

438.86

一般情况下,网页的变动导致 DOM 的变化节点不会超过 100 个。在小于 100 个节点的情况下,接入录屏插件额外增加的时间小于 30 毫秒。因此,在大多数情况下,录屏插件对性能的影响是可以忽略不计的。

录屏功能介绍

Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提高 Debug 效率。在网页端,我们通过原创的录屏技术,可以 100%还原 BUG 出现之前用户的操作流程,帮助开发者快速复现出错场景。

版权声明

转载时请注明作者 Fundebug以及本文地址: https://blog.fundebug.com/2019/08/02/a-few-tips-about-revideo/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright *{box-sizing:border-box}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Fundebug录屏插件更新至0.4.0,修复BUG,优化性能

    Fundebug是专业的程序BUG监控服务,当线上应用出现BUG的时候,我们可以第一时间报警,帮助开发者及时发现BUG,提高Debug效率。

    Fundebug
  • 计算机性能之殇(一)-- 天才冯·诺依曼与冯·诺依曼瓶颈

    本文的目标是在我有限的认知范围内,讨论一下人们为了提高性能做出的种种努力,这里面包含硬件层面的 CPU、RAM、磁盘,操作系统层面的并发、并行、事件驱动,软件层...

    Fundebug
  • Vue常见面试题整理

    看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,稍微有水平的...

    Fundebug
  • 禁得掉的短视频平台,无处安放的荷尔蒙流量

    VRPinea
  • 快手上市的潜台词

    按理来说,快手上市说明短视频市场真正走到了最后的时刻,快手与抖音共治天下的局面基本上已经形成。

    孟永辉
  • 人工智能发展锁定新目标:理解视频

    人工智能技术发展到现在已经很强大,AlphaGo已经把众多围棋世界冠军踩在脚下,让大家心生恐惧,就算在图像识别这件小事上,也比人类更好更快,然而,科学家认为这还...

    机器人网
  • RTSP/GB28181协议视频平台对接RTMP推流摄像头编码简介

    视频是利用人眼视觉暂留的原理,通过播放一系列的图片,使人眼产生运动的感觉。单纯传输视频画面,视频量非常大,对现有的网络和存储来说是不可接受的。为了能够使视频便于...

    EasyNVR
  • 短视频app开发怎么实现变现——创业开发者最关心的问题

    在短视频领域中抖音已经杀出各个包围圈,与微博和微信分别割据流量市场。与其说是抖音吸引了大批用户,倒不如说是短视频应用牢牢抓住了流量市场。吸引来的流量最终都会转化...

    直播2144899870
  • 西瓜视频的左右开攻

    Tiktok让字节跳动再次站上风口浪尖,也让外界再度认真审视这家诞生不过8年,却已经估值千亿美金,并且仍在全速狂奔的企业。

    刘旷
  • 短视频APP源码凭借独特的优势稳步发展

    短视频因为其一分钟左右的视频内容而更适合现如今快节奏的生活。其低门槛,易上手的方式给了更多用户曝光的机会,而网红经济的爆红更是让人们对短视频APP源码趋之如骛。...

    布谷安妮

扫码关注云+社区

领取腾讯云代金券