CN114417213A - 一种浏览器同屏方法、浏览器与浏览器插件 - Google Patents

Abstract

本申请提供了一种浏览器同屏方法，以实现第一浏览器与第二浏览器间的同屏显示与操作，方法包括：建立第一、第二浏览器之间的通信连接；在第一浏览器对目标网页执行第一阶段处理，生成与渲染相关的数据，并基于其采集生成第一同步数据并向第二浏览器发送，所述与渲染相关的数据包括用于生成、执行渲染的数据或渲染出的结果数据等；第二浏览器接收第一同步数据，基于其在第二浏览器中执行第二阶段处理。以上，本申请将浏览器处理网页并执行渲染的全过程分离为两个阶段：计算处理、渲染显示，通过在第一浏览器执行全过程，而在第二浏览器仅执行第二阶段处理的方式实现两者同屏，可见，本申请所提供的方法实施逻辑分明、同屏效果准确。

Description

一种浏览器同屏方法、浏览器与浏览器插件

技术领域

本发明涉及浏览器领域，尤其涉及一种浏览器同屏方法、浏览器与浏览器插件。

背景技术

浏览器是用来检索、展示以及传递Web信息资源的应用程序，也是上网必备的工具，人们通过浏览器浏览网页获取信息资源、处理互联网业务等。浏览器类型与形式多样，如IE、Chrome、Firefox、Safari等，又如手机QQ浏览器等移动端浏览器、移动应用中的Webview部件、普通应用程序中的浏览器部件等，功能丰富且应用广泛，但现有的浏览器的核心功能限于从Web服务器获取信息资源并执行网页程序，而在两个浏览器之间，其交互功能却明显不足，虽然其运行的Web程序之间可进行交互，但浏览器本身缺乏交互支持，用户之间的互动需要通过其运行的Web应用实现。如遇到将一个浏览中的网页同屏至其他用户的需求时，现有技术的实现方式如：方式一，启动视频会议，分享屏幕或网页窗口；方式二，升级网页程序，使其具有同屏浏览功能。以上实现方式中，方式一操作步骤多，效率低；方式二实施成本高，通用性差，不能支持到所有网页。因此，亟需基于浏览器提出一种同屏的实现方法，解决以上问题。

发明内容

针对上述问题，本发明提供一种浏览器同屏方法、一种可同屏的浏览器或浏览器插件，旨在实现两个或多个浏览器之间的浏览显示与操作同步，便于人们基于浏览器高效交流、互动。本发明提供的技术方案如下：

第一方面，本申请提供一种浏览器同屏方法，用于实现第一浏览器与第二浏览器之间的同屏显示与操作，方法包括：

建立所述第一浏览器与所述第二浏览器之间的通信连接；

在所述第一浏览器对目标网页执行第一阶段处理，生成与渲染相关的数据，基于所述与渲染相关的数据采集生成第一同步数据并向所述第二浏览器发送，其中，所述目标网页为待同屏的网页，所述与渲染相关的数据至少包括用于生成渲染的数据、用于执行渲染的数据、渲染生成的数据中的一种；

所述第二浏览器接收所述第一浏览器发送的所述第一同步数据，基于所述第一同步数据在所述第二浏览器中执行第二阶段处理，其中，所述第二阶段处理与所述第一阶段处理为互补关系，两者合并在一起构成浏览器对网页处理并渲染的全过程，所述第二阶段处理包括，基于所述用于生成渲染的数据生成渲染数据并执行渲染，或者，基于所述用于执行渲染的数据执行渲染，或者，基于所述渲染生成的数据渲染显示。

以上，所述用于生成渲染的数据包括但不限于用户操作数据、DOM数据、CSS数据、次级资源数据、布局树数据、元素绘制记录数据等中的一种或多种，所述用于执行渲染的数据包括但不限于布局树数据、元素绘制记录数据、合成帧数据、其他合成帧数据等中的一种或多种，所述渲染生成的数据包括但不限于合成帧数据、其他合成帧数据、页面图像数据等中的一种或多种。

以上实现方式的原理是，将浏览器计算处理网页并最终渲染至显示器的全过程划分为两个阶段：第一阶段生成与渲染相关的数据，第二阶段基于与渲染相关的数据执行后续的渲染、显示处理，该种划分方式实现了网页的计算、渲染相分离，在第二浏览器中执行与渲染相关的处理，实现网页显示效果。

在一种可能的实现方式中，在所述第一浏览器对目标网页执行所述第一阶段处理后，基于所述与渲染相关的数据，在所述第一浏览器执行所述第二阶段处理。该实现方式在所述第一浏览器执行所述第二阶段处理，用于完成所述目标网页在所述第一浏览器中的渲染，即在所述第一浏览器完成网页计算与渲染显示的全过程。

在一种可能的实现方式中，在所述第二浏览器屏蔽对目标网页执行所述第一阶段处理，当接收到所述第一同步数据后，基于所述与渲染相关的数据执行所述第二阶段处理。该实现方式，在所述第二浏览器屏蔽执行第一阶段处理步骤，即在第二浏览器不执行网页计算处理，仅执行渲染显示，防止对网页的计算逻辑产生干扰。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，还包括，在所述第一浏览器、所述第二浏览器的UI层或网页内生成同屏交流部件，所述同屏交流部件包括同屏控制部件、权限控制部件、声音控制部件、麦克风控制部件、涂鸦部件、涂鸦控制部件、视频显示部件、视频控制部件、同屏状态显示部件、同屏信息显示部件、录制部件、设置部件中的一种或者多种。该实现方式提供了两种方式创建同屏交流部件，浏览器同屏交流提供扩展功能支持，用于实现同屏交流过程中的人机交互控制。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接之后，建立所述第一浏览器与所述第二浏览器之间的音频和/或视频通信。该实现方式为同屏交流提供音视频通信功能支持，进一步提升同屏交流的效果。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，进一步实现两者之间的涂鸦交互，具体为：

在所述第一浏览器与所述第二浏览器的UI层创建用于涂鸦的画布部件，或者，在所述第一浏览器与所述第二浏览器中网页内创建用于涂鸦的画布部件；

基于所述画布部件采集绘制指令、绘制数据生成第二同步数据，将所述第二同步数据向另一侧浏览器发送；接收另一侧浏览器发送的所述第二同步数据，基于其包含的绘制指令与绘制数据，在所述画布部件上基于所述绘制数据执行所述绘制指令；

以上实现方式中，所述画布部件用于所述第一浏览器、所述第二浏览器之间的涂鸦交互。该实现方式所实现的涂鸦交互，便于用户对交流内容圈点标记，进一步提升交流效率、质量。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接之后，监听所述第二浏览器中的用户操作事件，基于所述用户操作事件采集数据生成第三同步数据并向所述第一浏览器发送；所述第一浏览器接收所述第三同步数据，解析其包含的所述操作事件类型、所述操作数据，基于其在所述第一浏览器中执行对应的操作，包括基于所述操作数据执行对应于所述操作事件类型的操作。在该实现方式中，基于所述用户操作事件所采集的数据包括操作事件类型、操作数据中的一种或者多种。

通过以上实现方式，在第一浏览器向第二浏览器提供渲染显示内容的基础上，同时实现了第二浏览器用户对网页的操作控制，增强了同屏的交互性。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，我们将拥有控制权的一侧作为控制方，将无控制权的一方作为受控方，还包括：

监听所述控制方的用户操作事件，当确定所述用户操作事件的类型为指定的操作类型时，基于所述用户操作事件采集数据并生成第四同步数据向所述受控方发送，其中，所采集的数据包括操作事件类型、操作数据中的一种或者多种；

所述受控方接收所述第四同步数据，解析其包含的所述操作事件类型、所述操作数据，基于其在所述受控方中执行对应的操作，包括基于所述操作数据执行对应于所述操作事件类型的操作。

以上实现方式中的所述指定的操作类型，例如页面滑动的用户操作事件，该实现方式有利于提升同屏的执行效率，以及降低同屏过程中的数据传输量。

第二方面，本申请还提供一种浏览器，所述浏览器包括同屏控制模块、第一处理模块、第二处理模块，所述浏览器的同屏工作模式包括第一工作模式、第二工作模式两种，其中：

所述浏览器工作于所述第一工作模式时，为第一同步数据的发送方，采集与发送所述第一同步数据；所述浏览器工作于所述第二工作模式时，为所述第一同步数据的接收方，接收所述第一同步数据并处理；

所述第一处理模块，用于在所述第一工作模式下对目标网页执行第一阶段处理，生成与渲染相关的数据，并基于所述与渲染相关的数据采集生成第一同步数据发送，其中，所述目标网页为待同屏的网页，所述与渲染相关的数据至少包括用于生成渲染的数据、用于执行渲染的数据、渲染生成的数据中的一种；还用于在所述第二工作模式下屏蔽执行第一阶段处理操作；

