CN113868573A - 一种基于网页快速建立同屏交互的方法与*** - Google Patents

Abstract

本申请提供了一种基于网页快速建立同屏交互的方法与***，属于互联网通信技术领域。在网页客户端发起同屏交互创建请求并发送至服务端，由服务端接收并基于其创建同屏交互服务，生成相应的同屏交互连接信息，多个网页客户端基于同屏交互连接信息建立网页同屏交互，监听操作方网页发生的网页操作，基于所述操作采集为同屏交互数据向服务端发送；其他方网页客户接收服务端发送的同屏交互数据，执行相应的网页操作，以实现浏览同一网址的多个网页客户端之间的同屏交互。可见，本申请实现了基于网页快速建立同屏交互，包括网页浏览、操作等，为网页增加了一种新的交流与浏览方式，提升交流效率且提高了用户体验。

Description

一种基于网页快速建立同屏交互的方法与***

技术领域

本发明涉及互联网通信技术领域，尤其涉及一种基于网页快速建立同屏交互的方法与***。

背景技术

网页是现有最为常见的人机沟通交流的工具，人们通过网页快速了解信息资源、网上办公、操作业务等。在现有网站或网页技术中，用户通过网址、链接跳转等方式进入网页访问，单方面浏览阅读或操作网页，但随着业务逐步线上化，针对网页内容进行实时线上沟通的需求越来越大，例如，某公司制作了公司网站，在站内放置了公司介绍以及公司产品，某客户通过网址访问该公司网站，客服人员同时保持在线，却没办法与该客户取得直接沟通。

在一些现有的沟通技术中，在网站内设立了即时聊天沟通工具，一方面，频繁的弹出聊天请求对话框影响网站的整体浏览效果，另一方面，客服通过及时聊天工具与客户沟通，即使网站内容是现成的，却无法以网站内容作为沟通的载体，由此而导致无法实时与客户建立联系、沟通效率低、效果差等问题。因此，亟需提出一种基于网页(网站)快速建立交流的实现方法，解决以上问题。

发明内容

针对上述问题，本发明提供一种基于网页(或网站)快速建立同屏交互的方法与***，旨在实现网页(或网站)的多个访问者之间快速建立同屏交互，包括同屏浏览、同屏操作、涂鸦标记、音视频交流等，将网页由常规的仅能单方浏览快速拓展至可供线上交流，使网站的功能快速增强，使网站(或网页)同时成为一种获客、交流的工具。本发明提供的技术方案如下：

第一方面，本申请提供了一种基于网页快速建立同屏交互的方法，所述方法用于网页客户端，所述方法包括：

接收配置在网页客户端的网页浏览界面上的第一功能按钮的触发信号，在接收到所述触发信号后向服务端发送同屏交互创建请求，所述同屏交互创建请求的数据至少包含创建者信息、用于进行同屏交互的目标网址信息、浏览器信息、同屏交互设置信息中的一种，所述服务端用于接收网页客户端发送的同屏交互创建请求，并基于其创建同屏交互服务，生成相应的同屏交互连接信息，所述同屏交互连接信息为参与相应的同屏交互的网页客户端提供服务连接，其与用于创建同屏交互的目标网址信息为一对一关系；

接收所述同屏交互连接信息，或者，基于当前浏览网址从服务端查询获取到同屏交互连接信息；

基于所述同屏交互连接信息，建立所述网页客户端与所述同屏交互服务之间的通信连接；

在有操作权限的网页客户端监听网页操作，根据所述网页操作的性质采集数据生成对应类型的同屏交互数据向所述服务端发送；在无操作权限的网页客户端，接收所述服务端发送的同屏交互数据，根据所接收的同屏交互数据的类型，在所述网页客户端执行对应性质的网页操作，以实现与有操作权限的网页客户端之间的同屏交互。

通过上述方法，在客户端网页程序中引入用于实现本申请同屏交互创建、控制、通信的JS库，使得在不改变网页端原始内容程序的情况下快速实现同屏交互功能。

进一步的，还包括，在网页客户端接收所述同屏交互连接信息，或者，基于当前浏览网址从服务端查询获取到同屏交互连接信息后，还包括，基于所述同屏交互连接信息生成进入所述同屏交互的入口链接，其中，所述入口链接的生成方式包括，在所述同屏交互的目标网址对应的网页内生成入口链接，或者，基于网站内网页之间的浏览跳转关系，在与所述同屏交互的目标网址对应的网页相关联的网页内生成入口链接。

通过上述方法，在同屏交互的创建者创建同屏交互完成后，同时为同屏交互的创建者与访问者生成入口链接信息，以便访问者能够快速参与和进入交流。

一种可能的实现方式中，所述同屏交互的创建者或访问者进入同屏交互之后，还包括，在所述创建者或访问者的网页客户端，加载同屏交互控制部件，所述同屏交互控制部件包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程控制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的至少一个。

通过上述方法，为进入同屏交互的网页客户端生成同屏交互环境。

一种可能的实现方式中，同屏交互过程中，在参与同屏交互的网页客户端采集同屏交互数据向服务端发送以及接收服务端发送的同屏交互数据执行对应性质的网页操作，包括但不限于以下方式：

在有操作权限的网页客户端，基于用户执行的网页操作，采集数据生成网页操作指令数据，将所述网页操作指令数据作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的网页操作指令数据，执行其包含的网页操作指令，以还原有操作权限的网页客户端所发生的网页操作；

在有操作权限的网页客户端，监听网页数据内容的变化，采集网页内容数据或差异化网页数据内容作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的网页内容数据，基于其更新或替换所述网页客户端的网页数据内容，以使得网页数据与有操作权限的网页客户端保持一致；

在有操作权限的网页客户端，基于网页显示内容或发生改变的网页显示内容生成图片数据和/或绘制指令，将所述图片数据和/或绘制指令作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的图片数据和/或绘制指令，基于其在所述网页端显示或绘制图片、替换图片，以使得网页显示内容与有操作权限的网页客户端保持一致。

以上方法提供了在建立网页(或网站)同屏交互后，执行网页之间同步显示与操作的方法，以实现在同屏交互过程中各网页终端之间的同步。

