CN111858255A - 基于屏幕截图的用户行为采集方法及相关设备 - Google Patents

基于屏幕截图的用户行为采集方法及相关设备 Download PDF

Info

Publication number
CN111858255A
CN111858255A CN202010729285.8A CN202010729285A CN111858255A CN 111858255 A CN111858255 A CN 111858255A CN 202010729285 A CN202010729285 A CN 202010729285A CN 111858255 A CN111858255 A CN 111858255A
Authority
CN
China
Prior art keywords
event
screenshot
file
current page
target event
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010729285.8A
Other languages
English (en)
Inventor
邱泽斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN202010729285.8A priority Critical patent/CN111858255A/zh
Publication of CN111858255A publication Critical patent/CN111858255A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3065—Monitoring arrangements determined by the means or processing involved in reporting the monitored data
    • G06F11/3072—Monitoring arrangements determined by the means or processing involved in reporting the monitored data where the reporting involves data filtering, e.g. pattern matching, time or event triggered, adaptive or policy-based reporting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
    • G06F11/3438—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment monitoring of user actions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Quality & Reliability (AREA)
  • Computer Hardware Design (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及人工智能领域，公开了一种基于屏幕截图的用户行为采集方法及相关设备。该方法包括：对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。此外，本发明还涉及区块链技术，截图文件和视频文件可存储于区块链中。通过本方案，可实现对用户在页面上行为的录屏，从而实现采集后的用户行为数据直观可靠。

Description

基于屏幕截图的用户行为采集方法及相关设备
技术领域
本发明涉及人工智能领域，尤其涉及一种基于屏幕截图的用户行为采集方法及相关设备。
背景技术
随着互联网的发展，越来越多的企业开辟了线上服务。一方面线上服务可以提高服务效率，另一方面，可以节约人力成本。然而线上服务中，由于提供服务的程序可能存在bug，引起服务异常的情况。由其是在关于金钱往来的服务中，常常存在用户对于产品和金额与企业存在纠纷的情况。
目前针对这种纠纷，企业大多数采用的策略为：提供服务时，会对用户行为进行采集，以对用户的操作进行存证。常见的用户行为采集方法为通过埋点实现，它主要是对终端的行为日志采集。埋点能够实现及时性高，丢失数据风险低，准确率高等优点，然而通过常规的埋点方式采集的用户行为常常是以数据的形式进行展现，如点击次数，浏览次数，不够直观具体，在很多场景下仍不足以作为减少纠纷的存证，因此急需对目前的用户行为采集方式进行改进。
发明内容
本发明的主要目的在于解决目前基于常规埋点方法，获取用户行为数据不够直观的问题。
本发明第一方面提供了一种基于屏幕截图的用户行为采集方法，包括：
对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件，其中，所述目标事件集包括目标事件的事件名和所述目标事件对应的事件类型，所述事件类型包括终止事件类型；
若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
可选的，在本发明第一方面的第一种实现方式中，所述目标事件包括路由变换事件，当前页面为基于单页应用程序的页面，所述对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件包括：
获取当前页面的URL；
判断所述URL的哈希值是否发生变化；
若所述哈希值发生变化，则确定存在事件触发，且所述事件的事件名为路由变换事件；
将所述事件的事件名与所述目标事件集中的事件名进行匹配，并将匹配成功的事件确定为目标事件。
可选的，在本发明第一方面的第二种实现方式中，在所述对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件之后，还包括：
若所述事件为目标事件，则获取所述事件的执行对象；
根据所述执行对象和所述事件的事件名，生成所述事件对应的行为数据；
将所述行为数据发送至服务器，以供所述服务器进行行为数据存档。
可选的，在本发明第一方面的第三种实现方式中，在所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件之前，还包括：
获取当前页面所在终端的版本信息和设备像素比；
根据所述版本信息，确定对应的截图尺寸和截图长宽比；
根据所述截图长宽比，确定预设截图文件大小范围对应的像素比数值范围；
将所述像素比数值范围与所述设备像素比进行比较，并将所述像素比数值范围中与所述设备像素比最接近的像素比作为截图文件的截图像素比。
可选的，在本发明第一方面的第四种实现方式中，所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件包括：
若所述事件为所述目标事件，则记录所述目标事件的发生时间；
获取当前页面的DOM元素；
根据所述截图像素比和所述长宽比，创建空白canvas对象；
将所述DOM元素写入所述canvas对象中，得到截图缓存文件；
对所述截图缓存文件进行转码，得到base64格式的截图文件。
可选的，在本发明第一方面的第五种实现方式中，述若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件包括：
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据所述发生时间，对所述截图文件进行排序，得到排序结果；
根据预置间隔时间，对所述排序结果进行转换，生成记录当前页面对应的用户行为的视频文件。
可选的，在本发明第一方面的第六种实现方式中，所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件包括：
将当前页面对应的所有截图文件和各所述截图文件对应的发生时间写入预置空白对象中，得到截图数据包，并将所述截图数据包发送至服务器，以供所述服务器根据所述截图数据包，生成所述视频文件；
判断在预置接收时间内是否收到服务器返回的接收通知；
若是，则删除所述截图数据包；
若否，则基于心跳机制，重新发送所述截图数据包。
本发明第二方面提供了一种基于屏幕截图的用户行为采集装置，包括：
监听模块，用于对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
截图模块，用于若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
生成模块，用于若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
可选的，在本发明第二方面的第一种实现方式中，所述目标事件包括路由变换事件，当前页面为基于单页应用程序的页面，所述监听模块具体用于：
获取当前页面的URL；
判断所述URL的哈希值是否发生变化；
若所述哈希值发生变化，则确定存在事件触发，且所述事件的事件名为路由变换事件；
将所述事件的事件名与所述目标事件集中的事件名进行匹配，并将匹配成功的事件确定为目标事件。
可选的，在本发明第二方面的第二种实现方式中，所述基于屏幕截图的用户行为采集装置包括行为数据模块，所述行为数据模块具体用于：
若所述事件为目标事件，则获取所述事件的执行对象；
根据所述执行对象和所述事件的事件名，生成所述事件对应的行为数据；
将所述行为数据发送至服务器，以供所述服务器进行行为数据存档。
可选的，在本发明第二方面的第三种实现方式中，所述基于屏幕截图的用户行为采集装置还包括截图规格模块，所述截图规格模块具体用于：
获取当前页面所在终端的版本信息和设备像素比；
根据所述版本信息，确定对应的截图尺寸和截图长宽比；
根据所述截图长宽比，确定预设截图文件大小范围对应的像素比数值范围；
将所述像素比数值范围与所述设备像素比进行比较，并将所述像素比数值范围中与所述设备像素比最接近的像素比作为截图文件的截图像素比。
可选的，在本发明第二方面的第四种实现方式中，所述截图模块具体用于：
若所述事件为所述目标事件，则记录所述目标事件的发生时间；
获取当前页面的DOM元素；
根据所述截图像素比和所述长宽比，创建空白canvas对象；
将所述DOM元素写入所述canvas对象中，得到截图缓存文件；
对所述截图缓存文件进行转码，得到base64格式的截图文件。
可选的，在本发明第二方面的第五种实现方式中，所述生成模块具体用于：
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据所述发生时间，对所述截图文件进行排序，得到排序结果；
根据预置间隔时间，对所述排序结果进行转换，生成记录当前页面对应的用户行为的视频文件。
可选的，在本发明第二方面的第六种实现方式中，所述截图模块之后还连接有发送模块，所述发送模块具体用于：
将当前页面对应的所有截图文件和各所述截图文件对应的发生时间写入预置空白对象中，得到截图数据包，并将所述截图数据包发送至服务器，以供所述服务器根据所述截图数据包，生成所述视频文件；
判断在预置接收时间内是否收到服务器返回的接收通知；
若是，则删除所述截图数据包；
若否，则基于心跳机制，重新发送所述截图数据包。
本发明第三方面提供了一种基于屏幕截图的用户行为采集设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于屏幕截图的用户行为采集设备执行上述的基于屏幕截图的用户行为采集方法。
本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的基于屏幕截图的用户行为采集方法。
本发明提供的技术方案中，对页面进行事件监听，当监听到事件发生时，判断该事件是否为目标事件。若该事件为目标事件，则对当前的页面进行截图，生成页面截图文件，并记录下事件的发生时间。当该事件为目标事件中的终止事件类型时，根据发生时间和当前页面对应的所有截图文件，生成视频文件。通过此方式，能够直观地保存页面上的事件，并能够以动态形式展示页面上发生的事件。相较于以往的单纯的数据或表格记录，更为直观。同时，本方案通过预置目标事件集进行事件判断，从而避免了在整个代码逻辑框中处处埋点，破坏代码的逻辑性。同时，本方案也提供了在此基础上的事件数据采集方法，兼顾了以往埋点采集的数据和截图采集数据。本方案还提供当页面为基于单页应用程序的页面时，将路由变换事件也作为目标事件，从而保证了页面变换也会进行记录。为了减轻终端的负担，还提供将截图文件和发生时间发送给服务器的方案，同时为保证数据完整传输至服务器，收到服务器发送的接收通知时，才会在删除本地保存的截图数据包，若未接受到接收通知，则基于心跳机制重新发送。
附图说明
图1为本发明实施例中基于屏幕截图的用户行为采集方法的第一个实施例示意图；
图2为本发明实施例中基于屏幕截图的用户行为采集方法的第二个实施例示意图；
图3为本发明实施例中基于屏幕截图的用户行为采集方法的第三个实施例示意图；
图4为本发明实施例中基于屏幕截图的用户行为采集方法的第四个实施例示意图；
图5为本发明实施例中基于屏幕截图的用户行为采集方法的第五个实施例示意图；
图6为本发明实施例中基于屏幕截图的用户行为采集装置的一个实施例示意图；
图7为本发明实施例中基于屏幕截图的用户行为采集装置的另一个实施例示意图；
图8为本发明实施例中基于屏幕截图的用户行为采集设备的一个实施例示意图。
具体实施方式
本发明实施例提供了一种基于屏幕截图的用户行为采集方法及相关设备。本发明提供的技术方案中，对页面进行事件监听，当监听到事件发生时，判断该事件是否为目标事件。若该事件为目标事件，则对当前的页面进行截图，生成页面截图文件，并记录下事件的发生时间。当该事件为目标事件中的终止事件类型时，根据发生时间和当前页面对应的所有截图文件，生成视频文件。通过此方式，能够直观地保存页面上的事件，并能够以动态形式展示页面上发生的事件。相较于以往的单纯的数据或表格记录，更为直观。。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中基于屏幕截图的用户行为采集方法的第一个实施例包括：
101、对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
可以理解的是，本发明的执行主体可以为基于屏幕截图的用户行为采集装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以终端为执行主体为例进行说明。
通过addListener()及addEventListener()等方法，可以实现对页面的监听。addListener主要用于鼠标、键盘等配件的行为进行监听，如鼠标左击、滚动；而addEventListener主要用于对组件进行监听。
在本实施例中，先将目标事件的事件名写入预置的空白数组中，得到目标事件集。在本实施例中，目标事件可分为四类：点击事件类、输入事件类、终止事件类型和路由变换事件类。每个目标事件都对应事件类型。以输入事件类型为例，当输入框的值发生变化时，可得到事件名为keydown、keyup、input、onchange的事件。预先将目标事件名写入空白数组中。当监听到事件时，先获取其事件名，如用户将页面下滑，事件的事件名为滑动事件(touch)。然后将“滑动事件(touch)”与目标事件集进行匹配，发现未匹配成功，因此该事件不是目标事件，故不进行后续操作。
102、若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
若事件为目标事件，则通过timestamp获得并记录该事件发生的时间。timestamp是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。并对当前页面进行截图。目前对页面进行截图的方法有很多，常见的有html2canvas、rasterizehtml。前者是遍历DOM克隆一份副本，将此副本在canvas上绘制，最后生成图片。后者是将遍历的DOM克隆副本作为外部资源嵌套在SVG中，再通过canvas生成图片。
103、若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
在本方案中，终止事件类型包括结束对页面操作的事件。如关闭页面。在填写相关信息的时候，点击“确认”或“提交”都属于终止事件类型。因此终止事件类型也是指结束对当前页面监听的事件。由于需要将当前页面的目标事件进行记录，并转为视频文件，因此在当目标事件为终止事件类型时，需要将当前页面对应的所有截图文件转为视频文件。
根据截图文件对应的发生时间，将所有截图文件进行排序。按照排序结果，将每一个截图文件作为动态帧，赋予预置的时间间隔，从而将所有的截图文件串联起来，得到视频文件。
本实施例中，通过对页面的监听，得到当前页面上操作的截图文件和发生时间，然后将其转换为视频文件。通过此方式，能够保存页面上的事件，并能够以动态形式展示页面上发生的事件。相较于以往的单纯的数据或表格记录，更为直观。
请参阅图2，本发明实施例中基于屏幕截图的用户行为采集方法的第二个实施例包括：
201、获取当前页面的URL；
在本实施例中，所监听的页面为基于单页应用程序的页面。单页应用程序(singlepage web application，SPA)是指只有一张网页，但是能够加载多个交互界面，它可以实现将多个页面封装在一个页面内，然后利用JavaScript动态的变换HTML。因此减少后续终端对服务器的请求工作，提高终端对用户的反应速率。因此基于单页应用程序的页面中切换不同的界面也应作为对用户行为的一部分。
在本实施例中，先获取当前页面的URL。URL又称为“统一资源定位系统”。在页面上显示为当前页面地址栏中的地址，如“//xxx.xxx.xxx”。而在当前页面中封装了两个界面，分别为界面a和界面b，两者对应的URL分别为“//xxx.xxx.xxx#a”和“//xxx.xxx.xxx#b”。
202、判断所述URL的哈希值是否发生变化；
URL的哈希值是指location对象的hash属性，返回的是URL中“#”后的字符。得到URL后可将其与之前得到的URL进行对比，从而判断URL的哈希值是否发生变化。在本实施例中，用户将界面由界面a切换至界面b时，URL的哈希值也由a变为b。
203、若所述哈希值发生变化，则确定存在事件触发，且所述事件的事件名为路由变换事件；
在本实施例中，用户将界面由界面a切换至界面b时，URL的哈希值也由a变为b。若URL的哈希值发生变化，则说明用户将界面切换，因此发生了路由变化事件。
204、将所述事件的事件名与所述目标事件集中的事件名进行匹配，并将匹配成功的事件确定为目标事件；
由于目标事件集中存在路由变换事件的事件名，当前事件的事件名为路由变换事件，因此该事件为目标事件。
205、若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
206、若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
由于目前为提高前端反应效率，很多网站采用单页应用。在本实施例中，采用监听页面的路由变化，从而实现监听单页面中多个界面的切换。因此本方案能够支持当前主流的终端页面的用户行为的采集。
请参阅图3，本发明实施例中基于屏幕截图的用户行为采集方法的第三个实施例包括：
301、对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
302、若所述事件为目标事件，则获取所述事件的执行对象；
在本实施例中，若事件为目标事件，除了记录该事件的发生时间，用于之后生成对应的视频文件之外，还会采用常规埋点获取数据的方式获得用户的行为数据。
在一种方式中，先通过CSS动态定位，得到事件发生对应的x坐标和y坐标，该位置坐标即为事件的执行对象。在另一种方式中，每一个待监听的按键、链接或输入框后都存在一个监听器。当确定事件为目标事件时，该监听器会获取该事件的执行对象，如点击事件对象为“立即购买按钮”。该按钮即为该事件对应的执行对象。
303、根据所述执行对象和所述事件的事件名，生成所述事件对应的行为数据；
然后将该事件的事件名和执行对象写入预置的object中，得到一个服务器可读取的对象，从而生成该事件对应的行为数据。
304、将所述行为数据发送至服务器，以供所述服务器进行行为数据存档；
305、记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
306、若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
后将行为数据发送至服务器，服务器之后对这些行为数据进行数据存档。存档后，基于人工智能，根据这些行为数据，进行用户行为的分析，包括预测用户后续的行为。例如在购物网站，可用于预测用户所需要的产品，并进行相关产品的推送。
本实施例在通过截屏进行用户行为采集的基础上，还提供了一种以往埋点采集的数据和截图采集数据的方法，从而兼顾了两种用户行为采集方法。
请参阅图4，本发明实施例中基于屏幕截图的用户行为采集方法的第四个实施例包括：
401、获取当前页面所在终端的版本信息和设备像素比；
html2canvas是一款开源库，它完成截图的方式是读取当前页面的DOM节点，然后将其写入空白的canvas中，生成canvas对象，再将生成的对象转换为图片。本实施例采用html2canvas对页面进行截图。由于html2canvas在不同的操作系统和浏览器存在不同的图片大小及像素限制。因此进行截图前，需要确定适合当前页面的图片的大小和像素比。
在本实施例中，客户端通过userAgent获取平台的版本信息。userAgent中文名为用户代理，它是一个特殊的字符串头，能够获取客户端运行的操作系统的名称及版本、浏览器的名称及版本等信息。window的属性设备像素比(devicePixelRatio)能够返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值主要用于规定改用多少个屏幕的实际像素来绘制单个CSS像素。在绘制canvas时，还可通过window.devicePixelRatio确定应该添加多少额外的像素密度以使图像更为清晰。
402、根据所述版本信息，确定对应的截图尺寸和截图长宽比；
通过userAgent获得了客户端运行的操作系统的名称及版本，浏览器的名称和版本信息后，html2canvas根据这些信息确定了将来生成的canvas对象的长和宽的大小，从而计算得到在在该终端上进行截图后的长宽比。
403、根据所述截图长宽比，确定预设截图文件大小范围对应的像素比数值范围；
若之后生成的页面截图文件过大，则会占用数据库大量的内存。但页面截图文件过小，会损失最终得到的动态文件清晰度，图片不清楚，对于用户的行为记录产生不利影响。因此预先设置好页面截图文件的大小。
先根据得到的页面截图文件的长宽比，计算在设好的页面截图文件大小的范围内能够得到的页面截图文件的像素比范围。
404、将所述像素比数值范围与所述设备像素比进行比较，并将所述像素比数值范围中与所述设备像素比最接近的像素比作为截图文件的截图像素比；
将得到的像素比与设备像素比进行比较。如计算得到的页面截图文件像素比最高为0.8，而设备像素比为1.0，则待生成的页面截图文件的像素比为0.8。
在本方案中，将截图尺寸比和设备像素比都纳入了对生成的页面截图文件格式的设定，因此生成的页面截图文件，能够在图片清晰度，准确度和大小三个方面平衡。
405、对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
406、若所述事件为所述目标事件，则记录所述目标事件的发生时间；
407、获取当前页面的DOM元素；
html2canvas是一款开源库，它完成截图的方式是读取当前页面的DOM节点，然后将这些DOM节点写入空白的canvas中，生成canvas对象，再将生成的对象转换为图片。
当确定目标事件发生时，html2canvas会被唤醒，然后对当前页面进行截图。因此html2canvas首先要获取当前页面的DOM。获取方式很简单，直接调用“html2canvas(element[，options])”即可。例如获得整个页面的DOM元素，即html2canvas(document.body)。
408、根据所述截图像素比和所述长宽比，创建空白canvas对象；
预先创建三个变量，一个是长，一个是宽，还有一个是像素比。当需要对当前页面进行截图时，将之前获得的截图尺寸和页面截图文件像素比赋值给这三个变量。根据这三个变量，通过document.createElement创建一个空白的canvas对象。
409、将所述DOM元素写入所述canvas对象中，得到截图缓存文件；
获得页面的DOM元素后，通过html2canvas的funticon()方法，将DOM元素写入该空白的canvas对象中，即为截图缓存文件。
410、对所述截图缓存文件进行转码，得到base64格式的截图文件；
通常图片下载需要客户端向服务器发出请求，然后下载，但是将图片数据编码为字符串数据，则节省一个http请求从而实现求短优化。此外，base64文件比图片格式的文件更小，在对图片的清晰度要求不高的情况下，转换为base64格式的文件更利于文件的传输。因此本方案在得到缓存文件后，将其转为base64格式的截图文件。先通过canvas.toDataURL()方法，将截图缓存文件转换为一个图片格式的文件。最后通过encodeURIComponent()方法，将该图片格式的文件转换为一个base64文件。
411、若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据所述发生时间，对所述截图文件进行排序，得到排序结果；
本方案将一个页面上所有目标事件作为一个动态记录，同一个页面上得到的页面截图文件。若目标事件对应的事件类型为终止事件类型，则得到该目标事件对应的截图文件后，须将当前页面所有的截图文件转换为视频文件。按照各截图文件对应的发生时间的先后顺序，也即事件的发生事件进行排序。
412、根据预置间隔时间，对所述排序结果进行转换，生成记录当前页面对应的用户行为的视频文件。
将排序后的图片生成动态的视频文件方法有很多种。其本质上都是将页面截图文件转为动态帧。类似于动画或gif图片，将每个页面截图文件赋予一个预置的时间间隔，作为该动态帧的时间帧，然后将所有页面截图文件进行压缩为一个文件。打开该文件，可见到视频文件上，所有截图文件进行自动切换显示。因此，该文件为该页面上所有用户行为的视频文件。
需要强调的是，为进一步保证上述截图文件和视频文件的私密和安全性，上述截图文件和视频文件还可以存储于一区块链的节点中。
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
在本实施例中，具体描述了截图文件得到的过程。由于截图文件为base64格式的文件，因此更便于传输，减少空间。
请参阅图5，本发明实施例中基于屏幕截图的用户行为采集方法的第五个实施例包括：
501、对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
502、若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
503、将当前页面对应的所有截图文件和各所述截图文件对应的发生时间写入预置空白对象中，得到截图数据包，并将所述截图数据包发送至服务器，以供所述服务器根据所述截图数据包，生成所述视频文件；
由于视频文件较截图文件要更大，因此，为减少终端的负担，提供一种将截图文件和对应的发生时间发送至服务器，通过服务器再生成视频文件。
首先将当前页面对应的所有截图文件和这些截图文件对应的发生时间写入到空白对象中，从而得到截图数据包，再将截图数据包发送给服务器。
504、判断在预置接收时间内是否收到服务器返回的接收通知；
在用户使用客户端的时候，可能会出现网页意外关闭的现象。例如用户填表格，填到一半，不小心误触返回键。此时，截图数据包可能还未发送到服务器。因此存在截图数据包意外丢失的可能。因此，在生成截图数据包后，终端先将该截图数据包保存在本地，然后通过axios发送至服务器。若两者连接正常，则会在预置接收时间内，收到服务器回传的接收通知；若两者连接存在故障，则在接收时间，接收不到服务器发送的接收通知，axios请求会进入错误处理，并抛出错误信息；
505、若是，则删除所述截图数据包；
若接收，则可将保存于终端的截图数据包删除，减轻负担。
506、若否，则基于心跳机制，重新发送所述截图数据包；
若为在期限内收到接收通知，则需待之后服务器正常或两者的连接正常时再发送。本方案采用的是基于心跳机制进行重新发送。心跳机制是服务器定时发送一个自定义的结构体，以确保两者的连接有效。因此当终端接收到服务器发送的结构体时，再重新发送截图数据包或/和视频文件。
507、若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
为了减轻终端的负担，本实施例提供一种将截图文件和发生时间发送给服务器的方案，同时为保证数据完整传输至服务器，收到服务器发送的接收通知时，才会在删除本地保存的截图数据包，若未接受到，则给予心跳机制重新发送。
上面对本发明实施例中基于屏幕截图的用户行为采集方法进行了描述，下面对本发明实施例中基于屏幕截图的用户行为采集装置进行描述，请参阅图3，本发明实施例中基于屏幕截图的用户行为采集装置一个实施例包括：
监听模块601，用于对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
截图模块602，用于若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
生成模块603，用于若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
本实施例中，通过对页面的监听，得到当前页面上操作的截图文件和发生时间，然后将其转换为视频文件。通过此方式，能够保存页面上的事件，并能够以动态形式展示页面上发生的事件。相较于以往的单纯的数据或表格记录，更为直观。
请参阅图7，本发明实施例中基于屏幕截图的用户行为采集装置的另一个实施例包括：
监听模块701，用于对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
截图模块702，用于若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
生成模块703，用于若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
可选的，所述目标事件包括路由变换事件，当前页面为基于单页应用程序的页面，所述监听模块701具体用于：
获取当前页面的URL；
判断所述URL的哈希值是否发生变化；
若所述哈希值发生变化，则确定存在事件触发，且所述事件的事件名为路由变换事件；
将所述事件的事件名与所述目标事件集中的事件名进行匹配，并将匹配成功的事件确定为目标事件。
可选的，所述基于屏幕截图的用户行为采集装置包括行为数据模块704，所述行为数据模块704具体用于：
若所述事件为目标事件，则获取所述事件的执行对象；
根据所述执行对象和所述事件的事件名，生成所述事件对应的行为数据；
将所述行为数据发送至服务器，以供所述服务器进行行为数据存档。
可选的，所述基于屏幕截图的用户行为采集装置还包括截图规格705模块，所述截图规格模块705具体用于：
获取当前页面所在终端的版本信息和设备像素比；
根据所述版本信息，确定对应的截图尺寸和截图长宽比；
根据所述截图长宽比，确定预设截图文件大小范围对应的像素比数值范围；
将所述像素比数值范围与所述设备像素比进行比较，并将所述像素比数值范围中与所述设备像素比最接近的像素比作为截图文件的截图像素比。
可选的，所述截图模块702具体用于：
若所述事件为所述目标事件，则记录所述目标事件的发生时间；
获取当前页面的DOM元素；
根据所述截图像素比和所述长宽比，创建空白canvas对象；
将所述DOM元素写入所述canvas对象中，得到截图缓存文件；
对所述截图缓存文件进行转码，得到base64格式的截图文件。
可选的，所述生成模块703具体用于：
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据所述发生时间，对所述截图文件进行排序，得到排序结果；
根据预置间隔时间，对所述排序结果进行转换，生成记录当前页面对应的用户行为的视频文件。
可选的，所述截图模块702之后还连接有发送模块706，所述发送模块706具体用于：
将当前页面对应的所有截图文件和各所述截图文件对应的发生时间写入预置空白对象中，得到截图数据包，并将所述截图数据包发送至服务器，以供所述服务器根据所述截图数据包，生成所述视频文件；
判断在预置接收时间内是否收到服务器返回的接收通知；
若是，则删除所述截图数据包；
若否，则基于心跳机制，重新发送所述截图数据包。
本实施例在上一是实力基础上，还提供当页面为基于单页应用程序的页面时，将路由变换事件也作为目标事件，从而保证了页面变换也会进行记录。为了减轻终端的负担，还提供将截图文件和发生时间发送给服务器的方案，同时为保证数据完整传输至服务器，收到服务器发送的接收通知时，才会在删除本地保存的截图数据包，若未接受到，则给予心跳机制重新发送。
上面图6和图7从模块化功能实体的角度对本发明实施例中的基于屏幕截图的用户行为采集装置进行详细描述，下面从硬件处理的角度对本发明实施例中基于屏幕截图的用户行为采集设备进行详细描述。
图8是本发明实施例提供的一种基于屏幕截图的用户行为采集设备的结构示意图，该基于屏幕截图的用户行为采集设备800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)810(例如，一个或一个以上处理器)和存储器820，一个或一个以上存储应用程序833或数据832的存储介质830(例如一个或一个以上海量存储设备)。其中，存储器820和存储介质830可以是短暂存储或持久存储。存储在存储介质830的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对基于屏幕截图的用户行为采集设备800中的一系列指令操作。更进一步地，处理器810可以设置为与存储介质830通信，在基于屏幕截图的用户行为采集设备800上执行存储介质830中的一系列指令操作。
基于屏幕截图的用户行为采集设备800还可以包括一个或一个以上电源840，一个或一个以上有线或无线网络接口850，一个或一个以上输入输出接口860，和/或，一个或一个以上操作系统831，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图8示出的基于屏幕截图的用户行为采集设备结构并不构成对基于屏幕截图的用户行为采集设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述基于屏幕截图的用户行为采集方法的步骤。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于屏幕截图的用户行为采集方法，其特征在于，所述基于屏幕截图的用户行为采集方法包括：
对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件，其中，所述目标事件集包括目标事件的事件名和所述目标事件对应的事件类型，所述事件类型包括终止事件类型；
若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
2.根据权利要求1所述的基于屏幕截图的用户行为采集方法，其特征在于，所述目标事件包括路由变换事件，当前页面为基于单页应用程序的页面，所述对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件包括：
获取当前页面的URL；
判断所述URL的哈希值是否发生变化；
若所述哈希值发生变化，则确定存在事件触发，且所述事件的事件名为路由变换事件；
将所述事件的事件名与所述目标事件集中的事件名进行匹配，并将匹配成功的事件确定为目标事件。
3.根据权利要求1所述的基于屏幕截图的用户行为采集方法，其特征在于，在所述对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件之后，还包括：
若所述事件为目标事件，则获取所述事件的执行对象；
根据所述执行对象和所述事件的事件名，生成所述事件对应的行为数据；
将所述行为数据发送至服务器，以供所述服务器进行行为数据存档。
4.根据权利要求1所述的基于屏幕截图的用户行为采集方法，其特征在于，在所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件之前，还包括：
获取当前页面所在终端的版本信息和设备像素比；
根据所述版本信息，确定对应的截图尺寸和截图长宽比；
根据所述截图长宽比，确定预设截图文件大小范围对应的像素比数值范围；
将所述像素比数值范围与所述设备像素比进行比较，并将所述像素比数值范围中与所述设备像素比最接近的像素比作为截图文件的截图像素比。
5.根据权利要求4所述的基于屏幕截图的用户行为采集方法，其特征在于，所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件包括：
若所述事件为所述目标事件，则记录所述目标事件的发生时间；
获取当前页面的DOM元素；
根据所述截图像素比和所述长宽比，创建空白canvas对象；
将所述DOM元素写入所述canvas对象中，得到截图缓存文件；
对所述截图缓存文件进行转码，得到base64格式的截图文件。
6.根据权利要求1所述的基于屏幕截图的用户行为采集方法，其特征在于，所述若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件包括：
若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据所述发生时间，对所述截图文件进行排序，得到排序结果；
根据预置间隔时间，对所述排序结果进行转换，生成记录当前页面对应的用户行为的视频文件。
7.根据权利要求1所述的基于屏幕截图的用户行为采集方法，其特征在于，所述若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件包括：
将当前页面对应的所有截图文件和各所述截图文件对应的发生时间写入预置空白对象中，得到截图数据包，并将所述截图数据包发送至服务器，以供所述服务器根据所述截图数据包，生成所述视频文件；
判断在预置接收时间内是否收到服务器返回的接收通知；
若是，则删除所述截图数据包；
若否，则基于心跳机制，重新发送所述截图数据包。
8.一种基于屏幕截图的用户行为采集装置，其特征在于，所述基于屏幕截图的用户行为采集装置包括：
监听模块，用于对当前页面进行事件监听，并根据预置目标事件集，判断当前监听到的事件是否为目标事件；
截图模块，用于若所述当前监听到的事件为目标事件，则记录目标事件的发生时间并对当前页面进行截图，得到当前页面对应的截图文件；
生成模块，用于若所述目标事件对应的事件类型为终止事件类型，则在得到所述截图文件后，根据当前页面对应的截图文件和各所述截图文件对应的发生时间，生成记录当前页面对应的用户行为的视频文件。
9.一种基于屏幕截图的用户行为采集设备，其特征在于，所述基于屏幕截图的用户行为采集设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；
所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于屏幕截图的用户行为采集设备执行如权利要求1-7中任一项所述的基于屏幕截图的用户行为采集方法。
10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的基于屏幕截图的用户行为采集方法。
CN202010729285.8A 2020-07-27 2020-07-27 基于屏幕截图的用户行为采集方法及相关设备 Pending CN111858255A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010729285.8A CN111858255A (zh) 2020-07-27 2020-07-27 基于屏幕截图的用户行为采集方法及相关设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010729285.8A CN111858255A (zh) 2020-07-27 2020-07-27 基于屏幕截图的用户行为采集方法及相关设备