所述第二处理模块，用于在所述第一工作模式下对所述目标网页执行第二阶段处理；还用于在所述第二工作模式下，接收所述第一同步数据，基于所述第一同步数据执行第二阶段处理，其中，所述第二阶段处理包括，基于所述用于生成渲染的数据生成渲染数据并执行渲染，或者，基于所述用于执行渲染的数据执行渲染，或者，基于所述渲染生成的数据渲染显示；

所述同屏控制模块，用于设置所述浏览器的同屏工作模式；还用于执行同步过程控制，包括基于所述同屏工作模式调用所述第一处理模块、所述第二处理模块执行；还用于在所述第一处理模块或所述第二处理模块执行后更新同步状态；还用于发送与接收同步状态信息。

在一种可能的实现方式中，以上浏览器还包括音视频通信模块、涂鸦模块、操作事件处理模块，其中：

所述音视频通信模块，用于在同屏工作模式下，建立与其它侧参与同屏的浏览器之间的音频和/或视频通信；

所述涂鸦模块，用于在所述浏览器的UI层或所述浏览器的网页内创建用于涂鸦的画布部件；还用于基于所述画布部件采集绘制指令、绘制数据生成第二同步数据发送，和/或，根据接收的所述第二同步数据，基于其包含的绘制指令与绘制数据，在所述画布部件上执行绘制，包括基于所述绘制数据执行所述绘制指令；

所述操作事件处理模块，用于在所述第二工作模式下监听所述浏览器中发生的用户操作事件，并采集操作事件数据向连接同屏的所述第一工作模式的浏览器发送；

所述操作事件处理模块，还用于在监听到用户操作事件后，当确定所述用户操作事件的类型为指定的操作类型时，采集操作事件数据向其它侧参与同屏的浏览器发送；

所述操作事件处理模块，还用于接收其它侧参与同屏的浏览器发送的操作事件数据，基于所述操作事件数据，在本侧执行对应的操作；

所述同屏控制模块，还用于在所述浏览器UI层或网页内生成同屏交流部件，还用于设置所述同屏交流部件，还用于接收所述同屏交流部件的触发事件执行对应的控制指令。

第三方面，本申请还提供一种浏览器插件，所述浏览器插件用于在浏览器上安装，所述浏览器安装所述浏览器插件后，所述浏览器中的所述浏览器插件以执行以上第一方面所提供的任意一种方法，或者，使所述浏览器具有以上第二方面所提供的浏览器的各项功能。

综合以上，本发明采用将浏览器处理网页的计算、渲染过程逻辑上进行划分，通过在第一浏览器执行网页计算、渲染显示处理步骤，而在第二浏览器仅执行渲染显示处理的技术手段实现浏览器间同屏浏览与操作，使同屏的逻辑与实现效果均得到保证，进一步增加同屏过程交互控制、音视频通信、涂鸦交互等功能，最终通过浏览器实现“面对面”的交流效果，可对浏览的任意网页快速同屏，因此，本申请具有逻辑分明、实施性强、适用广、效果优的特点。

附图说明

图1为本申请实施例提供的一种浏览器同屏方法的流程示意图；

图2为本申请实施例提供的一种浏览器同屏方法的流程示意图；

图3为本申请实施例提供的一种浏览器同屏方法的执行过程流程示意图；

图4为本申请实施例提供的一种涂鸦处理过程流程示意图；

图5为本申请实施例提供的一种用户操作事件处理的流程示意图；

图6为本申请实施例提供的一种指定类型的用户操作事件处理的流程示意图；

图7为本申请实施例提供的另一种浏览器同屏方法的流程示意图；

图8为本申请实施例提供的另一种浏览器同屏方法的流程示意图；

图9为本申请实施例提供的一种具有同屏功能的浏览器的结构示意图；

图10为本申请实施例提供的一种具有同屏功能的浏览器的结构示意图；

图11为一种Chrome浏览器的渲染进程处理网页的流程示意图；

图12为本申请实施例提供的另一种具有同屏功能的浏览器的结构示意图；

图13为本申请实施例提供的另一种具有同屏功能的浏览器的结构示意图；

具体实施方式

本申请的实施方式部分仅用于对本申请进行解释，而非旨在限制本申请。

以下，对本申请的实施例进行描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本申请实施例中的浏览器，以网页浏览器为例进行阐述，但本申请同样适用于一些其它的浏览器，如pdf浏览器等，同样属于本申请的保护范围。在本申请中，以JS为例，作为浏览器运行的语言进行说明，其它相关浏览器的语言，亦属于本申请的保护范围。在本申请中，相关在浏览器中构建进程、线程的方式均是用于说明本申请的实现原理的举例，不应因该类举例而限制本申请，凡应用了本申请原理而使用的浏览器进程、线程构建方式，均应属于本申请的保护范围。本申请以第一浏览器向第二浏览器同屏为例进行说明，但不限于两个浏览器，包括一对多等情况。所述第一浏览器、第二浏览器是基于同屏主数据发送、接收的角色定义，在具体的运行场景中，所述第一浏览器、第二浏览器的角色可以转换。

首先，为了便于理解，简要概述下浏览器运行原理，然后结合其说明本申请的实现原理。

在浏览器内部包括多个相互独立又彼此配合的模块，不同的浏览器可能采用不同的架构模式。以Chrome为例，当前采用多进程架构，其顶层由Browser process协调其它进程工作，包括：Browser process负责地址栏、前进后退按钮等部分的工作，以及处理一些底层操作，如网络请求和文件访问等；Renderer Process负责网页呈现的相关处理；PluginProcess负责控制网页插件；GPU Process负责处理GPU相关的任务。浏览器Tab外的工作主要由Browser Process掌控，当在地址栏输入文字后，Browser process交给UI thread处理输入，当点击回车键后，UI thread通知network thread获取网页内容，当请求响应返回时，network thread判断响应内容的格式，如为HTML则把这些数据传递给renderer process，导航过程结束，页面加载过程开始。以下简要介绍下Chrome中渲染进程(rendererprocess)的工作过程，其核心目的在于转换HTML、CSS、JS等为用户可交互的web页面，其包含的线程有主线程Main thread、工作线程Worker thread、排版线程Compositor thread、光栅线程Raster thread。渲染进程处理网页的流程，参考图11所示，主要步骤如下：

S1101，构建DOM。当渲染进程接收到HTML数据时，主线程解析文本字符串为DOM；

S1102，加载次级的资源。所述次级的资源如图片、CSS、JS等额外的资源，这些资源需要从网络或者cache中获取，主进程在构建DOM的过程中逐一请求并加载；

S1103，JS的下载与执行。因JS可能改变DOM结构，故遇到<script>标签时，渲染进程会停止解析HTML，而去加载、解析和执行JS代码；

S1104，样式计算。主进程基于CSS选择器解析CSS获取每一个节点的最终的计算样式值，或者，在不提供任何CSS的情况下使用默认的样式；

S1105，获取布局。主线程遍历DOM及相关元素的计算样式，构建出包含每个元素的坐标信息及盒子大小的布局树；

S1106，绘制各元素。该步骤确定不同元素的绘制先后顺序，主线程遍历布局树以创建绘制记录，所述绘制记录可理解为一种记录各元素绘制先后顺序的笔记；

S1107，合成帧。Chrome采用了图层的概念进行绘制，该步骤中，主线程遍历布局树以创建层树(layer tree)，层树被创建后，渲染顺序即被确定，主线程会把这些信息通知给合成器线程，合成器线程栅格化每一层将它们分成多个磁贴发送到栅格线程，经栅格线程栅格化后存储在GPU显存中，合成器线程收集磁贴信息以创建合成帧；

S1108，渲染输出。最终输出网页画面。

以上为Chrome浏览器中渲染进程处理网页的主要流程，实际场景中的流程非常复杂，该流程仅代表其中的一种处理方式，用于作为示范以说明本申请的实现原理。可以看出，浏览器对网页的处理包括加载、计算、生成显示几个阶段，本申请的实现原理为：将浏览器对网页的处理逻辑上划分为两个阶段，将网页计算的相关处理划分至第一阶段，将显示部分的处理划分至第二阶段，由此实现网页计算与渲染显示的分离，然后在一个浏览器中执行第一阶段处理，在另一浏览器中执行第二阶段处理，基于此实现一端计算另一端显示的目的，最终获得同屏的效果。

下面以具体的实施例对本发明的技术方案进行详细说明，下面这几个具体的实施例可以相互结合，对于相同或相似的概念，或过程可能在某些实施例中不再赘述。

如图1所示，为本申请实施例提供的一种浏览器同屏方法的流程示意图，包括第一浏览器A、第二浏览器B，步骤如下：

在第一浏览器A中：

S101，执行第一阶段处理，生成与渲染相关的数据；

S102，基于所述与渲染相关的数据采集生成第一同步数据；

然后将第一同步数据发送至第二浏览器B。

在第二浏览器B中：

S103，基于所述第一同步数据在所述第二浏览器执行第二阶段处理。