一种可能的实现方式中，在进入同屏交互的网页客户端加载涂鸦控制部件，具体为，所述涂鸦控制部件至少包括涂鸦开关部件，当所述涂鸦开关部件开启时，控制所有参与交互的网页客户端进入涂鸦操作状态，并在其网页内生成用于涂鸦的Canvas元素，同时拦截与涂鸦操作无关的其他网页操作；当发生涂鸦操作时，基于发生在所述Canvas元素上的绘制操作生成绘制数据，将所述绘制数据作为所述同屏交互数据向所述服务端发送；还包括，接收所述服务端发送的绘制数据，基于其在所述Canvas元素上执行绘制操作；当所述涂鸦开关部件关闭时，隐藏或删除所述Canvas元素，放弃对与涂鸦操作无关的其他网页操作的拦截，控制所有参与交互的网页客户端退出涂鸦操作状态。

以上方法提供了在网页(或网站)同屏交互过程中同步涂鸦的方法，为同屏交互过程中各网页终端之间的交流提供便利。

一种可能的实现方式中，所述同屏交互的创建者或访问者进入同屏交互之后，还包括，加载音视频控制部件，建立参与同屏交互服务的各网页客户端之间的音频和/或视频通信，所述音视频控制部件用于实现音视频的采集、播放、控制，包括声音播放开关、麦克风开关、视频播放开关、视频采集开关、音频与视频之间的切换开关中的一种或者多种。

以上方法提供了在网页(或网站)同屏交互过程中音视频通信、控制的方法，提升同屏交互中各网页终端之间的交流效率。

一种可能的实现方式中，在基于所述同屏交互连接信息，建立参与交互的网页客户端与所述同屏交互服务之间的连接之后，还包括，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录，并为所述同屏交互数据记录增加数据索引，所述同屏交互数据记录用于同屏交互过程的回放，所述数据索引包括所述同屏交互对应的目标网址信息、网页数据、网页请求Header中包含的版本信息、参与者信息中的一种或多种。

以上实现方式通过在同屏交互采集并记录数据，提供了一种记录与生成同屏交互数据的方法，实现同屏交互过程的存储与存证。

一种可能的实现方式中，在网页客户端，还包括，向服务端发送查询请求，获取与当前网址相关的同屏交互数据记录，基于其生成用于回放的入口链接并显示，以供其他访问者通过所述入口链接，获取相应的同屏交互数据记录，执行相应同屏交互过程的回放。

通过以上实现方式，在网页客户端生成回放链接，以便网页访问者可查看交流过程，为网页(或网站)增加了一个新的访问阅读维度，基于网页(或网站)本身，丰富了一层来自交流者解析的内容。

在另一种可能的实现方式中，在所述网页程序中引入JS库，所述JS库中可包括用于实现以上各种实现方法的功能，如包括，生成同屏交互创建请求、接收同屏交互服务创建完成通知或连接信息、生成同屏交互环境、建立与所述同屏交互服务之间的通信连接、发送与接收同屏交互数据、在网页中生成入口链接、生成涂鸦部件、基于涂鸦生成绘制数据、建立音视频通信、控制音视频通信、采集同屏交互数据、生成同屏交互数据记录、生成回放数据、执行回放中的一种或多种功能。

该种实现方式有利于在不改变网页(或网站)原始内容的情况下，快速实现本申请所提及的各种方法。

另一方面，本申请提供了一种基于网页快速建立同屏交互的***，所述***用于网页客户端，所述***包括：

创建模块，用于基于创建者信息、用于创建同屏交互的目标网址信息、浏览器信息、同屏交互设置信息中的一种或者多种，生成同屏交互创建请求；还用于生成访问者进入同屏交互的入口链接；

加载模块，用于加载同屏交互控制部件，包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程控制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的一种或多种；

通信模块，用于与所述服务端建立通信连接，包括发送同屏交互创建请求、查询同屏交互服务、接收同屏交互服务信息、发送与接收同屏交互数据；

控制模块，用于执行操作权限分配，控制同屏交互过程；

涂鸦模块，用于执行涂鸦绘制、采集涂鸦数据、基于涂鸦数据执行绘制；

音视频模块，用于采集、发送、接收、播放音视频数据，包括音视频播放控制；

采集模块，用于采集网页操作指令数据、网页内容数据或差异化网页数据、网页显示内容所生成的图片数据或绘制数据、涂鸦绘制数据、音频数据、视频数据中的一种或者多种，生成同屏交互数据。

在一种可能的实现方式中，所述***的创建模块还包括，基于目标网址，从服务端获取相应的同屏交互数据记录，生成可供访问者执行回放的入口链接；所述***还包括记录模块，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录；所述***还包括回放模块，基于同屏交互数据记录，执行相应同屏交互过程的回放。

本发明至少具有如下有益效果：

本发明提供了一种基于网页快速建立同屏交互的方法，在不改变网页(或网站)原程序代码的基础上，引入实现本申请的同屏交互JS库，为网页快速建立同屏交流功能；本申请使浏览同一网页的多个客户端之间基于网页内容进行同屏浏览、同步操作、同步涂鸦等同屏交互，实现了网站的浏览者之间的互动，可达到“面对面”的交流效果；另外，在同屏交互过程中记录浏览、操作、讲解数据，记录生成回放数据，在形成操作或交流证据的同时，为网站新增了一种讲解、导引功能；本申请提供的方法传输或记录的数据量极小，便于传输与存储；回放画质高。可见，本申请为网页增加了一种新的交流与浏览方式，提升了交流效率且提高了用户体验。

附图说明

图1为本申请实施例的一种基于网页快速建立同屏交互的方法的流程示意图；

图2为本申请实施例的一种基于网页快速建立同屏交互的方法的流程示意图；

图3为本申请实施例的一种基于网页快速建立同屏交互的方法的流程示意图；

图4为本申请实施例的一种加载同屏交互部件的流程示意图；

图5为本申请实施例的不同类型的同屏交互数据的对应发送与接收示意图；

图6为本申请实施例的一种涂鸦开关部件执行流程示意图；

图7为本申请实施例的一种加载音视频部件的流程示意图；

图8为本申请实施例的一种生成同屏交互数据记录的流程示意图；

图9为本申请实施例的一种基于同屏交互数据记录执行回放的流程示意图；

图10为本申请实施例的一种基于网页快速建立同屏交互的***示意图；

图11为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图12为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图13为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图14为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图15为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图16为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图17为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图18为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图19为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图20为本发明实施例的一种基于网页快速建立同屏交互的界面示意图；

图21为本发明实施例的一种网页内部结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供的一种基于网页快速建立同屏交互的方法，旨在为正在浏览同一网页的多个网页客户端之间建立同屏交互，具体请参考图1所示：

S101，接收配置在网页客户端的网页浏览界面上的第一功能按钮的触发信号，向服务端发送同屏交互服务创建请求；

