用于记录、编辑和再现计算机会话的方法与流程

文档序号:16533604发布日期:2019-01-05 10:59阅读:186来源:国知局
本申请是2016年7月13日提交的美国专利申请号15208643的继续部分申请,该申请通过引用的方式被全文合并在本文中。本发明涉及一种用于记录用户动作的方法和系统,更具体来说涉及在针对台式或膝上型计算机上的应用进行工作的同时记录、编辑和再现用户web浏览器会话,或者更宽泛而言是用户会话。
背景技术
::人类生活的很大部分正越来越多地在线上进行,并且人们常常希望通过保存其与web浏览器的交互(或者更一般而言是其与台式/膝上型计算机上的应用的交互)来记住其线上生活的某些方面。当某人对他的线上经历进行记录时,很自然的是期望对这样的记录进行编辑以用于讲故事或者用于改进的未来通信。传统的记录可以通过视频屏幕捕获来实施。但是视频屏幕捕获不允许以所期望的细节水平对web浏览器会话的记录进行编辑。虽然可以使用两种类型的记录——参见图1,但是现有的手段都无法捕获与网页的每一项元素和交互,并且不允许在重放之前进行修改和编辑,保留超文本链接从而使得观看者可以通过在重放期间进行点击而跟随链接,以及修改任何元素或交互,这些对于视频屏幕记录都是不可能实现的。希望能够替换页面上的任何元素以及删除或改变任何交互,从而允许对所记录的web浏览器会话作出不受限制的改变。还希望存储记录以用于单独的按需重放。用户可能想要向较大的观看者群组同时广播记录,或者在进行记录时实况流送记录。在重放之前或者在实况流送期间,可以通过可点击和交互式的内容或广告来替换网页的元素,可以基于可用于重放软件的数据针对群组或个人对所述内容或广告进行个性化。但是传统的视频记录并未提供这些特征。有几个软件工具被用于用户体验研究和测试。传统的工具监测用户与网站的交互。这些用于“顾客体验管理”的工具由网站的开发者使用来监测网站访问者对网站的使用,通常是为了改进网站的可用性或者增加来自网站上的消费者购买的收益。这些软件工具必须由开发者安装在其自身的网站上。这些软件工具当中的一些监测从web浏览器到web服务器的请求,其他的软件工具则使用浏览器api来监测例如链接上的点击之类的用户交互。这些软件工具被用于收集关于大量访问网站的人的数据,并且所述数据常常以热度图(heatmap)图表或汇总表(summarytable)的形式被呈现。在被用于顾客体验管理的工具当中有用于“会话回放”的工具。会话回放是回放访问者在网站上或web应用内的旅程的能力。回放可以包括用户的视图(浏览器或屏幕输出)、用户输入(键盘和鼠标输入)以及网络事件的日志或控制台日志。其主要目的时帮助改进顾客体验,从而研究网站可用性和顾客行为。大多数提供会话回放的工具依赖于对于web浏览器会话的视频屏幕记录。一些高级的工具使用浏览器api来记录关于用户与网页的交互的数据。被用于同样访问浏览器api的顾客体验管理的工具之间在技术和目的方面都存在关键差异。首先,被用于顾客体验管理的工具由web开发者仅安装在其自身的站点上。所述工具只能被用来记录和回放针对开发者自身的站点的访问。与此对照,希望记录和重放针对任何网站的访问。其次,被用于顾客体验管理的工具按照针对聚合分析和研究所设计的形式来保存数据。与此对照,希望按照允许在回放之前对web浏览器会话进行编辑的格式来保存数据。传统的手段无法以所期望的细节或交互的水平来捕获、编辑和重放web浏览器会话。相应地,希望有一种出于娱乐或教育目的(而不仅仅是用于分析顾客行为)记录、编辑和再现web浏览器会话的系统和方法。还希望能够使用web浏览器本身作为媒介创建娱乐或教叙事,而不是作为视频来记录屏幕上交互。技术实现要素:相应地,本发明涉及一种用于在针对台式或膝上型计算机上的应用进行工作的同时记录、编辑和再现用户web浏览器会话或者更一般而言是用户会话的方法和系统,从而基本上消除相关技术的其中一个或多个缺点。在一个实施例中,提供一种用于记录、编辑和重放web浏览器会话的方法和系统,所述方法和系统捕获针对网页的一系列用户访问,包括每一个页面的初始状态以及与网页的所有用户交互。应用(application)使用web浏览器的原生api(应用编程接口)按照独有的数据格式而不是作为视频来记录和存储网页和用户交互。不同于对于计算机屏幕的视频记录,通过使用浏览器的原生api进行记录使得有可能对用户的web会话的记录进行编辑,从而按照对于视频记录所不可能的方式来修改记录。记录器应用包括在javascript(浏览器的原生编程语言,其可以被内建到web浏览器中或者被添加为浏览器扩展)中实施的核心引擎再加上用于重放的各种本地或远程服务器配置。记录可以被用于娱乐或教育目的。本发明的附加的特征和优点将在后面的描述中进行阐述,并且部分地将通过所述描述而变得显而易见,或者可以通过实践本发明而获知。通过特别在书面描述及其权利要求以及附图中所指出的结构将会实现并且获得本发明的优点。应当理解的是,前面的一般性描述和后面的详细描述都是示例性和解释性的,并且是为了提供关于所要求保护的本发明的进一步解释。附图说明包括附图是为了提供对于本发明的进一步理解,附图被合并在本说明书并且构成本说明书的一部分,其示出本发明的实施例并且与描述部分一起用来解释本发明的原理。在附图中:图1示出了用于记录用户动作的传统模式;图2示出了如何安装和使用记录应用;图3示出了根据示例性实施例的用户界面和处理流程;图4所示出的图示描绘出根据示例性实施例的使用在web浏览器记录中的独有数据格式;图5描绘出由示例性实施例提供的文件;图6示出了示例性实施例的架构;图7示出了根据示例性实施例的一种方法的流程图;图8a示出了安装有并且正在运行记录器应用(参见右上角的圆形按钮)的浏览器页面;图8b示出了正在显示具有可用记录的重放窗口的浏览器页面;图9示出了正从本地寄主播放的所记录页面的截屏图;图10示出了可以被用于实施本发明的示例性计算机或服务器的示意图;图11、12a、12b、13、14、15a、15b和16示出了说明本文中所描述的概念的示例性截屏图。具体实施方式现在将详细参照本发明的优选实施例,其实例在附图中示出。在本发明的一个方面中,提供一种用于在针对台式或膝上型计算机上的应用进行工作的同时对用户web浏览器会话或者更宽泛而言是用户会话进行记录、后续编辑和再现的方法和系统。在一个实施例中,浏览器扩展(插件)和本地web服务器被配置成记录和存储与网页的用户交互。浏览器扩展被用于进行记录。浏览器扩展被安装在web浏览器(例如googlechrometm)中。所述示例性实施例还可以被实施成用于其他web浏览器的浏览器扩展,比如safari、firefox、edge、opera和internetexplorer。浏览器扩展包括(在本例中)用javascript编程语言编写的软件代码。核心引擎捕获网页的初始状态以及用户与网页的每一项交互。页面的初始状态和每一个交互事件被捕获为数据,并且与时间标记一起被保存到事件流。事件流作为文件被存储在独有的数据格式中。或者,数据流可以被保存到数据库。事件流包含使得重放服务器再现用户的web浏览器会话所需要的所有数据。使用json(javascript对象标记)数据交换格式来存储事件流。json为数据属性的数组提供共同的句法。所述示例性实施例定义使用json来存储web浏览器记录的一致格式。所述数据格式是所述示例性实施例所独有的。在web浏览器会话期间所访问的每一个网页是json数组中的一个项目。数组中的每一个项目由描述网页的初始状态的对象加上存储具有时间标记的事件序列的时间线数组来表示。每一个web浏览器(googlechrometm、appletmsafaritm等等)实施w3cdom4,也就是来自w3cweb超文本应用技术工作组的浏览器文档对象模型的规范,其被称作“浏览器api”。核心引擎通过遍历可以通过浏览器api获得的网页文档对象模型(dom)而捕获网页的初始状态。在记录器捕获网页的初始状态之前,所述处理确保为每一个页面元素指派一个独有的标识符。随后,所述处理迭代经过每一个元素,从而按照可以被存储和再现的格式将html序列化。序列化的html被存储在json数组中,并且包含再现页面所需要的所有事项。每当用户访问网页时,记录器应用捕获并存储网页的初始状态。“web抓取”是用于捕获和保存网页上的数据的一种常见技术,其意图通常是从页面提取数据。当核心引擎捕获网页的初始状态时使用“web抓取”技术,但是web抓取被用来存储和再现作为记录中的“关键帧”的网页。所述示例性实施例为每一个页面元素指派一个独有的标识符,并且按照允许在记录的重放期间再现页面的独有数据格式保存序列化的html。当核心引擎保存网页的初始状态时,其使用类似于web抓取的技术使用浏览器api来遍历文档对象模型(dom)。虽然使用了浏览器api,但是其目的不同于常见的web抓取,这是因为记录器捕获并存储网页,从而可以在web浏览器会话的记录的重放期间对网页进行再现。网页的初始状态与属性一起被存储,比如屏幕宽度和高度、url以及网页的html代码的完整记录。其被存储为json数组中的对象并且具有以下属性:-所访问的网页的url;-网页的html;-网页html标签的属性(比如语言);-浏览器屏幕宽度;-浏览器屏幕高度;-活跃元素(接收聚焦的元素);以及-页面的初始滚动位置。在捕获并存储网页的初始状态之后,核心引擎进入“听和看(listeningandwatching)”模式,以便记录用户与网页的每一项交互。核心引擎使用浏览器api来观察用户交互事件。浏览器api提供用以留意事件的javascript方法,具体来说是mutationobserver和各种事件侦听器。通常来说,web开发者使用这些方法来为网页添加交互性或附加的功能。出于所述示例性实施例的目的,这些javascript方法被用来观察用户交互,从而使得记录器应用可以记录和再现web浏览器会话。通过时间代码、类型(比如鼠标移动或滚动事件)以及相对于浏览器窗口的左侧边缘和顶部边缘的位置坐标来描述时间线事件。在“听和看”时,核心引擎使用事件侦听器捕获以下用户交互:-鼠标事件(鼠标移动,鼠标下移,鼠标上移);-页面和元素滚动事件;-在输入框中输入文字;-被改变的输入框的数值;以及-聚焦和模糊事件。除了这些事件之外,核心引擎还监测并记录针对dom节点的改变(使用浏览器apimutationobserver对象),比如:-子代节点的添加和移除;-属性的添加、移除和改变;以及-针对子代文字节点数值的改变。通过使用事件侦听器和mutationobserver对象,核心引擎捕获web浏览器中的所有用户交互。页面状态的每一项交互或改变被保存为时间线数组中的一个项目。每一个项目被指派以微秒(或者毫秒或某种其他时间单位)计的“时间”属性,从而测量自从前一个事件以来所经过的时间。所述示例性实施例对于每一个事件使用相对时间而不是时钟时间,从而使得更容易在编辑处理期间记录事件序列。时间线中的每一个事件由以下属性描述:-时间;-类型(比如鼠标移动或滚动);以及-id。如果事件是针对dom属性的改变,则核心引擎记录以下属性:-时间;-类型(“属性”);-id;-属性名称;以及-属性数值。如果事件是针对dom文字节点内的文字的改变,则核心引擎记录以下属性:-时间;-类型(“字符数据(characterdata)”);-id;以及-文字。如果事件是与页面上的视频的交互,则核心引擎记录以下属性:-时间;-类型(“视频”);-id;-时间标记(当前时间);以及-来源(对应于视频来源的url)。核心引擎的目的是捕获网页的初始状态和任何用户交互,并且在存储器中构造时间线数组。在其最简单的实现方式中,核心引擎提供简单的api以开始、停止和重新开始记录处理。“getcapture”函数返回包含初始状态和事件的时间线的json数组。核心引擎伴随有支持把核心引擎与浏览器书签工具(bookmarklet)或浏览器扩展集成在一起的附加功能。书签工具是作为书签或收藏夹项(favorite)被安装在web浏览器中的javascript代码,从而添加“记录”按钮以作为收藏夹项并且提供用于发起web浏览器会话的记录的简单界面。浏览器扩展提供全功能的用户界面。浏览器扩展把控制(和指示符)添加到web浏览器的角落。当被初次安装时,所述控制是简单的灰色或黑色圆圈。所述控制还是用以表明会话是否正被记录的指示符。用户在控制(灰色圆形按钮)上点击以观看浏览器扩展用户界面。本地服务器必须可用来存储和重放记录。如果服务器未在运行,则用户看到消息“重放服务器未在运行”。如果服务器正在运行,则用户看到消息“服务器可用”。用户可以点击按钮以“开始记录”。指示符(圆圈)短暂地变为黄色以表明记录软件正在加载。随后,指示符变为红色以表明所有浏览器事件正被记录。在记录期间,每一次鼠标移动以及与页面的交互都被记录。如果用户点击链接以访问另一个页面,则指示符在新页面加载的同时变为黄色,从而表明记录在取回新页面的同时暂停。一旦新页面被加载,指示符变为红色并且记录恢复。用户可以点击红色指示符并且在任何时间按下按钮“保存记录”。用户将看到消息和链接“已保存。观看所保存的记录”。用户可以点击链接以打开并且观看记录。用户可以点击链接“观看记录”以看到具有先前保存的记录列表的服务器用户界面页面。浏览器扩展包含用以禁用内容安全策略(csp)的特征,所述内容安全策略是防止由于下载恶意内容而导致的跨站脚本(xss)、点击劫持和其他代码注入攻击的安全标准。一些网站(特别是facebook和twitter)允许csp,并且浏览器扩展提供用以配置浏览器忽略csp安全设定的复选框。书签工具和浏览器扩展通过javascript注入技术把核心引擎与任何网页集成在一起。javascript注入通过把来自本地计算机的javascript文件插入到受访网页中而提供对于任何受访网页的dom的访问。书签工具或者浏览器扩展可以获得本地javascript文件并且将其添加到显示在浏览器中的任何网页。所述示例性实施例把核心引擎实施成javascript文件。所述javascript文件作为浏览器扩展的一部分在本地计算机上可用。每当用户发起记录并且访问新的网页时,浏览器扩展注入包含核心引擎的本地javascript文件。浏览器扩展提供用户界面,并且通过用以开始记录、暂停记录和保存事件时间线的函数调用来管理核心引擎的操作。浏览器扩展周期性地检查以确定本地web服务器是否可用于保存文件和重放。如果去往本地服务器的连接丢失,则浏览器扩展显示出错消息。本地web服务器被用于保存文件和重放。需要“node.js”javascript运行时间或类似事项,并且必须在安装本地web服务器之前在用户的计算机上可用。本地服务器可以在javascript编程语言中被实施成单个javascript文件。本地web服务器对http(不安全超文本传输协议)和https(安全超文本传输协议)请求作出响应。在记录利用普通http请求的网页时,浏览器扩展使用http请求本地javascript文件。在记录https时,浏览器扩展发出安全https请求以获得本地javascript文件。为了对安全https请求作出响应,自签名的ssl证书伴随本地web服务器。在所述示例性实施例的最简单的版本中,用户从计算机的命令行启动本地web服务器。本地web服务器侦听来自浏览器扩展的请求。本地web服务器对周期性探通请求作出响应,以便向浏览器扩展通知其可用并且正在侦听。在所述示例性实施例的最简单的实现方式中,本地web服务器通过把文件保存到计算机文件系统而对浏览器扩展的针对保存记录的请求作出响应。在所述示例性实施例的更复杂的版本中,本地web服务器可以把事件时间线保存到数据库而不是文件系统。在把事件时间线保存为文件之后,本地web服务器可以显示网页,所述网页示出所有记录的列表。通过点击任何记录的文件名打开新的浏览器窗口,并且开始重放记录。为了重放所递送的html文件包括原始网页的初始状态加上去往实施重放的javascript文件的链接。html重放页面包括再现用户交互所需要的事件时间线。实施重放的javascript文件包括主类“browserplayback”。所述主类包含对播放、暂停或停止重放的用户请求作出响应的函数。请求播放调用(requesttoplaycalls)是重新创建所记录的网页的初始状态的函数。所述函数设定浏览器窗口的规格,再现页面,把页面滚动到当记录开始时所选择的初始位置,并且设定浏览器聚焦以便匹配当记录开始时的聚焦状态。所述示例性实施例定义一种用于事件时间线的格式,所述格式包含对应于每一个所记录事件的时间代码和数字标识符全部二者。时间代码以微秒记录自从前一个事件以来所经过的时间。通过把顺序数字id与所经过的时间一起使用允许对事件或事件块进行编辑和重新定序。重放脚本创建id表,从而在正确的序列中回放每一个时间线事件。所经过的时间属性控制调度每一个事件的显示,从而正确地再现事件的序列和持续时间全部二者。重放脚本包含由播放请求触发的“渲染”函数。渲染函数读取事件(“帧”)的数组,并且使用浏览器api函数“requestanimationframe”随着每一个所记录的事件更新网页。requestanimationframeapi函数通常被用来在网页上实施动画效果。所述示例性实施例把requestanimationframe用于更新初始网页的目的,以便从所记录的web浏览会话再现用户交互。每一种类型的所记录的用户事件必须被不同地渲染,从而使得重放脚本包含用以正确地渲染每一种类型的用户交互的函数。重放脚本创建被用来再现例如鼠标移动之类的鼠标事件的外观的模拟光标。许多应用可用于捕获和记录计算机屏幕的视频显示。所述应用使用计算机的操作系统来捕获发送到计算机显示器的视频。其结果与利用视频摄影机记录计算机的显示是相同的。所述记录是例如mp4之类的格式中的视频文件。视频记录可以被剪切和切片,从而重新安排所记录的事件的序列。在与被用于电影中的计算机图形效果的处理相同的劳动密集型处理中,可以使用专门的软件逐个像素地编辑视频记录的单独各帧。虽然视频图像通过屏幕上的重叠元素可以具有深度的错觉,但是视频记录是单层,并且只有像素才能被编辑。如图1所示(底部部分),该优选实施例是针对web浏览器记录(与视频屏幕记录相对照),其使用浏览器api来捕获网页上的一些或所有元素以及与网页的一些或所有用户交互。api的典型用途时监测用户交互以便从web服务器获得数据,或者修改网页本身。浏览器api还可以被用来监测和记录用户交互。通常而言,这是由web开发者进行的,web开发者尝试观察和分析开发者自身站点上的访客行为以用于改进网站可用性的目的。所述示例性实施例使用浏览器api按照可以在回放之前被编辑的形式记录用户交互以用于教育或娱乐目的(例如由于其表示电影中的场景而将其捕获)。根据所述示例性实施例,使用json标准将网页元素和交互存储为时间线格式中的文本数据。每一项元素和交互可以被识别、修改、移动或删除,从而允许仿佛记录具有许多层那样对记录进行修改。在重放上,所再现的浏览器会话包含具有链接的实际网页,所述链接可以被点击和跟随以去往新的网页。在重放上,重放服务器完全再现浏览器会话,包括在原始记录的会话期间所发起的针对网页的访问。这意味着在没有编辑的情况下,观看者将看到与进行原始记录的用户所看到的相同的网页访问的序列,从而复制具有由原始用户看到的从网页到网页的无缝过渡的浏览器会话。不同于观看视频,在web浏览器中再现web浏览器会话,这意味着正在观看重放的用户可以在任何时间点击浏览器重放窗口中的链接,并且显示所链接的页面的新的浏览器窗口打开。所有链接在重放期间都是活跃的,这意味着除了简单地观看由原始用户记录的从页面到页面的过渡之外,观看者可以点击重放窗口中的任何链接以便打开新的窗口。图2示出了记录应用如何被安装和使用。作为第一步骤,必须安装节点。所述节点是一个模块,其解译并且执行javascript程序。所述示例性实施例被实施成可执行javascript的程序包(package)。作为第二步骤,下载记录应用并且安装在用户的计算机上。在第三步骤中,用户在计算机的终端或控制台中输入命令以便启动本地web服务器。在第四步骤中,用户在web浏览器中安装专有浏览器扩展。浏览器扩展提供用于记录和重放web浏览器会话的用户界面。“node.js”软件程序是开源实用程序,其独立于web浏览器解译并且执行javascript程序。所述示例性实施例被实施成可执行javascript程序的程序包,并且需要“node.js”软件程序来执行javascript程序。此外,图2示出了所述示例性实施例的依存性和组件。“node.js”是依存性(dependency)。所述示例性实施例包括本地web服务器和被配置成记录与网页的用户交互的浏览器扩展。实施不同软件程序包的安装序列。首先,安装“node.js”。随后,下载记录应用。接下来,用户启动本地web服务器。如果node.js未被安装,通常不可能启动本地web服务器。随后,用户在web浏览器中安装浏览器扩展。浏览器扩展提供用于记录和重放web浏览器会话的用户界面。但是除非安装了node.js并且本地web服务器正在运行,否则用户通常无法记录web浏览器会话。图3示出了根据示例性实施例的用户界面的处理流程。所述示例性实施例包含被安装在“node.js”软件程序和javascript运行时间引擎之上的本地web服务器,javascript运行时间引擎被安装在计算机的操作系统之上。本地web服务器可以访问计算机的文件系统或者用于持久存储的数据库。用户可以从作为浏览器扩展可用的用户界面在“开始记录”上点击,从而从本地web服务器请求“record.js”(步骤1)并且将其注入到浏览器中可见的任何网页中(步骤2)。网页的初始状态以及任何用户交互由所述示例性实施例捕获。当用户点击“开始记录”时,标准json格式中的时间线文件被发送到本地web服务器并且被保存到文件系统或数据库(步骤3)。在一个实施例中,记录被保存为用户的本地计算机上的文件。在另一个实施例中,记录被保存到运行在用户的本地计算机上的数据库服务器应用。最后,有可能把记录保存到远程服务器,或者是作为文件,或者是将其存储在数据库中。当用户点击“观看记录”时,浏览器扩展向本地web服务器发出请求,并且显示具有可用记录的列表的网页。通过点击去往记录的任何链接(步骤4)而请求本地web服务器生成包含所记录的网页的初始状态的网页,其中具有嵌入的“play.js”文件和事件时间线。重放窗口打开(步骤5),其中显示所记录的网页的初始状态,并且用户可以观看所有记录的用户交互的重放。应当提到的是,记录、编辑和重放web浏览器会话的能力是新的并且是新颖的。使用web浏览器在几乎每个人的生活中都很重要,但是之前不可能记录、以详细的水平编辑以及重放web浏览器会话。所述示例性实施例以先前所不可能的方式有利地提供了对于web浏览器记录的创造性使用。举例来说,有可能基于对web浏览器会话进行记录和编辑而创建虚构的叙事。正如视频和电影记录可以被用来制作影片(motionpicture)或者音频记录可以被用来制作广播剧或播客,所述示例性实施例可以被用来制作在web浏览器中播放的故事。图4所示出的图示描绘出根据示例性实施例的使用在web浏览器记录中的数据格式。记录被实施成使用标准json数据句法组织的文本数据。记录是由表示在web浏览器会话期间访问的每一个网页的一个或多个对象构成的json数组。web浏览器把浏览历史记录成用户访问过的网页的url的列表。所述示例性实施例所做的事情远远多于简单地记录先前访问过的网页的列表。每一个网页被完全捕获,包括被用来创建网页的所有html,因此即使网页后来被网站所有者改变,也仍可以按照之前看到的样子确切地重新创建网页。也就是说,网页被记录器归档。在记录期间,用户所访问的每一个网页被完全归档,从而可以在重放期间对其进行再现。每一个网页对象包含一个对象,该对象包括描述网页的初始状态的属性加上表示修改或变换页面的用户交互或事件的时间线的数组。应当提到的是,在任何web浏览会话期间,用户的动作可以在由web开发者提供的一个选项集合内修改网页。举例来说,网站开发者可以为用户给出打开聊天窗口以发送消息的选项。示例性的记录器可以捕获用户的动作以及所得到的网页修改。如果用户在进行记录的同时选择了打开聊天窗口的选项,则所述记录再现用户的动作并且示出聊天窗口打开。记录器可以捕获、记录和再现与网页的任何用户交互。数据记录格式使得有可能修改任何记录。举例来说,用户可以编辑数据文件并且改变显示在聊天窗口中的单词。利用属性来描述网页的初始状态,比如所访问的网页的url、网页html标签的属性、屏幕宽度和高度、任何接收聚焦的元素以及页面的初始滚动位置。为每一个时间线事件指派类型、id、时间代码以及特定于该类型的事件的属性。描述网页的初始状态的属性例如有:屏幕宽度——1198(像素);屏幕高度——591(像素);url——https:***github.com/storistream/browsercapture;滚动位置——100(像素);活跃元素——132(元素id);以及html——(网页html)。描述用户事件的属性例如有:类型——鼠标移动;id——323(顺序整数);时间——969(微秒)。从浏览器api获得类型。从页面上的第一个元素开始顺序地指派id。时间被计算为自从前一个事件以来的以微秒计的持续时间。取决于事件的类型,事件可以具有附加的属性,比如对应于“mousemove(鼠标移动)”的属性:左侧——1022(距离左侧的像素数);以及顶部——66(距离顶部的像素数)图5描绘出由示例性实施例提供的文件。重放服务器文件夹包括对于本地web服务器所需要的文件。“index.js”文件在javascript中实施本地web服务器,其需要用于http、https的javascript软件库以及对于文件系统的访问。需要先前安装有nodejavascript运行时间。“cert.pm”和“key.pm”提供自签名的ssl证书以用于针对服务器的https访问。“play.js”文件实施重放功能。其与html相组合以用于网页的初始状态,并且读取和渲染时间线数据以便再现web浏览器会话。record-extension(记录-扩展)文件夹包含对于浏览器扩展所需要的文件。“background.js”文件包含作为浏览器扩展所安装的代码。“popup.html”和“popup-script.js”文件实施由浏览器扩展显示的用户界面。“record.js”文件包含被注入到网页中以允许记录的核心引擎。recordings(记录)文件夹中的文件是json文件格式中的实际web浏览器记录。图6示出了示例性实施例的架构。浏览器扩展提供用于控制记录和重放的用户界面。浏览器扩展周期性地探通(602)本地web服务器以便确定其是否可用于记录和重放,其中向“index.js”脚本发送请求,所述脚本对探通请求作出响应。浏览器扩展包含复选框,所述复选框禁用网页的内容安全策略设定以便启用javascript注入。“观看记录”链接606向“index.js”脚本发送请求,以便显示列出先前的记录的网页。“开始记录”链接(608)向index.js脚本发出请求,以便获得用于注入到网页中的“record.js”脚本。“取消”按钮610向“record.js”脚本发送请求,以便停止记录(632)。“保存”按钮616向“record.js”脚本发送请求,以便停止记录(632)并且把事件时间线提供到index.js脚本,以便保存在文件系统或数据库中。“index.js”脚本是本地web服务器。“index.js”脚本可以对浏览器扩展的探通请求作出响应(614)。“index.js”脚本可以对显示包含先前记录的列表的网页的请求作出响应(616)。“index.js”脚本可以通过提供“record.js”文件以供注入到用于记录的网页中而对记录请求作出响应。“record.js”脚本包含用于捕获网页的初始状态(626)以及所有用户交互和页面变异(630)的核心引擎的所有函数。browsercapture(浏览器捕获)主函数通过捕获页面的初始状态(626)以及所有用户交互和页面变异(630)对记录请求作出响应。作为第一步骤,为所有dom元素指派数字标识符(624)以帮助再现页面。一个函数把页面的初始状态捕获为序列化的html。随后,核心引擎开始侦听用户事件并且观察dom变异。核心引擎持续进行侦听和观察,直到接收到停止请求(632)。如果核心引擎接收到保存记录的请求(616),则getcapture(获得捕获)函数在准备好被保存到文件系统或数据库的格式中返回包含页面的初始状态和事件时间线的json数组。“play.js”脚本被嵌入在当用户发出重放记录的请求时由“index.js”脚本生成的html文件中。主函数被命名为browserplayback(浏览器重放)(620)。其再现网页的初始状态(636),设定浏览器规格(638,644),设定活跃聚焦(640),设定滚动位置(642),并且创建模拟光标。随后,browserplayback函数读取事件时间线(646),其中迭代(648)经过由id表确定的序列中的每一个事件。browserplayback设置再现事件(或变异)所需要的动画(650),并且在浏览器中渲染事件(652)。图7示出了根据示例性实施例的方法的流程图。在步骤702中,用户访问网页。在步骤704中开始记录用户动作。如果本地服务器在步骤706中可用,则在步骤710中执行“requestrecord.js”脚本。否则,在步骤708中对用户进行告警。在步骤712中,执行脚本“injectrecord.js”。在步骤714中设定元素id,并且在步骤716中捕获初始状态。在步骤718中捕获事件。在步骤720中捕获变异。如果在步骤722中发出停止记录,则在步骤724中保存记录数据。否则,处理回到步骤718。如果在步骤726中请求观看记录,则在步骤730中打开窗口。否则,处理在步骤728中退出。在步骤732中设定屏幕尺寸。在步骤734中显示html。处理在步骤736处设定活跃状态。在步骤738中设定滚动位置。处理在步骤740处创建光标。如果在步骤742中留下任何事件,则处理在步骤744中重新创建事件。否则,重放在步骤746中停止。图8a示出了安装有并且正在运行记录器应用(参见右上角的圆形按钮)的浏览器页面。当用户在记录按钮上点击时,还示出“开始记录”对话菜单。图8b示出了正在显示具有可用记录的重放窗口的浏览器页面。用户可以在任何记录上点击并且重放记录。图9示出了正从本地寄主播放的所记录页面的截屏图。正如前面所讨论的那样,所述示例性实施例的主要目的是:1)把用户活动和ui改变记录到包含ui元素及其属性的独有数据格式中;2)能够按照其被记录的相同方式回放所记录的数据;3)能够通过改变其属性(时间、长度、尺寸、颜色、文字等等)而单独编辑每一个所记录的元素。一个示例性实施例是针对浏览器会话记录。可以实施其他实施例以用于记录mactmos和windowstm操作系统的各种版本中的桌面/独立式应用的用户活动和ui元素。虽然某些技术细节对于每一种系统/环境可能是不同的,但是记录和重放的概念和想法是相同的。根据一个示例性实施例,桌面应用的记录需要独有的数据格式。所有的应用gui元素都被指派独有的id,并且初始gui窗口的所有改变都被记录。在gui窗口之间切换的所有用户动作以及对于gui元素的用户操作都被记录,并且还可以被重放。在一个替换实施例中,所述概念被更加宽泛地应用于用户动作的记录、编辑和重放,这是因为所述用户动作涉及桌面应用。为此,用户利用桌面记录器来记录应用。桌面记录器注入到目标应用中,并且侦听改变事件。桌面记录器随后把所记录的数据解析成layers(分层)格式。这种格式使用根据所记录的应用的objectmodel(对象模型)树的文件夹树,其中每一个类将表示被存储的格式中的一个文件夹。所记录的格式被存储在根文件夹中(例如skype将被存储在com.skype.skype中)。每一个应用文件夹包含带有帧号的文件夹。每一帧包含被存储的对象的分级结构。在关键帧中重新绘制对象,其中可以重复所述对象的视觉。分级结构中的每一个对象包含在grabinfo.plist中描述的元数据。属于四种类型当中的一种的对象将具有可以是图像、图形、文字或群组的类型字段。这方面如下工作:一个替换实施例是可以由web记录器(比如在本文献中宽泛地描述的chrome扩展)进行的记录。web记录的被存储的格式是从所记录的html内容生成的pdf文件。桌面记录器把pdf文件转换成下面描述的格式:1、如果对象是图像或图形类型,则文件夹还可以包含掩码,例如mask.svg。2、如果对象是文字或aparttext类型,则其元数据将在文字字段中包含文字本身,在textindex字段中包含其alltexts.txt索引,并且在textstyle字段中包含文字参数。文字可以具有多种设定,所述设定被应用于指定的区间,例如{x,len},其中x是第一个符号的编号,并且len是符号的总数。3、此外,如果对象是文字,则其可以具有边际字段,其中(按照给定的顺序)列出了左侧、顶部、右侧、底部文字边际。4、可以在对应于每一个区间的textstyle字段中规定字体尺寸和名称。如果字段为空,则把例如fontname(fontpath)和fontsize之类的根元数据字段应用于全体文字。5、如果文字使用非系统字体,则将对来自fontpath字段的本地路径进行寻址。处于使用中的所有字体都被存储在根文件夹中的fonts中。如果在该文件夹中没有字体,则意味着无法被识别。在这种情况下,使用任何其他可用的字体。6、帧字段包含对象坐标和尺寸。坐标时相对于对象超视图。对于根web对象还列出了viewport,在这种情况下,帧包含{0,0,viewport.w,viewport.h}7、群组类型的对象是包含其他对象的空容器。在编辑器中,所述容器被用来对对象进行分组,例如如果选择了一个子代对象,则将替换地选择其群组对象。8、zindex字段列出超视图上的元素的索引。在放置对象时,对象被整理两次:第一次是通过被解析的字段进行整理,第二次是通过zindex字段进行整理。9、可见字段是范围在0到1之间的对象透明度水平。10、内插字段被用于对所列出的数值进行内插。该字段可以但不一定包含以下关键字:裁切、帧、可见。每一个数值在{类型,因数}格式中被列出,其中类型可以是0(无内插)、1(线性内插)、2(easein幂加速)、3(easeout幂减速)或4(easeinout幂加速再减速);并且因数是内插系数(保留的数值,尚未实施)。在编辑器中,从前一个关键帧到当前关键帧应用内插,也就是说如果在关键帧n中存在内插,则内插将从帧n-1去到帧n。11、裁切字段在{左侧,底部,右侧,顶部}格式中包含关于图像裁切的信息,其中每一个数值的范围是0到1之间。左侧和右侧是垂直裁切线的位置,顶部和底部则是水平裁切线的位置。举例来说,无裁切被编码为{0,0,1,1},也就是说左侧裁切线处于最左侧边缘(0),右侧裁切线处于最右侧边缘(1)。如果对象被从右侧裁切一半,则将被编码为{0,0,0.5,1}。还可以使用其他字段:-json-mediabox(pdf内容尺寸)-wasrendered(对象在该帧中是否已被渲染)-devname-parsemode-address-aoclass-name-basefont-visibleframe-framename(当前帧号——不是所有对象都有)-lastchangesframename(具有任何参数改变的帧的编号——不是所有对象都有)-lastvisiblerenderframename(先前重新绘制的帧的编号——不是所有对象都有)-backgroundcolor。任何具有.pdf扩展名的对象都是中间产物,并且应当优选地不被使用在xml生成中。mouse(鼠标)文件夹存储鼠标光标。对于每一帧,创建包含鼠标坐标、光标类型和尺寸以及表明鼠标在该帧中是否被点击的标志的plist文件。在项目中所记录的所有光标移动都被包含在mouse/cursors(鼠标/光标)文件夹中。项目根文件夹中的session.plist包含其中一些记录参数:fps(记录的帧率)。lastframe(上一个记录的帧号)。作为另一个选项,取代把所有事项直接存储在存储器中,数据可以在记录期间被一部分一部分地发送到服务器。dom元素的mutationobserver中的所有改变作为事件被添加到对象数组中,其中每一个对象包括:自从前一个事件以来的时间,以毫秒计;发生改变的元素id;改变类型:childlist(子代列表)、属性、characterdata(字符数据)、输入、改变、聚焦、模糊、videoplay(视频播放)、videopause(视频暂停)、innerhtml、滚动、mousemove(鼠标移动)、mousedown(鼠标向下)、mouseup(鼠标向上)等等。html的新数值或新的部分当数组在其中具有[n]个元素(事件)时(n是表示触发数据传输的事件数目的常数,在本例中,示例性的n=300),生成一个json文件并且连同其序列号一起发送到服务器。随后,数组被清空并且开始累积另外的改变。接着轮到服务器识别用户并且将数据存储在其账户中。当用户停止记录时,记录器发送所有剩余的数据。在服务器确认已接收到所有数据之后,生成最终的json文件并且发送到服务器,其中所述最终文件包括:initialstate数量(也就是说,当移动到新的页面时,创建新的初始状态,并且存储新页面的代码。因此,initialstate数量是用户访问过的页面的数量);每一个initialstate中的json文件的数目;每一个initialstate的持续时间;记录的总持续时间;记录用户id;记录标题;记录期间的浏览器窗口规格;记录是否来自网络摄像头(是/否);记录是否来自麦克风(是/否);声音是否是从选项卡记录的(是/否)。服务器接收该数据并且将其存储在postgresql数据库中。作为另一个选项,视频记录可以被添加到所述记录(例如当用户访问youtube或facebook或类似站点时)。在记录期间,记录器搜索页面上的视频标签,并且开始跟随其onvideoplay、onvideopause事件。当在页面上重放视频时,其创建虚拟画布元素,其中每40毫秒拷贝视频内容。随后,对于画布元素使用标准todataurl方法,其创建当前视频帧的jpeg图像,所述jpeg图像随后被编码到base64格式中。创建背景属性改变事件,其中base64格式种的当前帧被指派到背景属性。在本例中使用jpeg是因为其支持压缩,并且图像数据尺寸是重要的,但是也可以使用png和bmp。base64被用于编码是因为其可以被嵌入到html中。后来,在编辑期间,可以插入其他视频以替代原始视频。不仅有可能在base64中显示所记录的jpeg的总集,而且还有可能在先前被转换时显示成视频流。作为另一个选项,可以把地图操作添加到所述记录,例如yandex.maps或googlemaps记录。在记录期间,记录器使用yandex.map类选择器在dom内容中找到包含地图的画布元素(yandex在这里被用作一个实例)。记录器每40毫秒创建一个虚拟画布元素并且把地图画布内容拷贝到该处。使用todataurl方法创建jpeg格式中的地图图像,并且将其编码到base64格式中。创建背景属性改变事件,并且保存当前地图图像。作为另一个选项,可以使用附加的插件设定。记录器设定与chromeapi一起被存储并且在由用户访问的各种设备上被同步。使用chrome.storage.sync来读取和保存所述设定。此外,记录器跟随chrome.storage.onchanged事件以监测设定中的改变。当显示插件设定窗口时,找到计算机上的所有媒体设备,列出对应于网络摄像头的可允许分辨率,检查网络摄像头和音频记录设备的可访问性。所有这些列表随后被包括到下拉设定菜单中。当选择某一设备时,再次检查其可访问性,并且向用户通知任何错误。如果当设定中的改变被保存时有记录正在进行,则向用户示出出错消息,从而通知用户设定将不会被保存。作为另一个选项,可以应用pdf解析。服务器可以使用phantomjs(不具有图形外壳的虚拟浏览器)和casperjs(用于phantomjs的插件)把html视频一帧一帧地解析成pdf文件。当用户在parse(解析)按钮上点击时,运行phantomjs并且创建对应于html视频的initialstate(初始状态)。服务器从json文件读取数据,并且在每一帧之后应用改变,并且随后通过phantomjs将其渲染成pdf。当完成所有pdf时,服务器将其打包到zip档案或类似档案中,随后可以通过链接访问和下载所述档案。作为另一个选项,可以实施基于选项卡的快进/快退。当用户在时间线上的prev/next(前一个/下一个)按钮或选项卡图标上点击时,定义当前initialstate编号和目标initialstate。从服务器请求对应于目标initialstate的json文件。清空dom内容并且利用所接收到的数据填充,并且记录跳跃到目标时间标记。作为另一个选项,可以添加基于时间线的快进/快退。每一个json文件包含当前initialstate。当沿着时间线快进/快退时,定义目标initialstate编号,并且记录跳跃到当前选项卡。从服务器请求新的json文件的编号。在新的initialstate已被渲染之后,目标时间标记被用来确定该json文件中的位置。最后,所有先前的改变都被应用和渲染,并且记录跳跃到当前时间标记。作为附加的选项,可以实施网络摄像头视频记录,可以实施麦克风声音记录,并且可以实施选项卡声音记录。可以通过mediadevices.getusermedia来访问摄影机和麦克风。在记录之前,读取记录器设定(摄影机分辨率、用户选择的摄影机检测、数据量)并且发送到mediadevices。在webm格式(该格式是google的开源格式,由chrome和其他主要浏览器原生地支持的,并且还允许在团块(blob)中向服务器发送数据,但是也可以设想到其他格式)中创建媒体数据流,随后通过socket.io连接把媒体数据流分批传输到服务器。服务器识别用户并且把媒体数据存储在其账户上。为了在移动设备上从服务器重放记录,利用ffmpeg将所得到的视频文件从webm格式转换成mp4。作为另一个选项,将时间线添加到播放器,并且还可以实施移动播放器版本。播放器外壳使用具有基于组件的结构的vuejs框架。使用原生javascript重放记录。ajax请求使用jquery来获得数据。在服务器侧,可以把服务器从原生nodejs移动到express,从而使得对于代码支持更加便利,具有有用的路由设定,支持多种中间件;数据库很容易被插入,并且模板被便利地集成。可以使用postrgresql数据库来管理用户账户并且存储其记录。在服务器上通过passportjs、passportjwt、passportgoogle、passportlocalsignin、passportlocalsignup、expresssession对用户进行认证。利用bcrypt对数据库中的口令进行加密。作为另一个选项,在记录器的另一个实施例中存在两个部分:最顶部分,其中用户可以定制其想要记录哪些内容并且设定记录窗口的分辨率,以及下方部分,其中用户可以观看作为一个列表的所有记录,并且可以删除、共享记录或者继续编辑html记录。当用户结束记录时,在新的选项卡中打开具有播放器的窗口,其中用户可以编辑html记录信息以及html记录的缩略图。作为另一个选项,可以实施记录的自动完成。在记录器的一个实施例中,如果用户在自动完成列表中的某一项目上进行了点击,则改变未被记录。为了解决这一点,添加了一个处理程序(handler),其检测页面上的自动完成并且跟随鼠标点击。当所述处理程序被触发时,自动完成的输入被记录。作为另一个选项,可以改变记录列表以添加视频信息:标题、描述、长度。作为另一个选项,可以添加用于pdf反解析和删除的按钮,并且可以把记录删除添加到插件。图11-16示出了说明本文中所描述的概念的示例性截屏图。图11示出了recorderextension(记录器扩展),其被安装在浏览器中并且允许用户控制记录处理以及调节配置。图12a-12b示出了htmlplayer(html播放器)。图12a示出了正在回放被存储在远程服务器中的内容的player(播放器)(基于web)。时间线和控制帮助用户导览经过记录。图12b示出了具有网络摄像头流的replay(回放)。其被固定在网页的顶上。视频和声音与网页上的用户动作同步。图13示出了htmleditor(html编辑器)(基于web),其允许用户利用htmleditor来编辑web内容连同网络摄像头和声音。图14示出了layersrecorder(分层记录器)(独立式),其记录osx系统上的桌面应用(在该例中)。记录输出格式是最终剪切项目(具有.plist文件和.fcpx文件的目录中的文件的总集),其中所记录的(多个)窗口的每一个ui元素时一个单独的剪辑。图15a-15b示出了layerseditor(分层编辑器),其中图15a示出了editor(编辑器)(独立式),其允许用户编辑每一个单独的层,例如来自所捕获的窗口的ui元素。其只有在元素属性发生了改变的情况下才渲染所有层(不是按时间)。图15b示出了editor(独立式),其中record(记录)打字选项允许用户按照与该用户所记录的相同的时间间隔和删除来记录打字。图16示出了layersplayer(分层播放器),其中示出了player(在本例中是基于web),其回放由独立式记录器产生并且由独立式编辑器使用的格式。参照图10,一种用于实施本发明的示例性系统包括采取服务器20的形式或类似的通用计算设备,其包括处理单元21、系统存储器22以及把包括系统存储器在内的各种系统组件耦合到处理单元21的系统总线23。系统总线23可以是几种类型的总线结构当中的任一种,包括使用多种总线架构当中的任一种的存储器总线或存储器控制器、外围总线和本地总线。系统存储器包括只读存储器(rom)24和随机存取存储器(ram)25。包含例如在开机期间帮助在服务器20内的各个单元之间传输信息的基本例程的基本输入/输出系统26(bios)被存储在rom24中。服务器20还可以包括用于从/向硬盘(未示出)进行读取和写入的硬盘驱动器27,用于从/向可移除磁盘29进行读取或写入的磁盘驱动器28,以及用于从/向可移除光盘31(比如cd-rom、dvd-rom或其他光学介质)进行读取或写入的光盘驱动器30。硬盘驱动器27、磁盘驱动器28和光盘驱动器30分别通过硬盘驱动器接口32、磁盘驱动器接口33和光盘驱动器接口34连接到系统总线23。所述驱动器及其相关联的服务器可读介质提供对于服务器可读指令、数据结构、程序模块和用于服务器20的其他数据的非易失性存储。虽然本文中所描述的示例性环境采用了硬盘、可移除磁盘29和可移除光盘31,但是本领域技术人员应当认识到,在所述示例性操作环境中也可以使用能够存储可由服务器访问的数据的其他类型的服务器可读介质,如磁盒、闪存卡、数字视频盘、bernoulli卡盒、随机存取存储器(ram)、只读存储器(rom)等等。若干程序模块可以被存储在硬盘、磁盘29、光盘31、rom24或ram25上,包括操作系统35。服务器20包括与操作系统35相关联或者包括在操作系统35内的文件系统36,一个或多个应用程序37,其他程序模块38,以及程序数据39。用户可以通过例如键盘40和指示设备42之类的输入设备把命令和信息输入到服务器20中。其他输入设备(未示出)可以包括麦克风、操纵杆、游戏手柄、碟形卫星天线、扫描仪等等。这些和其他输入设备常常通过耦合到系统总线的串行端口接口46而连接到处理单元21,但是也可以通过其他接口相连,比如串行端口、游戏端口或通用串行总线(usb)。监视器47或其他类型的显示设备也通过例如视频适配器48之类的接口而连接到系统总线23。除了监视器47之外,个人服务器通常包括其他外围输出设备(未示出),比如扬声器和打印机。服务器20可以使用去往一个或多个远程服务器49的逻辑连接而操作在联网的环境中。远程服务器(或多个服务器)49可以是另一个服务器、服务器、路由器、网络pc、对等设备或者其他常见的网络节点,并且通常包括前面关于服务器20所描述的许多或所有单元,但是图中仅示出了存储器存储设备50。逻辑连接包括局域网(lan)51和广域网(wan)52。这样的联网环境在办公室、企业范围服务器网络、内联网和因特网中是常见的。当被使用在lan联网环境中时,服务器20通过网络接口或适配器53连接到本地网络51。当被使用在wan联网环境中时,服务器20通常包括调制解调器54或者用于通过广域网52(比如因特网)建立通信的其他装置。调制解调器54可以是内部或外部的,并且通过串行端口接口46连接到系统总线23。在联网的环境中,关于服务器20描绘出的程序模块或者其某些部分可以被存储在远程存储器存储设备中。应当认识到,所示出的网络连接是示例性的,并且可以使用在服务器之间建立通信链接的其他手段。至此描述了一个优选实施例,本领域技术人员应当认识到,实现了所描述的方法和装置的某些优点。还应当认识到,在本发明的范围和精神内可以有各种修改、适配和替换的实施例。本发明进一步由所附权利要求定义。当前第1页12当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1