在以上实现方式中，其中第一阶段处理、第二阶段处理是针对处理过程逻辑上的一个划分，在具体的实现场景中，存在多种划分方式。但基于本申请的实现原理，第一阶段处理至少包含网页的计算处理，第二阶段处理至少包含渲染计算和/或输出画面，此处所提及的网页的计算处理，如构建DOM的相关计算、JS执行的相关计算等，以输出能够用于渲染显示或用于执行渲染显示计算的数据结果为原则，在逻辑上该阶段所包含的范围没有特别的限定。第二阶段处理以第一阶段的输出结果为基础，进行后续的渲染显示计算，如计算布局、执行绘制、合成帧等计算，逻辑上该阶段包含的范围不应有相关网页DOM构建、JS执行等网页计算内容。以上可通俗理解为，第一阶段需要把动态的、可变的事情处理好，第二阶段仅包含处理关于显示的那些事。另外，从逻辑上看，第一阶段、第二阶段合并后，构成常规下浏览器处理网页并显示的全过程，所以将其描述为互补关系。对应于第一阶段、第二阶段不同的划分方式，所生成的与渲染相关的数据也不相同。在本申请，网页计算与渲染输出计算是两个抽象的内容，所述与渲染相关的数据包含了能够执行渲染计算和/或输出画面的全部支持数据，下表中，结合图11所示的示例流程，举例说明第一阶段处理、第二阶段处理、与渲染相关的数据之间的对应关系：

方式1:

第一阶段处理，包括S1101至S1107全部步骤，在该阶段处理完成构建DOM、加载次级的资源、JS的下载与执行、样式计算、获取布局、绘制各元素、合成帧等全部处理，所生成的与渲染相关的数据基本可直接用于显示输出；

第二阶段处理，基于第一阶段处理提供的合成帧数据，输出显示；

与渲染相关的数据，合成帧数据或与其相关的数据。

方式2：

第一阶段处理，包括S1101至S1106步骤，在该阶段处理完成构建DOM、加载次级的资源、JS的下载与执行、样式计算、获取布局、绘制各元素等处理，为第二阶段处理提供了各元素绘制的顺序和方法；

第二阶段处理，基于第一阶段提供的绘制记录数据等，执行合成帧处理并输出显示；

与渲染相关的数据，包括绘制记录数据及与其相关的数据。

方式3:

第一阶段处理，包括S1101至S1105步骤，在该阶段处理完成构建DOM、加载次级的资源、JS的下载与执行、样式计算、获取布局等处理，该方式在第一阶段完成布局树计算；

第二阶段处理，基于第一阶段提供的布局树数据等，执行绘制各元素、合成帧处理等；

与渲染相关的数据，包括布局树数据及与其相关的数据。

方式4:

第一阶段处理，包括S1101至S1104步骤，在该阶段处理完成构建DOM、加载次级的资源、JS的下载与执行、样式计算等处理，该方式在第一阶段完成样式计算；

第二阶段处理，基于第一阶段提供的DOM树、各节点样式数据等，执行布局树计算、绘制各元素、合成帧处理等；

与渲染相关的数据，包括DOM树数据、各节点样式数据等。

方式5:

第一阶段处理，包括S1101至S1103步骤，在该阶段处理完成构建DOM、加载次级的资源、JS的下载与执行等处理，该方式在第一阶段完成DOM树构建；

第二阶段处理，基于第一阶段提供的DOM树数据等，执行样式计算、布局树计算、绘制各元素、合成帧处理等；

与渲染相关的数据，包括DOM树数据等。

需要说明的是，以上阶段划分方式仅用于示例性说明，在实际实施中，甚至还存在一些将一个步骤中的部分处理放在第一阶段执行，另一部分放在第二阶段执行的情况。可选的，在不影响整体逻辑运行的情况下，还包括将一个步骤分别在两个阶段中执行的情况，例如，假设第二阶段的处理需使用加载的图片资源执行渲染相关计算，则将S1102步骤在第二阶段中同时执行。可选的，在所述第二浏览器加载部分资源数据，例如次级的资源中的图片，该部分资源在所述第一阶段处理中不会发生改变，但属于所述与渲染相关的数据或所述与渲染相关的数据所引用的数据，在所述第二浏览器直接加载该部分资源数据，以降低所述第一同步数据的传输量，提升同步效率。

通过以上实现方式，通过将网页计算处理、渲染输出处理相分离，并在浏览器中分布执行的原理，实现浏览器间的同屏效果。其有益效果是，可确保网页程序的计算逻辑不受干扰，一个计算对应于多个显示，保证了同屏过程内容显示的准确性。

在一种可能的实现方式中，如图2所示，第一浏览器A向第二浏览器B的同屏过程中，步骤S203基于所述与渲染相关的数据采集生成第一同步数据，向第二浏览器B发送之后，还包括，在第一浏览器A中执行步骤S204，即执行第二阶段处理。在该种实现方式中，第一浏览器A执行第二阶段处理，即将网页计算产生的内容在第一浏览器A中进行渲染计算并输出，在第一浏览器A中完成完整的网页处理流程，是两个浏览器之间同屏的一个必要步骤。

在一种可能的实现方式中，如图2所示，第一浏览器A向第二浏览器B的同屏过程中，在第二浏览器B执行S205基于所述第一同步数据在所述第二浏览器执行第二阶段处理之前，还包括，在第二浏览器B中执行步骤S202，屏蔽对目标网页执行所述第一阶段处理。在该种实现方式中，屏蔽第二浏览器B中的网页计算处理，确保第二浏览器B基于第一浏览器的网页计算结果执行渲染计算和输出，同时避免因在第二浏览器B中进行网页计算对渲染和输出产生的干扰。需要说明的是，该步骤中的屏蔽处理还包括选择性屏蔽的情况，如不屏蔽加载次级的资源中的图片等。

如图2所示的实现方式，所述第二浏览器屏蔽与执行渲染相关的其他处理，或使第二浏览器不执行除渲染、浏览器同屏外的其他操作。所述第一浏览器生成所述与渲染相关的数据后，在所述第一浏览器中执行后续的渲染显示操作，所述渲染显示操作在所述第一浏览器中处理与所述渲染相关的数据并最终显示画面；所述第二浏览器接收所述与渲染相关的数据后，在所述第二浏览器中基于所述与渲染相关的数据，在所述第二浏览器中执行对应于所述渲染显示操作的处理步骤。

在一种可能的实现方式中，如图3所示，在第一浏览器A的S301A建立通信连接后，还包括S302A生成同屏交流部件步骤，在第二浏览器B的S301B建立通信连接后，还包括S302B生成同屏交流部件步骤。以上步骤中的通信连接指浏览器之间建立的关于同屏通信的连接。在浏览器中生成同屏交流部件，所述同屏交流部件配置为采集或接收控制指令、状态与信息等；所述同屏交流部件还配置为发送控制指令、状态与信息等；所述同屏交流部件还配置为执行所述控制指令，实现同屏交流过程的控制；所述同屏交流部件还配置为显示所述状态与信息；所述同屏交流部件还配置为生成同屏交流的辅助工具，提升同屏交流功能；所述同屏交流部件还配置为接收设置参数，对相关同屏交流的参数进行设置等。

以上实现方式中，所述同屏交流部件包括但不限于同屏控制部件、权限控制部件、声音控制部件、麦克风控制部件、涂鸦部件、涂鸦控制部件、视频显示部件、视频控制部件、同屏状态显示部件、同屏信息显示部件、录制部件、设置部件等，以下示例性说明所述同屏交流部件功能：所述同屏控制部件用于启动、暂停、继续、退出等同屏控制；所述权限控制部件用于接收控制权申请、控制权交回等指令并处理或发送，接收控制权状态信息并显示；所述声音控制部件用于接收声音开关控制指令，执行声音开关功能控制；所述麦克风控制部件用于接收麦克风开启或关闭指令，执行麦克风开关控制以及音频通信开关控制；所述涂鸦控制部件用于接收涂鸦开启或关闭指令，在接收到涂鸦开启后创建或显示涂鸦画布部件，在接收到涂鸦关闭指令后关闭或隐藏涂鸦画布部件，还包括接收用户对涂鸦的相关设置信息，如画笔、形状、橡皮、颜色设置等，对涂鸦工具进行设置；所述视频显示部件，用于接收本端采集的视频数据或其它同屏端发送的视频数据并显示；所述视频控制部件，用于接收视频控制指令并处理或发送，如开启视频通信指令、关闭视频通信指令、暂停视频通信指令等；所述同屏状态显示部件用于显示同屏状态信息，如当前的同屏工作状态、控制权状态、涂鸦工作状态等；所述同屏信息显示部件用于接收关于本次同屏业务的信息并显示，如参与同屏人数、用户等；所述录制部件用于记录生成同屏过程数据记录；所述设置部件用于对相关同屏的参数进行设置，例如，其中的同屏数据安全设置用于设置数据安全项目、级别，过滤同屏过程中传输的数据，执行隐私保护等。