其中，在某一网页客户端创建同屏交互，向服务端发送同屏交互服务创建请求，所发送的信息包括但不限于创建者信息、用于进行同屏交互的目标网址信息、浏览器信息、同屏交互设置信息中的一种或者多种，在服务端接收到同屏交互服务创建请求后，基于其创建同屏交互服务，生成相应的同屏交互连接，用于为参与相应的同屏交互的网页客户端提供服务连接，其与用于创建同屏交互的目标网址信息为一对一关系。优选的，在服务端生成同屏交互连接，同时启动该服务，为客户端提供该连接对应的同屏交互服务。根据以上，所述同屏交互服务类似于一个用于交流的房间，连接信息类似于房间地址。需要说明的是，本申请所提及的服务端，通常包括同屏交互服务创建模块、同屏交互服务管理模块、通信服务模块，其中，同屏交互服务创建模块用于基于同屏交互创建请求创建同屏交互服务；同屏交互服务管理模块用于注册同屏交互服务并生成同屏交互连接，还用于注销、查询同屏交互服务，当接收到客户端发送的同屏交互连接查询请求时，在服务端数据库中检索并提供相应的同屏交互连接；数据通信服务模块用于接收同屏交互创建请求、发送同屏交互连接或创建完成通知、发送与接收同屏交互数据。另外需要说明的是，针对同一网址，不同的网页客户端可在同一时刻或不同时刻基于其创建一个或多个同屏交互服务，即类似于针对同一网址可创建一个或多个交流房间。

S102，接收服务端发送的同屏交互连接信息或同屏交互服务创建完成通知；

具体的，该步骤包括两种实现方式：服务端向网页客户端推送，或网页客户端向服务端主动查询获取。

S103，连接同屏交互服务，进入同屏交互；

该步骤基于同屏交互连接信息建立网页客户端与对应的同屏交互服务之间的通信连接，所述网页客户端进入同屏交互状态。

S1041，采集网页操作数据生成同屏交互数据并发送；

S1042，接收同屏交互数据，还原网页操作。

以上两个步骤中，S1041在有操作权限的网页客户端监听网页操作，根据网页操作的性质采集数据生成对应类型的同屏交互数据向服务端发送；S1042在无操作权限的网页客户端，接收服务端发送的同屏交互数据，根据所接收的同屏交互数据的类型，执行对应性质的网页操作，以实现与有操作权限的网页客户端之间的网页同步。需要说明的是，以上步骤中的网页操作，包括但不限于用户执行的操作、网页程序运行事件、网页内容改变、网页显示发生改变等，其中用户操作如滑动、拖拽、点击、输入等操作。另外，在一般情况下，在同一时刻，仅存在一个网页客户端拥有操作权限，但也存在多个客户端同时拥有操作权限的情况，如在涂鸦交互模式下，多个用户可同时执行涂鸦绘制的情形。

本实施例中，在一个网页客户端发起同屏交互创建请求，实现了基于指定的网址在多个网页客户端之间进行同屏交互，为网页提供了一种新的交流功能，便于浏览者针对网页本身内容展开交流，提升沟通效率。

在以上实施例服务端开启同屏交互服务、生成同屏交互连接后，为便于其他浏览者进入同屏交互，需在用户浏览的网页中对应生成入口链接，请参考图2，具体如下：

S201，在当前浏览网页，接收同屏交互连接信息，或者，基于当前浏览网址从服务端查询获取到同屏交互连接信息；

S202，基于同屏交互连接信息生成进入同屏交互的入口链接；

S203，点击入口链接，连接同屏交互服务，进入同屏交互；

S2041，采集网页操作数据生成同屏交互数据并发送；

S2042，接收同屏交互数据，还原网页操作。

其中，S201包括两种获取同屏交互连接的方式，基于当前在浏览网址，从服务端获取对应的同屏交互连接，或者，基于网站内网页之间的浏览或跳转关系，即计算出当前在浏览的网页可直接或间接跳转的目标网页，查找所述目标网页所关联的同屏交互服务，获取对应的同屏交互连接，经S202生成入口链接，后经S203进入同屏交互。本实施例中S2041、S2042与上一实施例S1041、S1042基本相同，在此不再赘述。

本实施例为在浏览网页的用户提供了一种创建同屏交互入口、进入同屏交互的方式，便于用户在浏览网页过程中，实时获取当前正在进行的同屏交互，选择进入同屏交流。

本申请的具体实施场景中，在其中一个网页客户端发起同屏交互创建，其他网页客户端参与进入同屏交互，优选的，网页终端之间通过服务端进行通信，参考图3所示的流程示意图，主要步骤如下：

在网页客户端1：

S301，生成同屏交互服务创建请求；

在服务端：

S302，创建同屏交互服务；

S303，生成同屏交互连接信息，并启动同屏交互服务；

S304，接收同屏交互数据，发送至其他参与交互的网页客户端；

在网页客户端1：

S305，接收同屏交互连接信息或同屏交互创建完成通知信息，进入同屏交互；

S3071，采集网页操作数据生成同屏交互数据；

S3072，接收同屏交互数据，还原网页操作；

在网页客户端2：

S306，接收同屏交互连接信息，生成入口链接，通过入口链接进入同屏交互；

S3081，采集网页操作数据生成同屏交互数据；

S3082，接收同屏交互数据，还原网页操作。

其中，网页客户端1为同屏交互创建终端，网页客户端2代表同屏交互参与终端，两者通过服务端建立通信，在S303创建同屏交互服务后，同时开启同屏交互服务，并发送同屏交互连接或通知至客户端进入同屏交互，S304实现网页客户端之间的同屏数据交互。需要特别说明的是，不应因以上通过服务端交互数据的实施方式限制本申请，在一种可能的实施场景中，网页客户端之间可通过直接通信的方式实现，如建立P2P连接，客户端首先连接中继服务，通过中继服务牵线后，客户端之间直接通信，又如采用WebRTC进行客户端之间直接数据通信。在另一种可能的实施场景中，使用创建者的网页客户端取代部分或全部服务端功能，执行同屏交互服务的创建、提供同屏交互服务。

在一种可能的实施场景中，发起或参与同屏交互的网页客户端，在进入同屏交互后，在网页客户端首先设置同屏交互环境，加载同屏交互部件，请参考图4，步骤如下：

S401，连接同屏交互服务，进入同屏交互；

S402，加载同屏交互控制部件，包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程录制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的一种或多种。