Publications (1)

Publication Number Publication Date
CN111858255A true CN111858255A (zh) 2020-10-30

Family

ID=72947105

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010729285.8A Pending CN111858255A (zh) 2020-07-27 2020-07-27 基于屏幕截图的用户行为采集方法及相关设备

Country Status (1)

Country Link
CN (1) CN111858255A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112306619A (zh) * 2020-12-02 2021-02-02 广州橙行智动汽车科技有限公司 一种截图方法和装置
CN112328943A (zh) * 2020-11-26 2021-02-05 杭州安恒信息技术股份有限公司 一种基于html2canvas的节点截图方法
CN114676028A (zh) * 2022-03-31 2022-06-28 湖南蓝海购企业策划有限公司 一种基于连锁触发的云系统存档方法及装置
CN115309611A (zh) * 2022-08-30 2022-11-08 深圳市湘凡科技有限公司 一种基于图像的通讯方法和相关设备

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112328943A (zh) * 2020-11-26 2021-02-05 杭州安恒信息技术股份有限公司 一种基于html2canvas的节点截图方法
CN112306619A (zh) * 2020-12-02 2021-02-02 广州橙行智动汽车科技有限公司 一种截图方法和装置
CN114676028A (zh) * 2022-03-31 2022-06-28 湖南蓝海购企业策划有限公司 一种基于连锁触发的云系统存档方法及装置
CN115309611A (zh) * 2022-08-30 2022-11-08 深圳市湘凡科技有限公司 一种基于图像的通讯方法和相关设备