可选的，根据浏览器在同屏过程中所承担的角色，生成相应的同屏交流部件，例如，第一浏览器A有控制其他浏览器音频通信的需求，在其同屏交流部件中增加“全部静音”部件，又如，第一浏览器A有对控制权的管理需求，在其同屏交流部件中增加“控制权管理部件”，用于分配、撤销某一浏览器的控制权。

可选的，以上所述同屏交流部件可在浏览器的UI层(浏览器本身的UI，如地址栏、书签栏均属于浏览器UI)生成，如在Chrome中由Browser process统一控制。可选的，所采用的同屏交流部件可采用多种形式，如图标、按钮、弹出菜单等。

可选的，在浏览器中构建独立的同屏管理进程，所述同屏管理进程或由Browserprocess协调工作，由所述同屏管理进程生成所述同屏交流部件并处理其相关事件。

可选的，所述同屏交流部件在网页内容中生成。可选的，在网页内容中生成所述同屏交流部件，由renderer process(渲染进程)生成与处理。需要注意的是，该实现方式中，所述同屏交流部件不用于生成所述与渲染相关的数据，或者可以理解为，在所述第一浏览器生成所述与渲染相关的数据或第一同步数据中，不包含所述同屏交流部件相关的数据内容。

通过以上实现方式，生成所述同屏交流部件为浏览器同屏交流提供扩展功能支持，以实现同屏交流过程中的人机交互控制。

在一种可能的实施方式中，结合以上图1所示的实施方式，步骤S102基于所述与渲染相关的数据采集生成第一同步数据发送，可选的，在所述第一浏览器中监听浏览器处理所述与渲染相关的数据的处理行为，包括生成与渲染相关的数据的行为、处理与渲染相关的数据等，如构建DOM、修改DOM、设置样式、计算布局树、生成绘制记录、修改绘制记录等，将该类行为对应的转换为相应的执行指令，所述执行指令中或包括用于支持该指令执行的支持数据，采集所述执行指令、所述支持数据等生成第一同步数据发送；在所述第二浏览器中接收所述第一同步数据，并解析其包含的所述执行指令、所述支持数据，在所述第二浏览器中，基于所述执行数据，执行所述执行指令。其中，所述执行指令在所述第二浏览器执行，获得与所述第一浏览器处理并生成所述与渲染相关的数据相同的处理效果。以上，所述执行指令例如：设置样式指令，所述支持数据例如：元素ID、样式值等。该实施方式所提供的方法采用由执行指令取代与渲染相关的数据的方式传输，所述第二浏览器在执行所述执行指令后可获得相同的与渲染相关的数据，因此等价于传输所述与渲染相关的数据，但具有传输效率高的优点。

在一种可能的实施方式中，在同屏交流过程中对各参与同屏的浏览器的操作权进行分配，使同一时刻仅有一个浏览器拥有操作权，根据一个浏览器是否占有操作权，将该浏览器的控制状态分为：空闲(本浏览器及其它浏览器均未占有操作权)、主控(本浏览器占有操作权)、受控(其它浏览器占有操作权)等状态，包括：

在其中一浏览器监听到网页中发生用户操作后，判断该浏览器的控制状态，根据所述控制状态执行以下判断并操作：

A.当为空闲状态时，发送操作权申请并经许可后获得所述操作权，并设置本浏览器的控制状态为主控状态，执行所述用户操作，同时启动定时器开始计时操作，并通知其他浏览器将控制状态切换为受控状态；当操作权申请被驳回后，拦截所述用户操作；

B.当为受控状态时，拦截用户操作；

C.当为主控状态时，执行用户操作，并刷新所述定时器，重新开始计时。

在启动所述定时器开始计时之后，还包括：

A在预设的时间阈值之内，监听到在所述浏览器内网页上的用户操作后，刷新所述定时器重新开始计时；

B所述定时器计时达到预设的时间阈值，则设置本浏览器的控制状态为空闲状态，并发送操作权交回通知，通知其他浏览器将控制状态切换为空闲状态。

以上实现方式实现了同屏交流过程中各浏览器操作权限的自动分配。

在一种可能的实现方式中，如图3所示，在第一浏览器A的S301A建立通信连接后，还包括S303A建立音频和/或视频通信步骤，在第二浏览器B的S301B建立通信连接后，还包括S303B建立音频和/或视频通信步骤。其中，S303A、S303B包括，建立音频和/或视频通信连接，采集音频和/或视频数据并发送，接收音频和/或视频数据并播放等。可选的，在浏览器中构建独立的音视频通信进程，所述音视频通信进程由Browser process或所述同屏管理进程协调工作，实现同屏过程中的音视频通信及音视频通信控制。可选的，在所述同屏管理进程中构建独立的音视频通信线程，所述音视频通信线程由所述同屏管理进程协调工作，实现同屏过程中的音视频通信及音视频通信控制。

通过以上实现方式，为浏览器间同屏提供音视频通信支持，使在同屏交流的同时进行音视频交流，进一步提升交流的效率与质量。

在具体的实现场景中，在所述第一浏览器与所述第二浏览器建立通信连接之前，还包括，所述第一浏览器向所述第二浏览器发送同屏连接请求，所述第二浏览器处理所述同屏连接请求并建立所述通信连接，或者，所述第二浏览器向所述第一浏览器发送同屏连接请求，所述第一浏览器处理所述同屏连接请求并建立所述通信连接。例如通过访问带参数的网址、浏览器UI操作发起所述同屏连接请求等。

在一种可能的实现方式中，如图4所示，在第一浏览器A的S401A建立通信连接后，还包括S402A在UI层创建用于涂鸦的画布部件，在第二浏览器B的S401B建立通信连接后，还包括S402B在UI层创建用于涂鸦的画布部件，在以上S402A、S402B为两者创建用于涂鸦的部件后，在同屏的一侧采集涂鸦绘制数据发送，在同屏的另一侧接收涂鸦绘制数据并执行绘制，获得同步涂鸦的效果，例如，在第一浏览器A执行S403A，基于所述画布部件采集绘制指令、绘制数据生成第二同步数据，然后执行S404A，发送第二同步数据，在第二浏览器执行S403B，接收所述第二同步数据，然后执行S404B，基于绘制指令与绘制数据，在画布部件上执行绘制指令，由此在所述第二浏览器B中获得与所述第一浏览器A相同的涂鸦绘制效果。另外，图中S405B、S406B、S405A、S406A与以上步骤类似，实现所述第二浏览器B至所述第一浏览器A的涂鸦绘制同步，在此不再赘述。

以上实现方式中，所述用于涂鸦的画布部件配置为接收用户触发的涂鸦绘制事件，执行涂鸦绘制；还配置为基于其上执行的绘制行为，生成绘制指令与绘制数据；还配置为基于所接收的绘制指令与绘制数据，基于所述绘制数据执行所述绘制指令。

可选的，在浏览器的UI层生成所述用于涂鸦的画布部件。可选的，在网页内容中生成所述用于涂鸦的画布部件。可选的，在网页内容中生成所述用于涂鸦的画布部件，由renderer process(渲染进程)或其管理的线程生成与处理，该实现方式中，可配置所述用于涂鸦的画布部件生成或不生成所述与渲染相关的数据，当选择生成时，不需要针对所述用于涂鸦的画布部件进行绘制指令、绘制数据的采集与执行绘制等处理。可选的，在所述同屏管理进程中构建独立的涂鸦处理线程，所述涂鸦处理线程由所述同屏管理进程协调工作，实现同屏过程中的涂鸦绘制及同步涂鸦控制。

通过以上实现方式，实现参与同屏的浏览器之间的涂鸦交互，使用户在同屏交流的同时可对交流内容圈点标记，增强交流功能。

一种可能的实现方式中，如图5所示，在第一浏览器A向第二浏览器B同屏过程中，在所述第一浏览器A生成所述与渲染相关的数据，在所述第二浏览器B最终输出显示同屏画面的同时，在部分的实施场景中，有在所述第二浏览器B中执行控制的需求，具体实现步骤如：在第二浏览器B中，执行步骤S502B监听用户操作事件，当监听到用户操作事件时，拦截所述用户操作事件，并基于所述用户操作事件采集数据生成第三同步数据，然后，执行S503B发送第三同步数据；在第一浏览器A中，S502A接收所述第三同步数据，执行S503A解析第三同步数据中包含的操作事件类型、所述操作数据，基于其执行对应的操作，然后，执行S504A基于与渲染相关的数据采集生成第一同步数据，S505A发送第一同步数据；第二浏览器B接收所述第一同步数据并执行第二阶段处理。

可选的，通过浏览器采集所述用户操作事件，并基于所述用户操作事件采集数据生成第三同步数据发送，例如在Chrome中通过Browser process、UI process等采集用户操作事件。可选的，通过浏览器中的网页，采集所述用户操作事件，并基于所述用户操作事件采集数据生成第三同步数据发送，例如在网页内部建立事件监听。

以上实现方式中，在被同屏的第二浏览器B中采集用户操作，且在所述第二浏览器B中拦截该操作，即不在所述第二浏览器B中执行，而发送至第一浏览器A实际执行。例如，所述第二浏览器B的用户在网页表单中填写了某数据，则通过网页或浏览器本身基于用户执行的操作采集数据，操作事件的类型为“输入字符串”，操作数据为输入的字符串内容、接收输入的控件标识等，又如，所述第二浏览器B的用户在网页中点击某按钮，所采集的操作事件类型为“点击”，操作数据为按钮标识等。由此可见，所述第一浏览器A为用户操作的实际执行环境，确保了第一阶段处理限定在第一浏览器A中完成，最终，通过本申请的实现步骤，将最终的执行效果同步至所述第二浏览器B显示。该实现方式可产生的有益效果是，从逻辑上保证了同屏结果的准确性，同时为被同屏的浏览器端提供了操作权限，增强了同屏交流过程中的交互控制功能。

本申请以上实施例实现的第一浏览器A向第二浏览器B同屏，是一种以所述第一浏览器A作为基础采集所述第一同步数据，第二浏览器B接收所述第一同步数据并实现同步显示的过程，即第一浏览器A为同屏的发送方(或主同屏方)，第二浏览器B为同屏的接收方(或被同屏方)。但在同屏交流过程中，双方均可能拥有对网页的操作权限，我们将拥有操作权限的一方定义为控制方，将无操作权限的一方定义为受控方，如以上实施例，所述第二浏览器B为被同屏方和主控方。

一种可能的实现方式中，如图6所示，在控制方浏览器A中，执行S601A，监听用户操作事件，当确定所监听到的用户操作事件的类型为指定的操作类型时，基于该用户操作事件采集数据并生成第四同步数据，然后执行S602A，发送第四同步数据至受控方浏览器B，同时，在控制方浏览器A中执行S603A，执行所监听到的用户操作事件；在受控方浏览器B中，S601B接收所述第四同步数据后，执行S602B，解析第四同步数据中包含的操作事件类型、所述操作数据，基于其执行对应的操作。

在以上实现方式中，S601A中监听到用户操作事件后仅对指定的操作类型事件进行处理，所述指定的操作类型事件例如wheel,、mousewheel、mousemove、pointermove、touchmove等。根据本申请的实现原理，所述第一浏览器生成所述与渲染相关的数据向所述第二浏览器发送，例如所述与渲染相关的数据为合成帧图片数据，当以上mousewheel事件发生时，在短时间内会产生大量的合成帧图片数据，导致所述第一同步数据过大，极可能造成网络堵塞。针对以上问题，我们可通过以下方式处理，可选的，在所述第二浏览器接收到所述第一同步数据后，解析其包含的与渲染相关的数据，所述与渲染相关的数据中还包括该类数据的性质、产生机制等，在所述第二浏览器对该类数据进行管理与计算，例如，在所述第二浏览器中管理网页整体页面(可能高于浏览器视口高度)的合成帧数据，当发生mousewheel时，根据S601A中采集的数据(此处事件类型为“鼠标滚动”，操作数据为滚动位移等)，在所述第二浏览器中基于以存放的网页整体页面的合成帧数据执行S602B，获得与所述第一浏览器相同的页面滚动效果。

结合以上实施例，可选的，通过浏览器程序采集所述用户操作事件，并基于所述用户操作事件采集数据生成第四同步数据发送。可选的，通过浏览器中的网页，采集所述用户操作事件，并基于所述用户操作事件采集数据生成第四同步数据发送。

以上实现方式针对指定的操作类型事件进行处理，在同屏过程中在各浏览器中分别执行该类事件，特别对于一些连续性事件，在同屏过程中处理尤为高效。

在一种可能的实现方式中，在浏览器中构建独立的同屏管理进程，所述同屏管理进程或由Browser process协调工作，由所述同屏管理进程处理和管理相关同屏的任务，如生成同屏连接请求、处理同屏连接请求、生成所述同屏交流部件并处理其相关事件、建立音视频通信、生成各种同步数据、执行同屏过程中的数据通信、管理涂鸦、用户操作事件同步处理等。可选的，为以上相关同屏等任务创建用于执行某方面任务处理的线程，所述线程由所述同屏管理进程或Browser process协调工作。

在一种可能的实现方式中，在renderer process中创建独立的同屏数据管理线程，所述同屏数据管理线程或由主线程Main thread协调。在所述第一浏览器中，所述同屏数据管理线程配置为用于生成所述与渲染相关的数据；在所述第二浏览器中，所述同屏数据管理线程配置为用于接收和处理所述与渲染相关的数据，由主线程协调其与其它线程完成渲染与输出处理。

在一种可能的实现方式中，在所述第一浏览器启动监听，当监听到所述与渲染相关的数据生成或改变时，基于所述与渲染相关的数据采集生成第一同步数据并向所述第二浏览器发送。可选的，基于全部所述与渲染相关的数据采集生成所述第一同步数据，或者，基于所述与渲染相关的数据的增量部分数据采集生成所述第一同步数据。

在一种可能的实现方式中，在所述第一浏览器基于所述与渲染相关的数据采集生成所述第一同步数据的缓存数据，基于所述缓存数据向所述第二浏览器发送同步数据。

在一种可能的实现方式中，在所述第一浏览器、所述第二浏览器之间建立同步标识，所述同步标识至少包括待同步、已同步两个状态，所述第一浏览器生成新的所述第一同步数据后，将所述同步标识设置为待同步状态，所述第二浏览器接收所述第一同步数据并完成所述第二阶段处理后，将所述同步标识设置为已同步状态，还包括，设置所述同步状态同时向对方发送状态改变通知。可选的，在待同步状态下暂停所述第一浏览器所述第一阶段执行。可选的，在所述第一浏览器接收到所述第二浏览器的已同步通知后，继续所述第一浏览器所述第一阶段执行。优选的，在所述第一浏览器中的所述第一同步数据的缓存数据量达到预设的最大值时，暂停所述第一浏览器中对目标网页执行所述第一阶段处理，等待所述第一同步数据缓存数据量小于预设的最大值时，继续执行所述第一阶段处理。以上建立同步标识、为第一同步数据在所述第一浏览器中建立缓存机制，所产生的有益效果是，防止所述第一浏览器产生的第一同步数据量过大或过快，因网络传输速率限制而导致的两侧不同步的情形。

在一种可能的实现方式中，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，在所述第二浏览器采集运行环境参数数据并向所述第一浏览器发送；所述第一浏览器接收所述运行环境参数数据，并基于所接收的所述运行环境参数数据设置所述第一浏览器运行环境参数。其中，所述运行环境参数数据包括设备参数数据、浏览器参数数据中一种或多种。

在一种可能的实现方式中，在所述第一浏览器生成或发送所述与渲染相关的数据，还包括对所述与渲染相关的数据进行过滤处理，例如过滤浏览器UI生成的与渲染相关的数据、以上所述同屏交流部件产生的与渲染相关的数据、一些相关用户隐私的部件所对应的与渲染相关的数据等。

基于相同的发明构思，参考图9所示，本申请还提供一种包括同屏功能的浏览器，所述浏览器包括同屏控制模块01、第一处理模块02、第二处理模块03，所述浏览器的同屏工作模式包括第一工作模式、第二工作模式两种，其中：

所述第一工作模式，所述浏览器在所述第一工作模式下，为第一同屏数据的发送方；

所述第二工作模式，所述浏览器在所述第二工作模式下，为所述第一同屏数据的接收方；

所述第一处理模块02，用于在所述第一工作模式下对目标网页执行第一阶段处理，生成与渲染相关的数据，并基于所述与渲染相关的数据采集生成第一同步数据发送；还用于在所述第二工作模式下屏蔽执行第一阶段处理操作；

所述第二处理模块03，用于在所述第一工作模式下对所述目标网页执行第二阶段处理；还用于在所述第二工作模式下，接收所述第一同步数据，基于所述第一同步数据执行第二阶段处理；

所述同屏控制模块01，用于设置所述浏览器的同屏工作模式；还用于执行同步过程控制，包括基于所述同屏工作模式调用所述第一处理模块02执行数据采集、调用所述第二处理模块03执行对应的同步处理；还用于在生成同步数据或执行同步处理后更新同步状态；还用于发送与接收同步状态信息。

可选的，所述浏览器在所述第二工作模式下，除渲染外的其他功能均处于不可用状态，即所述浏览器在所述第二工作模式下不执行除渲染外的其他操作。

在一种可能的实施方式中，所述浏览器还包括音视频通信模块04、涂鸦模块05、操作事件处理模块06，其中：

所述音视频通信模块04，用于在同屏工作模式下，建立与其它侧参与同屏的浏览器之间的音频和/或视频通信；

所述涂鸦模块05，用于在所述浏览器的UI层或所述浏览器的网页内创建用于涂鸦的画布部件；还用于基于所述画布部件采集绘制指令、绘制数据生成第二同步数据发送，和/或，根据接收的所述第二同步数据，基于其包含的绘制指令与绘制数据，在所述画布部件上基于所述绘制数据执行所述绘制指令；

所述操作事件处理模块06，用于在所述第二工作模式下监听所述浏览器中发生的用户操作事件，并采集操作事件数据向本同屏连接的所述第一工作模式的浏览器发送；

所述操作事件处理模块06，还用于在监听到用户操作事件后，当确定所述用户操作事件的类型为指定的操作类型时，采集操作事件数据向其它侧参与同屏的浏览器发送；

所述操作事件处理模块06，还用于接收其它侧参与同屏的浏览器发送的操作事件数据，基于所述操作事件数据，在本侧执行对应的操作；

所述同屏控制模块01，还用于在所述浏览器UI层或网页内生成同屏交流部件，还用于设置所述同屏交流部件，还用于接收所述同屏交流部件的触发事件执行对应的控制指令。

在一种可能的实现方式中，所述浏览器还包括录制模块，所述录制模块用于记录网页加载数据，以及记录所述第一同步数据、所述第二同步数据、所述第三同步数据、所述第四同步数据中的一种或多种以及对应的发生时间信息，生成同屏过程数据记录。

在一种可能的实现方式中，所述浏览器的工作模式包括正常工作模式、同屏工作模式，所述同屏工作模式包括第一工作模式、第二工作模式两种。在浏览器建立同屏连接后，由正常工作模式切换为同屏工作模式，在断开同屏连接后，由同屏工作模式切换为正常工作模式。

本申请实施例还提供另一种浏览器同屏的方法，所述方法用于实现第一浏览器向第二浏览器同屏显示与操作，所述方法包括：

建立所述第一浏览器与所述第二浏览器之间的通信连接；

在所述第一浏览器对目标网页执行处理，在所述处理过程中，基于程序运行中通过获取数据方法A获取到数据B的获取数据的行为，采集对应的所述获取数据方法A与数据B生成第五同步数据，并将所述第五同步数据向所述第二浏览器发送；

所述第二浏览器接收所述第一浏览器发送的所述第五同步数据，解析其包含的数据内容，在所述第二浏览器对目标网页执行处理，在所述处理过程中，确定所述运行程序在执行所述获取数据方法A获取数据时，拦截所述获取数据方法A，并基于所述获取数据方法A，在所述第五同步数据中查找对应的所述数据B，将所述数据B作为所述获取数据方法A的返回值；

还包括，监听所述控制方的用户操作事件，基于所述用户操作事件采集操作事件数据并向所述受控方发送，所述用户操作事件数据包括操作事件类型、操作数据中的一种或者多种；所述受控方接收所述控制方发送的所述操作事件数据，基于所述操作数据，在所述受控方执行所述操作事件类型包含的操作。

以下结合图7说明以上实现方法，在第一浏览器A执行S701A，建立通信连接之后，S704A，监听用户操作事件，基于用户操作事件采集操作事件数据，S705A，对目标网页执行处理，基于运行程序通过获取数据方法A获取到数据B的获取数据的行为，采集对应的所述获取数据方法A与数据B生成第五同步数据，通过执行S706A，发送用户操作事件数据，执行S707A，发送第五同步数据；在第二浏览器B中，S704B接收用户操作事件数据，S705B接收所述第五同步数据，然后执行S706B，基于所述操作数据，执行所述操作事件类型包含的操作，S707B，对目标网页执行处理，在所述处理过程中，确定所述运行程序在执行所述获取数据方法A获取数据时，拦截获取数据方法A，并根据获取数据方法A，在第五同步数据中查找对应的数据B，使用数据B为获取数据方法A赋值。其中，S704A与S705A、S706A与S707A、S704B与S705B、S706B与S707B的执行顺序没有特别限定，该图仅代表一种执行情形，用于说明该实现原理。

分析以上实施方式的实现原理，将浏览器对网页的处理过程划分为获取数据、网页计算、输出三个部分，其中，所述获取数据也即所述通过获取数据方法A获取到数据B的获取数据的行为，包括但不限于通过网络请求获取数据以及获取本地文件、本地存储、本地数据库、缓存、cookie、时钟等数据，所述获取数据作为网页计算的数据输入，另外同步用户操作事件两者具有相同的用户输入，以上实施例中，网页程序在两侧浏览器中同等存放，即为相同的网页程序，在相同的程序、相同的数据输入、相同的用户操作下，必然会产生相同的计算结果，所述计算结果也即输出部分，所述输出也即本申请中的所述用于渲染的数据或由所述用于渲染的数据最终生成的渲染显示结果数据。以上实施例采集对应的所述获取数据方法A与数据B生成第五同步数据，所述第五数据中包含：方法A、数据B，两者具有对应关系，例如方法A为网络请求的内容，包括请求行、消息报头、请求正文等，数据B为请求返回的数据，对应的，在第二浏览器对网页的处理过程中，当监听到发送网络请求方法A时，拦截该请求，根据方法A查找获得数据B返回，作为网络请求A的返回值。

可选的，在建立所述第一浏览器与所述第二浏览器之间的通信连接之后，在所述第一浏览器基于目标网页的运行环境采集生成运行环境数据，将所述运行环境数据向所述第二浏览器发送，所述运行环境数据包括但不限于本地数据库、本地存储、缓存数据、时钟、cookie等，在所述目标网页运行过程中，监听发生的网络请求并采集生成网络请求数据，包括发送的网络请求信息以及返回数据(两者对应存储)，并将所述网络请求数据向所述第二浏览器发送；在所述第二浏览器接收到所述运行环境数据后，基于其设置本地目标网页的运行环境，当在目标网页运行过程中，监听到网络请求时，在所述网络请求数据中查找获取返回数据以作为请求结果赋值，还包括，监听所述控制方的用户操作事件，基于所述用户操作事件采集操作事件数据并向所述受控方发送，受控方接收所述操作事件数据，基于所述操作数据，在所述受控方执行所述操作事件类型包含的操作。在该种可选的实现方式中，在初始数据环境、运行环境相同的情况下，执行相同的用户操作，当遇到对外的交互如网络请求时，使对外获取数据保持一致，由此获得相同的运行结果，最终获得同屏的效果。

可选的，以上实现方式中，在所述第一浏览器对目标网页执行处理过程中，对指定类型的获取数据方法A获取到数据B的获取数据的行为进行采集，采集对应的所述获取数据方法A与数据B生成第五同步数据发送。

需要说明的是，本申请中的生成同屏交流部件、建立音视频通信、创建涂鸦部件执行同步涂鸦、为被同屏方实现主控、处理特殊用户操作事件(如连续性事件)、构建独立的同屏管理进程、相关同屏等任务创建用于执行某方面任务处理的线程、缓存数据处理方式、同步状态控制、运行环境参数同步与计算、同步数据过滤等方法，在以上实施例中同样适用，在此不再赘述。

在一种可能的实现方式中，创建独立的同屏数据管理线程。在所述第一浏览器中，所述同屏数据管理线程配置为基于在程序运行中通过获取数据方法A获取到数据B的获取数据的行为进行采集生成第五同步数据并发送；在所述第二浏览器中，所述同屏数据管理线程配置为接收所述第五同步数据，并在对目标网页执行处理过程中，在确定所述运行程序在执行所述获取数据方法A获取数据时，拦截方法A并基于其在所述第五同步数据中获取对应的数据B为所述获取数据方法A赋值。

以上实现方式实现了另一种同屏的方法，通过同步对外获取的数据、用户操作、运行环境数据等方式，在两侧的浏览器中执行相同的网页计算实现同屏，在一些特殊的实施场景中，具有传输量小，速度快的优势。

基于以上实施例的发明构思，参考图12所示，本申请还提供一种包括同屏功能的浏览器，所述浏览器包括同屏控制模块1201、获取数据的行为监听与采集模块1202、获取数据的行为监听与处理模块1203、用户操作事件采集与同步执行模块1204，所述浏览器的同屏工作模式包括第一工作模式、第二工作模式两种，其中：

所述第一工作模式，所述浏览器在所述第一工作模式下，为第五同屏数据的发送方；

所述第二工作模式，所述浏览器在所述第二工作模式下，为所述第五同屏数据的接收方；

所述获取数据的行为监听与采集模块1202，用于在所述第一工作模式下浏览器对目标网页执行处理过程中，基于在运行程序中的通过获取数据方法A获取到数据B的获取数据的行为，采集对应的所述获取数据方法A与数据B生成第五同步数据并向所述第二浏览器发送；

所述获取数据的行为监听与处理模块1203，用于在所述第二工作模式下接收所述第五同步数据并解析，在对目标网页执行处理过程中，当确定所述运行程序在执行所述获取数据方法A获取数据时，拦截所述获取数据方法A，并基于所述获取数据方法A，在所述第五同步数据中查找对应的所述数据B，将所述数据B设置为所述获取数据方法A的返回值；

所述用户操作事件采集与同步执行模块1204，用于在所述浏览器为控制方时监听用户操作事件，基于所述用户操作事件采集操作事件数据并发送；还用于在所述浏览器为受控方时接收操作事件数据，基于所述操作数据执行所述操作事件类型包含的操作；

所述同屏控制模块1201，用于设置所述浏览器的同屏工作模式；还用于执行同步过程控制，包括基于所述同屏工作模式调用获取数据的行为监听与采集模块1202、获取数据的行为监听与处理模块1203执行同步处理；还用于在生成同步数据或执行同步处理后更新同步状态；还用于发送与接收同步状态信息。

所述同屏控制模块1201，还用于在所述浏览器UI层或网页内生成同屏交流部件，还用于设置所述同屏交流部件，还用于接收所述同屏交流部件的触发事件执行对应的控制指令。

在一种可能的实现方式中，所述浏览器还包括录制模块，所述录制模块用于记录网页加载数据，以及记录所述第五同步数据、所述操作事件数据的一种或多种以及对应的发生时间信息，生成同屏过程数据记录。

本申请实施例还提供另一种浏览器同屏的方法，所述方法用于实现第一浏览器向第二浏览器同屏显示与操作，所述方法包括：

建立所述第一浏览器与所述第二浏览器之间的通信连接；

在所述第二浏览器中屏蔽JS执行；

在所述第一浏览器中执行JS，当确认所述JS执行的行为是对用于渲染输出的内容执行改变或更新的执行行为时，将所述输出执行行为转化为执行指令，将所述执行指令生成为第六同步数据并向所述第二浏览器发送；

所述第二浏览器接收所述第一浏览器发送的所述第六同步数据，解析其包含的执行指令并在所述第二浏览器中执行；

还包括，监听所述控制方的用户操作事件，基于所述用户操作事件采集操作事件数据并向所述受控方发送，所述用户操作事件数据包括操作事件类型、操作数据中的一种或者多种；所述受控方接收所述控制方发送的所述操作事件数据，基于所述操作数据，在所述受控方执行所述操作事件类型包含的操作。

以下结合图8说明以上实现方法，在第一浏览器A，S801A建立通信连接之后，S804A，监听用户操作事件，基于用户操作事件采集操作事件数据，S805A，发送用户操作事件数据；在第二浏览器B，S801B建立通信连接之后，执行S804B屏蔽JS执行，经S805B接收用户操作事件数据，S806B基于所述操作数据执行所述操作事件类型包含的操作；当在第一浏览器A中监测到JS执行时，S806A执行JS，当确认某JS执行行为是对用于渲染输出的内容执行改变或更新的执行行为时，将该执行行为转化为执行指令，基于该执行指令生成第六同步数据，S807A发送第六同步数据；在第二浏览器B中，S807B接收所述第六同步数据，S808B解析所述第六同步数据包含的执行指令并执行。其中，图8所示的部分步骤的执行顺序没有特别限定，甚至可以省略，改图流程仅代表一种执行情形，用于说明该实现原理。

可选的，在所述第一浏览器与所述第二浏览器首先同步加载目标网页，在该加载过程中限制没有JS执行的部分加载内容，当第一个JS开始执行时，S806A、S807A、S807B、S808B步骤。可选的，在所述第一浏览器与所述第二浏览器建立通信连接之后，首先同步网页内容，如网页标签内容、网页DOM等，然后按照图8中的相关步骤执行。

可选的，在所述第一浏览器中因非JS的执行行为引起输出内容的更新或改变时，采集该行为并将其同样转化为执行指令，将所述执行指令向所述第二浏览器发送；在所述第二浏览器，屏蔽可引起输出内容更新或改变的非JS的执行行为，接收所述第一浏览器发送的所述执行指令，在所述第二浏览器中执行。

可选的，在所述第二浏览器中，仅存放所述输出内容。

可选的，在所述第二浏览器与所述第一浏览器中网页的基础的输出内容同步后，拦截所述第二浏览器中网页的执行事件，仅接收所述第一浏览器发送的所述执行指令并执行。

可选的，所述执行指令中，还包括与所述执行指令相关的数据内容。

根据网页在浏览器中处理的过程，包括加载、计算与生成输出内容并显示的过程，在网页资源加载完成后，计算生成基础的输出内容，如DOM树、各元素的样式等，在网页生成与交互过程中，通过JS的执行对输出内容进行更新或改变，完成网页显示与交互的过程。根据以上过程，说明以上实施方式的实现原理，在两个网页加载了相同的网页资源的基础上，生成相同的基础的输出内容，如网页标签内容、DOM树、各元素样式等，在此基础上，当JS执行时，在所述第一浏览器中实际执行，根据JS执行的性质，当其改变或更新输出内容时，采集该类行为转换为执行指令发送，然后，在所述第二浏览器中，不实际执行JS，通过接收并执行所述执行指令，使所述输出内容对应的更新和改变，最终使所述输出内容保持相同，获得一致的同屏效果。例如，在第一浏览器中的JS对某div标签的样式进行了改变，将该行为转换为修改div样式指令发送，而在第二浏览器中执行该指令，获得相同的改变div标签样式的执行结果。可以看出，该实现方式相当于各个同屏的浏览器中仅有一个浏览器在执行JS，但是最终改变网页有关显示内容的结果，会同时在所有浏览器中发生。需要说明的是，所述输出内容也可理解为一种与渲染相关的数据内容，其可同时包括几种类型的数据，本申请不对其具体限定，每种类型的数据均有一种执行指令与之对应。

分析以上实现方式，为一种浏览器JS引擎对用于渲染输出的内容执行改变或更新的执行行为，在一种可能的实现场景中，类同于以上针对JS执行的处理方式，其它的如CSS执行等同样会对用于渲染输出的内容执行改变或更新，针对该类执行行为，采用类同于以上的对JS执行的相关处理方式，采集对应的执行指令，并传输至另一侧浏览器执行的方式进行处理，详细步骤与以上实施例实现方式相似，在此不再赘述。

需要说明的是，本申请中的生成同屏交流部件、建立音视频通信、创建涂鸦部件执行同步涂鸦、为被同屏方实现主控、处理特殊用户操作事件(如连续性事件)、构建独立的同屏管理进程、相关同屏等任务创建用于执行某方面任务处理的线程、缓存数据处理方式、同步状态控制、运行环境参数同步与计算、同步数据过滤等方法，在以上实施例中同样适用，在此不再赘述。

以上实现方式实现了另一种同屏的方法，通过在一个浏览器中执行JS，其它浏览器执行对应的执行指令的方式，在两侧的浏览器中执行相同的网页计算实现同屏。该实现方式同时应用了同屏两侧浏览器计算输出内容并渲染画面的能力，从实质上看，本实现方法相较于本申请图1所示的实施例，后者传输的是与渲染相关的数据，而前者传输的是一种加工生成所述与渲染相关的数据的方法。另外，本申请还有利于在同屏过程中对数据进行保护，例如，一侧浏览器的用户执行登录，输入用户名、密码，发送网络请求验证用户并接收验证结果信息，其中，该侧为网页浏览与操作的实际运行环境，用户输入操作，JS运行等均会生成或改变与渲染相关的内容；在另一侧浏览器，仅接收所述执行指令对所述与渲染相关的内容进行生成和改变，而不涉及详细的输入密码数据，发送网络请求等执行行为，因此，该实现方式对实际运行环境的数据、操作等形成一种保护，如所使用的本地数据库、本地缓存等数据等，而同屏过程仅向被同屏的一侧暴露显示相关的数据。综合以上，该实现方式有益效果是，数据传输量极小，速度快，同时有利于数据保护。

基于以上实施例的发明构思，参考图13所示，本申请还提供一种包括同屏功能的浏览器，所述浏览器包括同屏控制模块1301、执行指令采集模块1302、执行指令执行模块1303、用户操作事件采集与同步执行模块1304，所述浏览器的同屏工作模式包括第一工作模式、第二工作模式两种，其中：

所述第一工作模式，所述浏览器在所述第一工作模式下，为第六同屏数据的发送方；

所述第二工作模式，所述浏览器在所述第二工作模式下，为所述第六同屏数据的接收方；

所述执行指令采集模块1302，用于在所述第一工作模式下浏览器监听到JS执行并确认所述JS执行的行为是生成或改变所述与渲染相关的数据的执行行为时，将所述执行行为转化为执行指令，将所述执行指令生成为第六同步数据发送；

所述执行指令执行模块1303，用于在所述第二工作模式下接收所述第六同步数据并解析，执行其包含的执行指令；

所述用户操作事件采集与同步执行模块1304，用于在所述浏览器为控制方时监听用户操作事件，基于所述用户操作事件采集操作事件数据并发送；还用于在所述浏览器为受控方时接收操作事件数据，基于所述操作数据执行所述操作事件类型包含的操作；

所述同屏控制模块1301，用于设置所述浏览器的同屏工作模式；还用于执行同步过程控制，包括基于所述同屏工作模式调用执行指令采集模块1302、执行指令执行模块1303执行同步处理；还用于在所述第二工作模式下屏蔽JS执行；还用于在生成同步数据或执行同步处理后更新同步状态；还用于发送与接收同步状态信息。

所述同屏控制模块1301，还用于在所述浏览器UI层或网页内生成同屏交流部件，还用于设置所述同屏交流部件，还用于接收所述同屏交流部件的触发事件执行对应的控制指令。

在一种可能的实现方式中，所述浏览器还包括录制模块，所述录制模块用于记录网页加载数据，以及记录所述第六同步数据、所述操作事件数据的一种或多种以及对应的发生时间信息，生成同屏过程数据记录。

在一种可能的实现方式中，在以上各个实施例提供的浏览器的录制模块中，所述录制模块还用于，采用消息摘要算法对所述同屏过程数据记录生成消息摘要。可选的，在所述浏览器的UI中显示所述消息摘要。可选的，在所述浏览器执行同屏交流结束后，存储所述消息摘要。通过该方式，所述录制模块跟进所记录数据的变化过程以及最终数据，对应生成消息摘要并记录，为交流过程提供了数据防篡改机制。

此外，本申请实施例还提供一种浏览器插件，所述浏览器插件在浏览器上安装，所述浏览器安装所述浏览器插件后，所述浏览器中的所述浏览器插件以执行上述实施例提供的同屏方法，或者，使所述浏览器具有以上实施例提供的可同屏的浏览器的功能。

以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种浏览器同屏方法，其特征在于，所述方法用于实现第一浏览器与第二浏览器之间的同屏显示与操作，所述方法包括：

建立所述第一浏览器与所述第二浏览器之间的通信连接；

在所述第一浏览器对目标网页执行第一阶段处理，生成与渲染相关的数据，基于所述与渲染相关的数据采集生成第一同步数据并向所述第二浏览器发送，其中，所述目标网页为待同屏的网页，所述与渲染相关的数据至少包括用于生成渲染的数据、用于执行渲染的数据、渲染生成的数据中的一种；

所述第二浏览器接收所述第一浏览器发送的所述第一同步数据，基于所述第一同步数据在所述第二浏览器中执行第二阶段处理，其中，所述第二阶段处理与所述第一阶段处理为互补关系，两者合并在一起构成浏览器对网页处理并渲染的全过程，所述第二阶段处理包括，基于所述用于生成渲染的数据生成渲染数据并执行渲染，或者，基于所述用于执行渲染的数据执行渲染，或者，基于所述渲染生成的数据渲染显示。

2.根据权利要求1所述的方法，其特征在于，还包括：

在所述第一浏览器对目标网页执行所述第一阶段处理后，基于所述与渲染相关的数据，在所述第一浏览器执行所述第二阶段处理；

在所述第二浏览器，屏蔽对目标网页执行所述第一阶段处理，当接收到所述第一同步数据后，基于所述与渲染相关的数据执行所述第二阶段处理；

其中，在所述第一浏览器执行所述第二阶段处理，用于完成所述目标网页在所述第一浏览器中的渲染。

3.根据权利要求1所述的方法，其特征在于，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，还包括，在所述第一浏览器、所述第二浏览器的UI层或网页内生成同屏交流部件，所述同屏交流部件包括同屏控制部件、权限控制部件、声音控制部件、麦克风控制部件、涂鸦部件、涂鸦控制部件、视频显示部件、视频控制部件、同屏状态显示部件、同屏信息显示部件、录制部件、设置部件中的一种或者多种。

4.根据权利要求1所述的方法，其特征在于，在建立所述第一浏览器与所述第二浏览器之间的通信连接之后，还包括，建立所述第一浏览器与所述第二浏览器之间的音频和/或视频通信。

5.根据权利要求1所述的方法，其特征在于，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，还包括：

在所述第一浏览器与所述第二浏览器的UI层创建用于涂鸦的画布部件，或者，在所述第一浏览器与所述第二浏览器中网页内创建用于涂鸦的画布部件；

基于所述画布部件采集绘制指令、绘制数据生成第二同步数据，将所述第二同步数据向另一侧浏览器发送；接收另一侧浏览器发送的所述第二同步数据，基于其包含的绘制指令与绘制数据，在所述画布部件上基于所述绘制数据执行所述绘制指令；

其中，所述画布部件用于所述第一浏览器、所述第二浏览器之间的涂鸦交互。

6.根据权利要求1所述的方法，其特征在于，在建立所述第一浏览器与所述第二浏览器之间的通信连接之后，还包括：

监听所述第二浏览器中的用户操作事件，基于所述用户操作事件采集数据生成第三同步数据并向所述第一浏览器发送，其中，基于所述用户操作事件所采集的数据包括操作事件类型、操作数据中的一种或者多种；

所述第一浏览器接收所述第三同步数据，解析其包含的所述操作事件类型、所述操作数据，基于其在所述第一浏览器中执行对应的操作，包括基于所述操作数据执行对应于所述操作事件类型的操作。

7.根据权利要求1所述的方法，其特征在于，在建立所述第一浏览器与所述第二浏览器之间的通信连接后，将拥有控制权的一侧作为控制方，将无控制权的一侧作为受控方，还包括：

监听所述控制方的用户操作事件，当确定所述用户操作事件的类型为指定的操作类型时，基于所述用户操作事件采集数据并生成第四同步数据向所述受控方发送，其中，所采集的数据包括操作事件类型、操作数据中的一种或者多种；

所述受控方接收所述第四同步数据，解析其包含的所述操作事件类型、所述操作数据，基于其在所述受控方中执行对应的操作，包括基于所述操作数据执行对应于所述操作事件类型的操作。

8.一种浏览器，所述浏览器包括同屏控制模块、第一处理模块、第二处理模块，所述浏览器的同屏工作模式包括第一工作模式、第二工作模式两种，其中：

所述浏览器工作于所述第一工作模式时，为第一同步数据的发送方，采集与发送所述第一同步数据；所述浏览器工作于所述第二工作模式时，为所述第一同步数据的接收方，接收所述第一同步数据并处理；

所述第一处理模块，用于在所述第一工作模式下对目标网页执行第一阶段处理，生成与渲染相关的数据，并基于所述与渲染相关的数据采集生成第一同步数据发送，其中，所述目标网页为待同屏的网页，所述与渲染相关的数据至少包括用于生成渲染的数据、用于执行渲染的数据、渲染生成的数据中的一种；还用于在所述第二工作模式下屏蔽执行第一阶段处理操作；

所述第二处理模块，用于在所述第一工作模式下对所述目标网页执行第二阶段处理；还用于在所述第二工作模式下，接收所述第一同步数据，基于所述第一同步数据执行第二阶段处理，其中，所述第二阶段处理包括，基于所述用于生成渲染的数据生成渲染数据并执行渲染，或者，基于所述用于执行渲染的数据执行渲染，或者，基于所述渲染生成的数据渲染显示；

所述同屏控制模块，用于设置所述浏览器的同屏工作模式；还用于执行同步过程控制，包括基于所述同屏工作模式调用所述第一处理模块、所述第二处理模块执行；还用于在所述第一处理模块或所述第二处理模块执行后更新同步状态；还用于发送与接收同步状态信息。

9.根据权利要求8所述的浏览器，所述浏览器还包括音视频通信模块、涂鸦模块、操作事件处理模块，其中：

所述音视频通信模块，用于在同屏工作模式下，建立与其它侧参与同屏的浏览器之间的音频和/或视频通信；

所述涂鸦模块，用于在所述浏览器的UI层或所述浏览器的网页内创建用于涂鸦的画布部件；还用于基于所述画布部件采集绘制指令、绘制数据生成第二同步数据发送，和/或，根据接收的所述第二同步数据，基于其包含的绘制指令与绘制数据，在所述画布部件上执行绘制，包括基于所述绘制数据执行所述绘制指令；

所述操作事件处理模块，用于在所述第二工作模式下监听所述浏览器中发生的用户操作事件，并采集操作事件数据向连接同屏的所述第一工作模式的浏览器发送；

所述操作事件处理模块，还用于在监听到用户操作事件后，当确定所述用户操作事件的类型为指定的操作类型时，采集操作事件数据向其它侧参与同屏的浏览器发送；

所述操作事件处理模块，还用于接收其它侧参与同屏的浏览器发送的操作事件数据，基于所述操作事件数据，在本侧执行对应的操作；

所述同屏控制模块，还用于在所述浏览器UI层或网页内生成同屏交流部件，还用于设置所述同屏交流部件，还用于接收所述同屏交流部件的触发事件执行对应的控制指令。

10.一种浏览器插件，所述浏览器插件用于在浏览器上安装，所述浏览器安装所述浏览器插件后，所述浏览器中的所述浏览器插件以执行权利要求1至7任一项方法，或者，所述浏览器具有以上权利要求8至9所述的功能。

Images