其中，在同屏交互的创建客户端与参与客户端所加载的部件可能不同，如前者需加载与主持人相关的控制部件。可选的，根据当前客户端当前是否具有操作权限加载相应的同屏交互部件。以下对部件功能举例说明：操作权限控制部件包括控制权申请、授权、转移、取消等功能；涂鸦控制部件包括涂鸦开启、涂鸦关闭功能，以及画笔、橡皮、形状等设置功能，其中画笔设置包括颜色、粗细等设置功能；音视频控制部件包括声音开关、麦克开关、视频显示部件等；同屏交互录制部件包括录制开始、暂停、停止等功能，以及录制时长、录制文件大小显示等；同屏交互状态信息显示部件包括参与人数、同屏交互时长、涂鸦状态(涂鸦开启状态、涂鸦关闭状态)等信息显示功能；同屏交互用户信息显示部件显示创建者、主持人、操作人、发言人等信息。

本实施例在进入同屏交互后，加载同屏交互部件，在网页客户端快速生成同屏交互环境，为基于网页进行同屏交互、同屏涂鸦、音视频交流提供功能支持。

在一种可能的实施场景中，多个客户端在同屏交互过程中采集与发送同屏交互数据，或接收与处理同屏交互数据，请参考图5示意的几种不同类型的同屏交互数据的发送与接收示意图。在有操作权限的网页客户端，执行步骤S501，基于用户执行的网页操作，采集数据生成网页操作指令数据作为同屏交互数据发送，在无操作权限的网页客户端，执行步骤S502，接收网页操作指令数据，执行其包含的网页操作指令；在有操作权限的网页客户端，执行步骤S503，监听网页数据内容的变化，采集网页内容数据或差异化网页数据内容作为同屏交互数据发送，在无操作权限的网页客户端，执行步骤S504，接收网页内容数据，基于其更新或替换所述网页客户端的网页数据内容；在有操作权限的网页客户端，执行步骤S505，基于网页显示内容或发生改变的网页显示内容生成图片数据和/或绘制指令作为同屏交互数据发送，在无操作权限的网页客户端，执行步骤S506，接收图片数据和/或绘制指令，基于其在所述网页端显示或绘制图片、替换图片。

其中，在同屏交互过程中的某个状态下，针对某网页操作，总存在一个网页客户端作为同屏交互的控制方，而其它的网页客户端作为同屏交互的受控方，所述同屏交互的实质即为将一方所做的操作、发生的变化同步至另一方的行为，因此，结合同屏交互过程中的操作权限，通常将有操作权限的网页客户端作为控制方，将无操作权限的网页客户端作受控方。S501、S502通过监听或采集控制方所执行的操作，将所述操作转化为网页操作指令发送，在受控方基于所接收的指令还原网页操作实现网页同屏显示与操作，如在控制方点击按钮执行某操作，在受控方通过JS执行该按钮的onclick事件，由此达到两者相同的执行效果；S503、S504通过监听网页数据变化并同步网页数据的方式实现网页同步，所述网页数据包括但不限于用于网页渲染的HTML文本、CSS代码、JavaScript代码等内容，监听网页内容变化函数如MutationObserver；S505、S506通过采集网页最终显示画面的方式实现网页同步，所述最终显示画面即网页渲染后生成的画面，在该方式中，包括采集图片数据以及绘制指令两种方式可供选择，所述绘制指令即在控制方基于当前的显示画面生成绘制该画面的指令集，在受控方构建用于呈现的canvas元素，在canvas元素上执行绘制以达到同屏显示的效果。可选的，在具体的实施场景中，本申请可同时结合以上一种或多种方式进行实施。

本实施例所提供的同屏交互数据采集、发送、接收、还原方法，实现了多个客户端在交互过程中网页保持同步状态，进而实现同屏浏览、同步操作的效果，提升沟通质量。

在一种可能的实施场景中，在进入同屏交互的网页客户端加载涂鸦控制部件，涂鸦控制参考图6所示，具体如下：

涂鸦开启时的执行步骤：

S601，涂鸦开关部件开启；

S602，控制所有参与交互的网页客户端进入涂鸦操作状态；在网页内生成用于涂鸦的Canvas元素；拦截与涂鸦操作无关的其他网页操作；

S603，基于发生在所述Canvas元素上的绘制操作生成绘制数据生成同屏交互数据发送；或者，接收同屏交互数据，解析绘制数据，在Canvas元素上执行绘制；

涂鸦关闭时的执行步骤：

S604，涂鸦开关部件关闭；

S605，隐藏或删除所述Canvas元素；放弃对与涂鸦操作无关的其他网页操作的拦截；控制所有参与交互的网页客户端退出涂鸦操作状态。

其中，在S602进入涂鸦操作状态后，在网页上层创建一个用于涂鸦的透明画布，与此同时，用户对原网页的所有操作将会被拦截，以防止涂鸦操作事件影响到网页操作。可选的，在S601、S604进入和退出涂鸦操作状态时，在网页显示切换状态提示信息。

以上实施例所提供的同步涂鸦功能，更有利于基于网页的内容圈点、标记，有效提升沟通效率。

在一种可能的实施场景中，还包括，在同一时刻，在一个网页客户端执行网页操作，在其他网页客户端执行涂鸦的工作模式。该模式下，在执行网页操作的网页客户端，显示用于呈现涂鸦内容的Canvas元素，当发生在其上用户操作时，忽略其在Canvas元素上的事件且传递至原网页元素上执行；在其他网页客户端，执行涂鸦操作，且拦截与涂鸦操作无关的其他网页操作。该方法有利于实现一方进行操作，其他方进行标记的交流情形。

在一种可能的实施场景中，在进入同屏交互的网页客户端加载音视频控制部件，参考图7所示：

S701，连接同屏交互服务，进入同屏交互；

S702，加载音视频控制部件，建立参与同屏交互服务的各网页客户端之间的音频和/或视频通信。

优选的，采用WebRTC(Web Real Time Communication，网络实时通信)在网页客户端之间直接进行视频和音频通信。

以上实施例不需要借助于其他音视频交流工具、插件，基于网页客户端直接建立音视频交流，使同屏交互更为快捷、高效。

在另一种可能的实施场景中，基于同屏交互过程记录交流过程数据，参考图8所示：

S801，进入同屏交互；

S802，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录；

S803，为所述同屏交互数据记录增加数据索引。

根据以上实施方式，可选的，在S802中根据记录需求配置记录数据的类型。可选的，S802中的记录操作，在一个网页客户端执行记录。可选的，S802中的记录操作，在服务端基于所接收的网页客户端数据执行记录。优选的，在生成同屏交互数据记录后，在服务端数据库中存储该数据记录，并通过S803增加该数据记录的索引信息。数据索引包括但不限于同屏交互对应的目标网址信息、网页数据、网页请求Header中包含的版本信息、参与者信息等，所述数据索引用于查询获取对应的同屏交互数据记录。

在以上实施例的一种可能的实现方式中，基于S802中同屏交互数据记录或其包含的数据执行回放并生成视频，或者在同屏交互过程中录制生成视频，将所述视频作为同屏交互数据记录存储。

以上实施例生成的同屏交互数据记录，可用于同屏交互过程的回放。

结合以上实施例，在一种可能的实施场景中，根据S802中生成的同屏交互数据记录或其包含的数据内容计算生成消息摘要(如MD5运算)，将所生成的消息摘要存储或在同屏交互的网页中显示，以供参与交流者存证。进一步的，在同屏交互过程中，在所述同屏交互数据记录的每一次更新后，对更新后的同屏交互数据记录重新计算生成新的消息摘要，并将新的消息摘要存储或在同屏交互的网页中显示，以对同屏交互过程每一状态下的交互数据进行存证。进一步的，在同屏交互过程结束后，将最终的同屏交互数据记录所对应的消息摘要、同屏交互的标识信息、相关索引信息中的一种或者多种，采用区块链技术存储，以存证整体同屏交互过程。

在另一种可能的实施场景中，在网页中生成查看同屏交互过程回放的入口，供浏览者访问查看，参考图9所示，具体步骤为：

S901，在当前浏览网页，向服务端发送查询请求，获取与当前网址相关的同屏交互数据记录；

S902，基于同屏交互数据记录生成用于回放的入口链接并显示；

S903，点击链接，获取相应的同屏交互数据记录，执行相应同屏交互过程的回放。

步骤S901中，查询请求中携带的网址，包括当前网址信息，或者用于查询相关同屏交互数据记录的指定网址，另外，所返回的数据记录包括数组的形式，即可为多条数据记录，相应的，S902中生成的入口链接包括单个链接、列表链接。

以上实施例可产生的有益效果是，为网站或网页增加了一种解说、解析功能，本实施例所提供的回放具有多媒体效果，更有利于浏览者对网站的阅读和理解。另外，本实施例对交流的人数不做限定，当为一人时，所生成的结果即对网站内容的多媒体讲解，例如：网站内容为表单填写，解说人员通过创建同屏交互，执行表单填写操作，并在操作时进行语音讲解，在生成同屏交互数据记录后，其他访问者通过回放学习，具有帮助的效果。

在一种优选的实施场景中，在网页程序中引入用于实现本发明以上各实施例的基于网页快速建立同屏交互的方法的JS库，所述JS库的功能包括：生成同屏交互创建请求、接收同屏交互服务创建完成通知或同屏交互连接、生成同屏交互环境、建立与同屏交互服务端之间的通信连接、发送与接收同屏交互数据、在网页中生成同屏交互入口链接、生成涂鸦部件、基于涂鸦生成绘制数据、建立音视频通信、控制音视频通信、采集同屏交互数据、生成同屏交互数据记录、执行回放等功能中的一种或多种。本发明实施例通过在一个网页中引入JS库，配置同屏交互服务端连接信息，便使该网页快速具备同屏交互的功能，因此，引入JS库是本发明实施例的一种基于网页快速建立同屏交互的方法的一种可实现方式。

基于相同的发明构思，参考图10所示，本发明实施例还提供一种基于网页快速建立同屏交互的***，所述***用于网页客户端，所述***包括：

创建模块101，配置为基于创建者信息、用于创建同屏交互的目标网址信息、浏览器信息、同屏交互设置信息中的一种或者多种生成同屏交互创建请求；还用于生成访问者进入同屏交互的入口链接；

加载模块102，配置为加载同屏交互控制部件，包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程控制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的一种或多种；

通信模块103，配置为与所述服务端建立通信连接，包括发送同屏交互创建请求、查询同屏交互服务、接收同屏交互服务信息、发送与接收同屏交互数据；

控制模块104，配置为执行操作权限分配，控制同屏交互过程；

涂鸦模块105，配置为执行涂鸦绘制、采集涂鸦数据、基于涂鸦数据执行绘制；

音视频模块106，配置为采集、发送、接收、播放音视频数据，包括音视频播放控制；

数据采集模块107，配置为采集网页操作指令数据、网页内容数据或差异化网页数据、网页显示内容或发生改变的网页显示内容所生成的图片数据或绘制数据、基于涂鸦的Canvas元素生成的绘制数据、音频数据、视频数据中的一种或者多种，生成同屏交互数据，还包括，采集所述同屏交互数据对应的发生时间信息，将所述同屏交互数据以及对应的发生时间信息按照结构化存储生成同屏交互数据记录。

可选的，加载模块102还包括生成与更新同屏状态信息，如参与人数等。可选的，创建模块101在生成访问者进入同屏交互的入口链接的同时，还包括生成所述入口链接对应的同屏交互的状态信息，如正在参与同屏交互的人数等。可选的，创建模块101还用于基于网站所包含的网页结构信息，在所述网址对应网页的上级页面生成入口及对应的状态信息。

在一种可能的实施场景中，本发明实施例提供的一种基于网页快速建立同屏交互的***，所述创建模块101还包括，基于目标网址，从服务端获取相应的回放记录数据，生成可供访问者执行回放的入口链接；所述***还包括记录模块108，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录；所述***还包括回放模块109，基于同屏交互数据记录，执行相应同屏交互过程回放。

下面以一***具体应用场景进行示例性说明和阐述：

参考图11所示，在网页客户端存在网页A，用户甲进入浏览后，点击网页A的浏览界面上配置的“创建交流”功能按钮，进而向服务端发送同屏交互创建请求，所发送的同屏交互创建请求包括但不限于用户甲的相关信息、网页A的网址信息、浏览器信息、同屏交互设置信息中的一种或者多种，即同屏交互创建请求所携带的信息可以告诉服务端“哪个用户基于哪个网址请求创建同屏交互服务，以及基于什么样的配置对同屏交互服务和客户端同屏交互部件进行设置”。