Similar Documents

Publication Publication Date Title
US11343339B1 (en) Method and system for monitoring an activity of a user
US20190146616A1 (en) Systems And Methods For Remote Tracking And Replay Of User Interaction With A Webpage
CN111858255A (zh) 基于屏幕截图的用户行为采集方法及相关设备
US9418172B2 (en) Systems and methods for remote tracking and replay of user interaction with a webpage
JP4024426B2 (ja) ネットワーク・ユーザによるウェブ・サイトの使用パターンの特性を記述し視覚化する方法
US7131062B2 (en) Systems, methods and computer program products for associating dynamically generated web page content with web site visitors
US8103737B2 (en) System and method for previewing hyperlinks with ‘flashback’ images
JP6294307B2 (ja) 携帯用装置での閲覧活動を監視及び追跡する方法及びシステム
CN111901192B (zh) 一种页面访问数据的统计方法及装置
US8666996B2 (en) Methods and systems for detecting broken links within a file
CN1494680A (zh) 收集高速缓存web内容的多样化web服务器活动数据
JP5476326B2 (ja) ウェブ操作記録・再現方法および装置
Grace et al. Web log data analysis and mining
CN112486708B (zh) 页面操作数据的处理方法和处理系统
WO2017124692A1 (zh) 查找表单页面和目标页面转化关系的方法和装置
CN106126693A (zh) 一种网页的相关数据的发送方法及装置
JP4282312B2 (ja) Ｗｅｂサーバ、Ｊａｖａサーブレットの機能を有するＷｅｂサーバ、およびコンピュータプログラム
US7069292B2 (en) Automatic display method and apparatus for update information, and medium storing program for the method
CN114692049A (zh) 基于浏览器的录屏方法及装置、电子设备、存储介质
JP2010170453A (ja) 静的Ｗｅｂサイト構築方法及び静的Ｗｅｂサイト構築サービス提供方法及び動的／静的変換処理装置及び動的／静的変換処理プログラム
CN112035205A (zh) 数据处理方法、装置、设备和存储介质
KR101282975B1 (ko) 문서 요소를 분리 구조화하여 표준화한 후 웹페이지를 재구성하는 웹화면 크롭 서버 장치
US7581167B2 (en) Method and system for automated simulation of dynamic URL-based Web application
CN115686904A (zh) 网页诊断方法、设备及系统
CN100437740C (zh) 站点点击与网页上链接的关联

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination