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

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用

版权声明

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

澄清Fundebug录屏技术的几点误会的更多相关文章

  1. Fundebug录屏插件更新至0.6.0

    摘要: 录屏插件的性能进一步优化,传输的数据体积大幅度减少. 录屏功能介绍 Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提 ...

  2. Fundebug录屏插件更新至0.5.0,新增domain参数

    摘要: 通过配置domain来保证"视频"的正确录制 录屏功能介绍 Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 ...

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

    摘要: 录屏功能更加强大,欢迎免费试用! 关于Fundebug录屏功能 Fundebug是专业的程序BUG监控服务,当线上应用出现BUG的时候,我们可以第一时间报警,帮助开发者及时发现BUG,提高De ...

  4. DXGI快速截屏录屏技术

    DXGI快速截屏录屏技术 概述   很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...

  5. 基于MirrorDriver的录屏技术

    计算机屏幕图像的截取在屏幕的录制.计算机远程控制以及多媒体教学软件中都是关键术,基于Windows操作系统有多种截屏方法,研究的重点集中在如何快速有效的截取DBI(Device-Independent ...

  6. 手游录屏直播技术详解 | 直播 SDK 性能优化实践

    在上期<直播推流端弱网优化策略 >中,我们介绍了直播推流端是如何优化的.本期,将介绍手游直播中录屏的实现方式. 直播经过一年左右的快速发展,衍生出越来越丰富的业务形式,也覆盖越来越广的应用 ...

  7. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

  8. Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.

    摘要: BUG监控插件压缩至18K. 1.7.1拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug.请大家及时更新哈~ 拆分录屏代码 从 ...

  9. 搭建前端监控系统(六)JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

随机推荐

  1. Python—日志模块(logging)和网络模块

    https://blog.csdn.net/HeatDeath/article/details/80548310 https://blog.csdn.net/chosen0ne/article/det ...

  2. Linux:quota磁盘配额设置

    磁盘配额的概念 quota 磁盘配额功能只在指定的文件系统(分区)内有效,未设置配额的文件系统不受限制. quota 针对指定的用户账号.组账号进行限制,其他用户或组不受影响. 磁盘配额可以进行两方面 ...

  3. Node.js—基本知识

    一.第一个Node代码 1. 运行Node.js   通过node E:\Node代码\hello.js运行代码:Node.js是服务器的程序,写的js语句都将运行在服务器上.返回给客户的,都是已经处 ...

  4. ACM-单向链表的操作

    数据表记录包含表索引和数值,请对表索引相同的记录进行合并,即将相同索引的数值进行求和运算,输出按照key值升序进行输出. 输入描述: 先输入键值对的个数然后输入成对的index和value值,以空格隔 ...

  5. django DeleteView

    DeleteView from django.urls import reverse, reverse_lazy from django.contrib.auth.mixins import Logi ...

  6. LeetCode 分治算法

    分治算法:是将问题划分为一些独立的子问题,递归的求解个子问题,然后合并子问题的解而得到原问题的解. 分治算法步骤 step1 分解:将原问题分解为若干个规模较小,相互独立,与原问题形式相同的子问题: ...

  7. [C7] Andrew Ng - Sequence Models

    About this Course This course will teach you how to build models for natural language, audio, and ot ...

  8. 判断101-200之间有多少个素数,并输出所有素数,方法:用一个数分别去除2到sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数。

    <?php$sum=0;for($i=101;$i<=200;$i++){    for($j=2;$j<=sqrt($i);$j++)    {       if($i%$j==0 ...

  9. 剑指Offer-18.二叉树的镜像(C++/Java)

    题目: 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ ...

  10. 【[POI2012]TOU-Tour de Byteotia】

    [[POI2012]TOU-Tour de Byteotia] 洛谷P3535 https://www.luogu.org/problemnew/show/P3535 JDOJ 2193旅游景点(同类 ...