在服务端接收到用户甲在网页A中发送的同屏交互创建请求后，解析其包含的数据信息，在服务端基于该信息创建同屏交互服务，即在服务端为某个用户针对某个网址的同屏交互创建并启动同屏交互服务，从实质上看，每启动一个同屏交互服务，相当于创建一个用于交流的房间，为其参与者提供即时同步的交流服务。另外，在服务端创建同屏交互服务，同时生成同屏交互服务的标识信息，如同屏交互服务ID、同屏交互服务标识(如使用创建者标识+网址+创建时间生成的标识)等。在服务端完成以上创建并启动同屏交互服务后，发送创建完成通知或同屏交互连接至用户甲网页客户端(可选的，包括在浏览网页A或与网页A相关联的网页客户端)，所述同屏交互连接用于连接同屏交互服务，如在连接信息中包括服务端网址、同屏交互服务ID(或同屏交互服务标识)等信息。

用户甲在网页A中接收到同屏交互创建完成通知或同屏交互连接信息后，基于其进入同屏交互，在网页A中加载同屏交互部件，参考图12所示，左上角显示同屏交互的用户、状态信息；视频窗口显示主持人、参与交流者视频信息；音频开关用于控制本端音频采集的开启及关闭；涂鸦按钮用于控制涂鸦开启及关闭；过程录制按钮用于开启网页同屏交互操作过程的录制；关闭同屏交互部件用于关闭本次同屏交互。

在以上用户甲创建同屏交互成功后，在其他用户进入网页A浏览时，则生成存在针对该网页同屏交互的提示信息、入口信息，如图14示意，或者，在网页A的上一级网页B或者可跳转至网页A的网页C，同样可生成网页A的同屏交互的提示与入口信息，如图15示意。以上入口信息供其他访问者能够参与进入同屏交互。以上实现方法为，在用户浏览网页或网站时，首先基于当前网址或包含的跳转网址，获取存在的同屏交互服务信息，并基于所获取的同屏交互服务信息设置显示入口信息。可选的，在网页中建立与服务端之间的长连接，当服务端存放的与该网址相关的同屏交互服务发生改变时，更新网页中的同屏交互入口信息。

一个网页的浏览者，如用户乙，在访问以上网页A或网页B、网页C时，在载入网页的同时，向服务端获取同屏交互服务信息，根据所获取的信息，生成同屏交互入口链接，如针对网页A，存在多个用户基于其创建同屏交互的情况，即从服务端可请求到多条同屏交互数据，由此，在用户乙进入同屏交互时，需选择同屏交互的入口，如上图16所示针对网页A同时存在3个同屏交互(即3个房间)，用户选择其中一个同屏交互入口进入交流。

用户乙选择同屏交互服务(对应于一个同屏交互入口链接)进入后，首先基于该同屏交互服务的标识信息，向服务端发送请求，获取同屏交互初始化数据，基于其初始化本地同屏交互环境，所获取的数据包括但不限于以下一种或者多种：同屏交互环境配置数据、当前网页浏览状态数据、网页内容数据、网页内容图片数据、涂鸦数据、当前网页音视频通信连接信息等。其中，同屏交互环境配置数据用于生成用户乙网页端的同屏交互环境，以上用户乙进入同屏交互后，同样需要在其网页A中加载同屏交互部件，参考图17所示，需要说明的是，用户乙与用户甲在同屏交互过程中的角色可能不同，因此，所加载的同屏交互部件可能存在差异，如用户甲拥有主持人相关部件，如用户甲拥有关闭同屏交互部件等，用户乙拥有退出同屏交互部件等。另外需要注意的是，在同屏交互配置数据中，还包括一些网页尺寸、字体等配置信息，因交流参与者与主持人的设备、浏览器等存在差异，在网页同屏交互过程中，该部分差异会影响到同屏效果，因此需包含该部分信息以供设置；当前网页浏览状态数据即表示网页从首次进入至当前浏览状态之间发生的改变，例如主持人用户甲组织同屏，用户依次进入参与，当用户乙进入时，已有交流者已对网页做了一些改变，如滑动位置，光标位置等，该部分数据在用户乙进入后需要同步设置；另外，上述的几个参与用户依次进入后，在同屏过程中对网页所做的操作，例如表单内容填写、涂鸦等，均会使网页的内容发生改变，因此，用户乙进入后，需通过基于以上数据进行设置使其与其他交流者保持同步。

在用户甲、用户乙进入同屏交互后，针对原始网页中进行的网页浏览与操作，同一时刻仅有一个用户拥有操作权限，当拥有控制权的用户对网页执行操作后，发送同步数据至其他交流方。根据网页同步使用的方法不同，其采集与发送的数据的方式也不相同，例如以下方式：A、通过同步网页内容数据的方法使网页之间保持同步，即操作方将所产生的网页内容数据或差异化的网页数据发送至受控方，受控方通过更新本地网页数据实现网页同步；B、在一方通过发送网页画面的图片数据的方式或差异化网页画面图片数据的方式至其他方，其他方基于图片数据执行显示以实现网页显示画面同步，该方式仅在一方显示真正的网页内容，即原始网页代码，其他方以图片形式显示；C、在以上B方式同步图片数据的基础上，还可以演化出一种传送绘制指令的方式，即传送用于绘制网页画面的绘制指令，在另一方基于接收的绘制指令执行绘制以获得相同的显示效果；D、通过在操作端采集网页操作指令并发送的方式实现网页同步，即在操作端发生网页操作时，比如按钮点击，采集该操作形成网页操作指令并发送，在其它端通过JS对应执行该指令，获得与操作端触发按钮onclick事件一致的效果。

在以上步骤中，可选的，除针对原始网页的浏览与操作数据同步外，还包括音频数据、视频数据、涂鸦数据的发送与接收，其中，涂鸦数据可视同为一种网页数据进行处理，而音视频数据一般采用独立的通信通道。另外，在网页同屏交互过程中，所发送与接收的数据还包括针对同屏交互过程的控制数据，用于对交流过程中的控制权限、音频开关、视频开关、涂鸦开关、记录开关等进行控制，如，用户甲关闭音频后，其所在的用户端停止对音频数据的采集，同时发送其关闭音频的状态信息至其它端，以使得其它用户获悉该用户甲已静音或停止发言。

在同屏交互过程中，当一方通过涂鸦控制部件开启涂鸦，则在网页内创建一个用于涂鸦的Canvas元素(如图13中的虚线所示)，该Canvas元素位于原网页内容的上层(如通过z－index属性设置Canvas元素的堆叠顺序，使其位于最上层)，在开启涂鸦后当前同屏交互进入涂鸦模式，在该模式下，用户针对原网页的所有操作事件将被屏蔽，即在涂鸦模式下监听并拦截与涂鸦无关的其他网页操作，用户点击“退出涂鸦”退出涂鸦模式后，撤销对与涂鸦无关的其他网页操作的拦截，需要说明的是，涂鸦工作模式可选择对所有参与同屏交互的用户保持同步，即一个用户切换至涂鸦工作模式，所有用户均进入涂鸦工作模式，以防止一个用户在执行涂鸦，同时另一个用户执行网页操作而导致交互混乱，可选的，在涂鸦模式下，还包括与涂鸦相关的工具部件，如线条粗细、形状、涂鸦颜色设置等部件。

在同屏交互过程中通过过程录制按钮开启同屏交互操作过程录制，当开启后，采集参与交流的网页终端发送与接收的网页操作指令数据、网页内容数据、差异化网页数据内容、网页端的网页显示内容或发生改变的网页显示内容生成图片数据、基于涂鸦的Canvas元素生成的绘制数据、音频数据、视频数据中的一种或者多种，按照结构化存储生成同屏交互数据记录。

用户乙在同屏交互过程中，可选择通过操作退出交流部件，退出本次同屏交互。用户甲在同屏交互过程中，可通过关闭交流部件向服务端发送关闭同屏交互通知，并关闭本次同屏交互，可选的，向参与交流的其他网页客户端发送关闭同屏交互通知，当同屏交互关闭后，所有参与同屏交互的用户进入网页A的普通浏览状态。

以上步骤描述了一个基于网页为多个用户建立同屏交互的过程，但在互联网业务中，通过互联网进行交流与操作，经常涉及到重要的交流、交易等行为，记录用户之间的交流过程尤为重要，基于此，在以上步骤基础上，本申请还提供了一种记录同屏交互过程的方法，以下示例说明：

参与同屏交互的网页客户端与同屏交互服务端之间建立通信连接之后，还包括，采集网页终端发送与接收的网页操作指令数据、网页内容数据、差异化网页数据内容、基于网页端的显示内容或发生改变的显示内容所生成的图片数据或绘制数据、基于涂鸦的Canvas元素生成的绘制数据或图片数据、音频数据、视频数据中的一种或者多种，按照结构化存储生成同屏交互数据记录，以上采集数据可通过客户端采集或服务端采集实现，所采集的内容包括时间信息、操作者信息、操作终端信息、数据信息中的一种或者多种。

将以上生成的同屏交互数据记录，与所对应的网址、网页版本信息(从网页请求Header中可获得)、参与者信息中的一种或多种按照对应关系存储，生成为回放数据记录，回放数据记录主要用于还原同屏交互的整体过程。

将回放数据记录在服务端数据库中存放，当用户访问某一网页，执行网页加载时，从服务端获取对应的回放数据记录(如可通过网址、网页版本查询获取)，在网页中或网页链接入口处显示该数据记录，如图18示意；当存在多条回放数据记录时，点击“查看”，选择其中的一条回放数据记录，如图19示意，向服务端发送请求，获取对应的同屏交互数据记录，执行同屏交互过程的回放。

进入交流过程回放后，设置网页进入回放状态，生成相关回放控制部件，参考图20所示，如播放进度控制、暂停、快进、回退等，另外包括退出回放按钮。在回放状态下，用户对原网页内容的操作将被拦截(如：通过在网页内建立监听，当监听到用户对原网页内容的操作时，执行拦截处理)。当点击退出回放后，隐藏或去除相关回放部件，停止用户对原网页操作的拦截，即网页进入正常的浏览状态。

通过以上实现，一方面可记录用户同屏交互、操作网页的过程，生成交流证据；另一方面的用途是，例如一个单独的用户对网页进行示例操作或浏览，生成用于回放的数据，其他用户可通过观看回放，获取网页浏览与操作的过程，可用于浏览导引、操作示例等，类似于提供了一种新形式的网页操作帮助，另外包含音频、视频，具有多媒体解说效果。另外，使用该种方式记录的交流、讲解等，产生的有益效果还包括，其播放效果类似于视频，但因为采用记录网页操作过程数据的方式记录数据，所记录的数据量足够小、易存储，因通过在浏览器中还原网页浏览与操作的过程的方式执行回放，所以画面完全无损。另外，在网页版本一致的情况下，可利用网页当前已加载的网页元素，使用同屏交互数据记录包含的内容作为一个播放脚本，控制网页元素完成回放，节省网络流量。

在以上的进行网页同屏交互、生成与执行回放的实施例中，在具体实施时，优先采用在网页中引入JS库的方式实现，参考图21所示的一种网页内部结构示意图，在网页中包含同屏交互JS库211，即为引入的一个或多个JS库，其中JS库中包括以上在网页客户端中执行的生成同屏交互创建请求、接收同屏交互服务创建完成通知或连接、生成同屏交互环境、建立与同屏交互服务之间的通信连接、发送与接收同屏交互数据、在网页中生成入口链接、生成涂鸦部件、基于涂鸦生成绘制数据、建立音视频通信、控制音视频通信、采集同屏交互数据、同屏交互过程控制、生成同屏交互数据记录、生成回放数据、生成回放部件、执行回放中的一种或多种功能。另外，在网页中包含同屏交互配置212模块，该模块对网页进行相应的配置，如配置服务端的路径、配置同屏交互入口的显示位置、通信密钥等(可选的，在服务端包含配置信息，如配置可创建同屏交互服务的网址、网站内网页的层级关系与跳转关系等)。根据以上，在不改变原始网页内容213的情况下，即可实现本申请的快速实施。需要特别说明的是，以上同屏交互配置212模块的配置方式不唯一，如不在212模块中对网站内的网页的层级关系与跳转关系进行配置，而通过网站内的网页代码进行自动识别生成该配置。

另外需要说明的是，以上实施例以单一的网页同屏交互进行举例，在实际的实施场景中，可以基于多个能够相互跳转的网页，以及整个网站建立同屏交互。

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

Claims (10)

1.一种基于网页快速建立同屏交互的方法，所述方法应用于网页客户端，其特征在于，包括：

接收配置在网页客户端的网页浏览界面上的第一功能按钮的触发信号，在接收到所述触发信号后向服务端发送同屏交互创建请求，所述同屏交互创建请求的数据至少包含创建者信息、用于进行同屏交互的目标网址信息、浏览器信息、同屏交互设置信息中的一种，所述服务端用于接收网页客户端发送的同屏交互创建请求，并基于其创建同屏交互服务，生成相应的同屏交互连接信息，所述同屏交互连接信息为参与相应的同屏交互的网页客户端提供服务连接，其与用于创建同屏交互的目标网址信息为一对一关系；

接收所述同屏交互连接信息，或者，基于当前浏览网址从服务端查询获取到同屏交互连接信息；

基于所述同屏交互连接信息，建立所述网页客户端与所述同屏交互服务之间的通信连接；

在有操作权限的网页客户端监听网页操作，根据所述网页操作的性质采集数据生成对应类型的同屏交互数据向所述服务端发送；在无操作权限的网页客户端，接收所述服务端发送的同屏交互数据，根据所接收的同屏交互数据的类型，在所述网页客户端执行对应性质的网页操作，以实现与有操作权限的网页客户端之间的同屏交互。

2.如权利要求1所述的方法，其特征在于，接收所述同屏交互连接信息，或者，基于当前浏览网址从服务端查询获取到同屏交互连接信息后，还包括，基于所述同屏交互连接信息生成进入所述同屏交互的入口链接，其中，所述入口链接的生成方式包括，在所述同屏交互的目标网址对应的网页内生成入口链接，或者，基于网站内网页之间的浏览跳转关系，在与所述同屏交互的目标网址对应的网页相关联的网页内生成入口链接。

3.如权利要求1所述的方法，其特征在于，所述同屏交互的创建者或访问者进入同屏交互之后，还包括，在所述创建者或访问者的网页客户端，加载同屏交互控制部件，所述同屏交互控制部件包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程控制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的至少一个。

4.如权利要求1所述的方法，其特征在于，同屏交互过程中在所述网页客户端采集同屏交互数据向服务端发送以及接收服务端发送的同屏交互数据执行对应性质的网页操作，包括以下方式：

在有操作权限的网页客户端，基于用户执行的网页操作，采集数据生成网页操作指令数据，将所述网页操作指令数据作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的网页操作指令数据，执行其包含的网页操作指令，以还原有操作权限的网页客户端所发生的网页操作；

在有操作权限的网页客户端，监听网页数据内容的变化，采集网页内容数据或差异化网页数据内容作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的网页内容数据，基于其更新或替换所述网页客户端的网页数据内容，以使得网页数据与有操作权限的网页客户端保持一致；

在有操作权限的网页客户端，基于网页显示内容或发生改变的网页显示内容生成图片数据和/或绘制指令，将所述图片数据和/或绘制指令作为同屏交互数据发送；在无操作权限的网页客户端，接收所述服务端发送的图片数据和/或绘制指令，基于其在所述网页端显示或绘制图片、替换图片，以使得网页显示内容与有操作权限的网页客户端保持一致。

5.如权利要求3所述的方法，其特征在于，在进入同屏交互的网页客户端加载涂鸦控制部件，具体为，所述涂鸦控制部件至少包括涂鸦开关部件，当所述涂鸦开关部件开启时，控制所有参与交互的网页客户端进入涂鸦操作状态，并在其网页内生成用于涂鸦的Canvas元素，同时拦截与涂鸦操作无关的其他网页操作；当发生涂鸦操作时，基于发生在所述Canvas元素上的绘制操作生成绘制数据，将所述绘制数据作为所述同屏交互数据向所述服务端发送；还包括，接收所述服务端发送的绘制数据，基于其在所述Canvas元素上执行绘制操作；当所述涂鸦开关部件关闭时，隐藏或删除所述Canvas元素，放弃对与涂鸦操作无关的其他网页操作的拦截，控制所有参与交互的网页客户端退出涂鸦操作状态。

6.如权利要求3所述的方法，其特征在于，所述同屏交互的创建者或访问者在进入同屏交互之后加载音视频控制部件，具体为，所述音视频控制部件用于实现音视频的采集、播放、控制，包括声音播放开关、麦克风开关、视频播放开关、视频采集开关、音频与视频之间的切换开关中的一种或者多种，还包括，在加载所述音视频控制部件的同时，建立参与同屏交互服务的各网页客户端之间的音频和/或视频通信。

7.如权利要求1所述的方法，其特征在于，在基于所述同屏交互连接信息，建立参与交互的网页客户端与所述同屏交互服务之间的连接之后，还包括，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录，并为所述同屏交互数据记录增加数据索引，所述同屏交互数据记录用于同屏交互过程的回放，所述数据索引包括所述同屏交互对应的目标网址信息、网页数据、网页版本信息、参与者信息中的一种或多种。

8.如权利要求7所述的方法，其特征在于，在网页客户端，还包括，向服务端发送查询请求，获取与当前网址相关的同屏交互数据记录，基于其生成用于回放的入口链接并显示，以供其他访问者通过所述入口链接，获取相应的同屏交互数据记录，执行相应同屏交互过程的回放。

9.一种基于网页快速建立同屏交互的***，所述***用于网页客户端，其特征在于，所述***包括：

创建模块，用于基于创建者信息、目标网址信息、浏览器信息、同屏交互设置信息中的一种或者多种，生成同屏交互创建请求；还用于生成访问者进入同屏交互的入口链接；

加载模块，用于加载同屏交互控制部件，包括操作权限控制部件、涂鸦控制部件、音视频控制部件、同屏交互过程控制部件、同屏交互过程录制部件、同屏交互状态信息显示部件、同屏交互用户信息显示部件中的一种或多种；

通信模块，用于与所述服务端建立通信连接，包括发送同屏交互创建请求、查询同屏交互服务、接收同屏交互服务信息、发送与接收同屏交互数据；

控制模块，用于执行操作权限分配，控制同屏交互过程；

涂鸦模块，用于执行涂鸦绘制、采集涂鸦数据、基于涂鸦数据执行绘制；

音视频模块，用于采集、发送、接收、播放音视频数据，包括音视频播放控制；

数据采集模块，用于采集网页操作指令数据、网页内容数据或差异化网页数据、网页显示内容所生成的图片数据或绘制数据、涂鸦绘制数据、音频数据、视频数据中的一种或者多种，生成同屏交互数据。

10.如权利要求9所述的基于网页快速建立同屏交互的***，其特征在于，所述网页客户端，还包括：

所述创建模块，还包括，基于目标网址，从服务端获取相应的回放记录数据，生成可供访问者执行回放的入口链接；

记录模块，记录参与交互的网页客户端发送或接收的同屏交互数据、同屏控制数据、音视频数据中的一种或者多种，以及对应的发生时间信息，将一次同屏交互过程所采集的数据、对应的发生时间信息按照结构化存储生成同屏交互数据记录；

回放模块，基于同屏交互数据记录，执行相应同屏交互过程的回放。

Images