CN113868575A - 一种网页同屏方法与*** - Google Patents

Abstract

本申请提供了一种网页同屏方法、***，所述***包括服务端、客户端，所述方法包括：服务端接收同屏创建请求，在服务端浏览器实例中加载目标网页生成目标网页实例，并注入第一脚本、启动页面监听，在网页加载完成或监听到网页内容变化后，序列化网页DOM生成同屏数据，或将网页内容在Canvas上绘制并获取Canvas数据生成同屏数据，或将网页的显示内容生成图片作为同屏数据，将同屏数据向客户端发送，另外，接收客户端发送的网页操作事件在服务端浏览器实例中执行。可见，本申请在客户端浏览同屏网页、收集操作事件，在服务端实际执行网页，将执行结果发送至客户端渲染，可实现对任一网页或网址快速同屏，具有适用性强、实施快、稳定性高的优势。

Description

一种网页同屏方法与***

技术领域

本发明涉及互联网通信技术领域，尤其涉及一种网页同屏方法与***。

背景技术

网页同屏利于网站访问者通过网站直接互动交流，大大提升了沟通效率。

但现有的网页同屏技术，存在诸多问题，例如：实现网页同屏需要定制开发，编写专门的同屏程序，实施成本高；部分同屏技术采用引入同屏库的方式实现，同样需要修改网页程序、部署网站等步骤，无法做到对任意页面拿来即用，故实施效率低；局限于对单页面的同屏,或网页跳转后存在同屏业务中断、重新连接现象，如在同屏过程中包含音视频通信，则在页面跳转时同样存在音视频中断问题,效果较差；同屏过程新用户加入不能即时同步到当前的同屏状态,或者需要所有客户端同时刷新页面，从头开始同屏，体验较差；在同屏过程中不能实时录制，需等待同屏完成才能录制，等待时间长；在多个设备之间同屏，受设备差异性限制,各终端显示不一致,导致涂鸦错位，影响交流；针对同屏网页中的一个操作，会对应所有客户端执行多次,即一个操作会发送多次请求，导致程序运行混乱严重问题；如在同屏网页中存在Canvas，在同屏过程中会产生大量数据,阻塞通信。

因此，考虑现有网页同屏技术中存在实施成本高、效率低问题，且同屏效果、用户体验均存在问题，同时容易导致网络问题与运行错误，亟需提出一种新的网页同屏实现方法，解决以上问题。

发明内容

针对上述问题，本发明提供一种网页同屏的方法与***，旨在高效、快捷的基于任何网页快速建立同屏交流，同时解决现有技术在实现网页同屏时存在的网页跳转导致同屏业务中断与音频中断、用户实时加入体验差、不能实时录制、涂鸦错位、多个网页请求重复执行、Canvas同步时网络阻塞等问题。本发明提供的技术方案如下：

第一方面，本申请提供了一种网页同屏方法，所述方法应用于服务端，所述方法包括：

在所述服务端创建一个浏览器实例，在所述浏览器实例中加载目标网页，生成目标网页实例，在所述目标网页实例中注入第一脚本，并启动页面监听；

在所述目标网页实例内容加载完成或者监听到所述目标网页实例内容发生变化后，序列化所述目标网页实例DOM生成序列化后的DOM数据，将所述序列化后的DOM数据作为同屏数据向所述客户端发送，或者，将所述目标网页实例显示内容在第一Canvas上执行绘制，基于所述第一Canvas获取Canvas数据，将所述Canvas数据作为同屏数据向所述客户端发送，或者，基于所述目标网页实例显示内容生成图片数据，将所述图片数据作为同屏数据向所述客户端发送；

还包括：

接收所述客户端发送的网页操作事件，执行其包含的网页操作；

其中，所述目标网页为用于同屏的网址或网页文件；所述第一脚本至少包括启动页面监听、DOM序列化处理和/或第一Canvas绘制与获取Canvas数据和/或生成图片数据、基于接收的网页操作事件执行网页操作功能；所述Canvas数据包括基于所述第一Canvas的绘制生成绘制数据或基于所述第一Canvas显示内容生成图片数据；所述客户端通过访问同屏网页实现对所述目标网页实例内容的同屏浏览与操作。

通过本实施例提供的方案，对于用户需要同屏的目标网页，在服务端提供所述目标网页的浏览执行环境，将执行结果以序列化后的DOM数据、或Canvas数据、或图片数据的方式提供给进行同屏交流的客户端，在所述客户端采集网页操作事件但不执行，而发送至服务端的浏览执行环境执行，由此，保证了在同屏过程中仅有一个执行端，所有参与同屏的客户端均为执行端内容的镜像，确保同屏内容的准确性，且可针对任何网页进行快速实施，无需修改页面，实施成本低。

在本申请的一种实现方式中，在所述服务端，将预先制作的网页配置为同屏网页，或者，基于所述目标网页实例信息计算生成所述同屏网页；基于所述同屏网页的网址，和/或，所述同屏网页与所述目标网页实例之间的对应关系生成同屏网页链接；根据所述目标网页实例，向所述客户端返回对应的所述同屏网页链接。

在该实现方式中，无论采用预先制作好的网页作为同屏网页，还是为目标网页实例计算生成专用的同屏网页，都必须在在所述同屏网页中包含第二脚本，所述第二脚本至少包括接收与处理所述同屏数据、采集与发送网页操作事件功能。

在该实现方式中，还包括并建立所述目标网页实例与所述同屏网页之间的对应关系，返回用于访问所述同屏网页的同屏网页链接，所述同屏网页链接包括同屏网页网址、参数信息中的一种或者多种，所述对应关系为，每一个目标网页实例，存在一个同屏网页与之对应，或者，存在一个同屏网页和参数组合与之对应，也即，每一个目标网页实例，均存在一个同屏网页链接与之对应。

在该实现方式中，将预先制作的网页配置为同屏网页，所述同屏网页对应于多个目标网页并提供服务，所述同屏网页链接中包含参数信息，所述第二脚本基于所述参数信息计算识别与之对应的所述目标网页实例；基于所述目标网页实例信息计算生成所述同屏网页，所述同屏网页对应于所述目标网页实例并提供服务。

通过以上实现方式，为需要同屏交流的目标网页，分配或创建同屏网页以及参数，并建立同屏网页与目标网页实例之间的对应关系，生成同屏网页链接，以便客户端访问，进入同屏交流。

在本申请的一种实现方式中，所述浏览器为无头浏览器(Headless browser)。通过使用无头浏览器，实例化Tab以创建浏览器实例，运行所述目标网页，节省服务端计算资源且增加程序控制的灵活性。

在本申请的一种实现方式中，在所述服务端浏览器加载所述目标网页，注入所述第一脚本之后，还包括：

在所述服务端对应实例化同屏服务实例；

所述同屏服务实例接收所述服务端浏览器实例发送的同屏数据，向所述客户端发送；所述同屏服务实例接收所述客户端发送的所述网页操作事件，向所述服务端浏览器实例发送；

其中，在所述目标网页实例，通过所述第一脚本执行，建立与所述同屏服务实例之间的通信连接；在所述同屏网页，通过所述第二脚本执行，建立与所述同屏服务实例之间的通信连接。

通过以上实现方式，通过所述同屏服务实例连接同屏的执行端与浏览操作端，便于对一个网页同屏的集中管理与控制。

在本申请的一种实现方式中，基于所述目标网页实例生成同屏数据，还包括以下方式：将所述目标网页实例中发生变化的DOM节点序列化处理，生成序列化后的DOM数据，将所述序列化后的DOM数据生成为所述同屏数据；或者，基于所述第一Canvas的变化，将两次变化之间的差异化部分生成差异化图片数据，将所述差异化图片数据生成为所述同屏数据；或者，基于所述第一Canvas的变化生成绘制数据，将所述绘制数据生成为所述同屏数据；或者，基于所述目标网页实例显示内容发生变化的部分生成差异化图片数据，将所述差异化图片数据生成为所述同屏数据。

通过以上实现方式，通过采集增量数据或差异化数据的方式，在通信过程中降低传输数据量，提高同屏效率。

在本申请的一种实现方式中，所述服务端接收所述客户端发送的客户端浏览器和/或***参数信息，基于所述客户端浏览器和/或***参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数，基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例。还包括，所述服务端监听到所述客户端断开连接事件，当确认所述客户端不是最后一个客户端时，根据剩余在连接的所述客户端的浏览器和/或***参数信息，基于客户端浏览器参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数，基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例。

通过以上实现方式，例如，在每次客户端加入同屏交流或者断开，基于参与同屏交流的客户端的浏览器尺寸计算目标网页执行端的最佳尺寸，可解决因客户端浏览器大小不一，差异过大导致的显示问题，使所有客户端均可获得正确的显示效果。因此，以上实现方式在最大程度上解决了设备兼容性问题。

在本申请的一种实现方式中，监听或判断所述服务端浏览器实例中的目标网页实例发生网页跳转；当确认所述目标网页实例发生网页跳转后，将所述跳转后的网页作为新的目标网页，在所述浏览器中加载新目标网页，生成新目标网页实例；在所述新目标网页实例中注入所述第一脚本。

结合以上实现方式，还包括，设定原目标网页实例对应的同屏服务实例与所述新目标网页实例之间的对应关系，或者，对应于所述新目标网页实例创建新的同屏服务实例，并记录所述新的同屏服务实例与原目标网页实例对应的同屏服务实例之间的关系，所述关系等同于所述原目标网页实例与所述新目标网页实例之间的关系。

通过以上实现方式，实现了在同屏过程中发生网页跳转，但同屏业务保持连续，同屏过程不中断，获得较好的用户体验。

在本申请的一种实现方式中，所述服务端浏览器实例中的目标网页实例发生网页跳转后，设定原目标网页实例对应的同屏服务实例继续为所述新目标网页实例提供同屏服务，且该同屏服务实例对应的所述同屏网页链接保持不变，由此，在目标网页实例中发生网页跳转的情况下，客户端访问的同屏网页不会发生网页跳转。

以上实现方式可获得的有益效果是，在同屏网页中包含音视频通信服务，在目标网页实例中发生网页跳转时，所述音视频通信仍保持连续通信状态。

在本申请的一种实现方式中，存储所述同屏数据及对应的时间信息，和/或，从所述客户端接收的网页操作事件及对应的时间信息，生成同屏过程录制数据。

以上实现方式中，所述同屏过程录制数据用于同屏交互过程回放，按照所述时间信息，在所述同屏网页中接收并处理所述同屏数据，和/或，接收网页操作事件并模拟网页操作，执行同屏交互过程回放。

通过以上实现方式，实现了在同屏过程中实时录制数据，存储交流过程。

在本申请的一种实现方式中，在所述目标网页实例接收到切换至涂鸦工作模式指令；基于所述目标网页实例当前页面内容生成图片数据，或者，将所述目标网页实例当前页面内容在Canvas上执行绘制并获取Canvas数据；将所述图片数据或所述Canvas数据生成为同屏数据向所述客户端发送。

以上实现方式中，所述图片数据或所述Canvas数据用于所述客户端接收，并用于生成涂鸦背景，并以所述涂鸦背景尺寸、位置信息作为相对参考，采集与绘制涂鸦数据。

通过以上实现方式，确保在同屏交流进入涂鸦工作模式后，所有客户端显示的画面与所述服务端目标网页实例画面完全保持一致，为执行同步涂鸦提供基础，避免因设备而导致的显示差异、涂鸦错位问题。

在本申请的一种实现方式中，监听所述目标网页实例中的Canvas元素，当监听到变化后，缓存所述Canvas元素的Canvas数据，暂不做通信处理，并启动按照时钟周期监听，在下一时钟周期结束，判断是否接收到所述Canvas元素变化，当确认未接收到所述Canvas元素变化时，发送所述同屏数据并清空缓存数据，当确认接收到所述Canvas元素变化时，缓存当前所述Canvas元素的Canvas数据。其中，所述Canvas元素的变化包括但不限于Canvas元素的属性变化、Context事件执行。

通过以上实现方式，通过缓存Canvas数据的方式，避免了包含Canvas元素且在网页加载时存在大量Canvas绘制操作的目标网页在加载时因Canvas事件过多而导致的网络阻塞问题。

第二方面，本申请提供了一种网页同屏方法，所述方法应用于客户端，包括：

访问同屏网页链接，加载所述同屏网页；

接收所述服务端发送的同屏数据，解析其包含的序列化后的DOM数据，基于所述序列化后的DOM数据更新或替换所述同屏客户端网页DOM内容，或者，解析其包含的Canvas数据，在所述同屏客户端网页中创建第二Canvas，基于所述Canvas数据在所述第二Canvas上显示图片或执行绘制，或者，解析其包含的图片数据，基于所述图片数据显示图片；

还包括：

监听所述客户端中发生的网页操作事件，在所述客户端中不做处理，并将所述网页操作事件向所述服务端发送；

其中，所述同屏网页包含第二脚本，所述第二脚本至少包括与所述服务端建立通信连接、接收与处理所述同屏数据、采集与发送所述网页操作事件功能。

通过本实施例提供的方案，在客户端显示同屏内容，收集网页操作事件但不执行，而发送至服务端实际执行，由此实现了同屏过程的执行与显示相分离，多端同屏浏览，执行统一的同屏工作模式。

在本申请的一种实现方式中，在所述客户端切换至涂鸦工作模式时，接收所述服务端发送的基于目标网页实例中网页内容生成的图片数据或Canvas数据，在所述客户端显示所述图片数据或基于所述Canvas数据执行绘制，生成涂鸦背景内容；以所述涂鸦背景尺寸、位置信息作为相对参考，采集与绘制涂鸦数据，即基于涂鸦Canvas采集Canvas数据发送，接收涂鸦Canvas数据，在所述涂鸦Canvas上执行绘制，实现涂鸦交流。

通过以上实现方式，使客户端在涂鸦工作模式下的内容画面与服务端浏览器实例中的画面内容完全保持一致。

在本申请的一种实现方式中，基于所述客户端采集浏览器参数信息和/或***参数信息，向所述服务端发送，所述浏览器参数信息和/或***参数信息用于所述服务端计算所述目标网页实例、浏览器实例的设置参数。其中，所述浏览器参数信息包括但不限于分辨率、浏览器视口大小等。

通过以上实现方式，发送客户端浏览器参数信息或***参数信息，以便服务端进行统一计算，使得服务端的运行、渲染结果兼容所述客户端浏览器或***，例如，通过以上客户端发送浏览器尺寸至服务端，服务端计算获得最佳的目标网页实例尺寸并设置，最终使所有参与同屏交流的客户端均可获得正确的显示效果。

在本申请的一种可能的实现方式中，监听所述客户端中发生的网页操作事件并向所述服务端发送，还包括：

当确定监听到指定类型的网页操作事件时，在本地执行所述网页操作事件，并将所述网页操作事件同时发送至所述服务端浏览器实例、参与同屏的其它客户端；

还包括：

接收所述指定类型的网页操作事件，在所述客户端执行，并接收对所述指定类型的网页操作事件的执行结果通知，基于所述执行结果通知执行校正操作。

通过以上实现方式，将一些特定类型的网页事件，如touch、scroll等同步发送至其他客户端同时执行，降低延时且提升同屏效率。同时，基于服务端的目标网页实例的执行结果进行校正，保证同屏最终结果的正确性。

在本申请的一种可能的实现方式中，当确定所述网页操作触发的事件为调用本地***或本地游览器的操作时，将所述事件同时传至本地***或本地浏览器处理，在其处理结束后触发本地调用完成事件，在所述本地调用完成事件中向所述服务端发送所述网页操作事件，其中，在所发送的网页操作事件中包括本地的执行结果信息。

通过以上实现方式，在网页操作触发的事件为调用本地***或游览器的操作时，避免所有客户端均执行本地操作而发生混乱，同时有利于保护客户端隐私，获得一致的同屏执行结果。

第三方面，本申请还提供了一种网页同屏***，包括服务端、客户端。

所述服务端，包括创建单元、浏览操作执行单元、同屏服务单元，具体如下：

所述创建单元，用于接收同屏创建请求，基于所述同屏创建请求创建浏览器实例与同屏服务实例，包括同屏请求处理模块，其中：

所述同屏请求处理模块，配置为接收同屏创建请求，基于其包含的目标网页网址信息，通知所述浏览操作执行单元在服务端浏览器中实例化一个Tab，加载目标网页生成目标网页实例，并通知所述同屏服务单元创建相应的同屏服务实例；

所述浏览操作执行单元，用于管理服务端浏览器，在所述服务端创建浏览器实例，在所述浏览器实例中执行目标网页浏览与操作，包括加载模块、通信模块、DOM数据采集模块/Canvas内容处理模块/图片数据采集模块、网页操作事件执行模块，其中：

所述加载模块，配置为加载所述目标网页生成目标网页实例，在所述目标网页实例中注入第一脚本，并启动页面监听；

所述通信模块，配置为与对应的所述同屏服务实例建立通信；

所述DOM数据采集模块，配置为在监听到所述目标网页实例内容发生改变后，将所述目标网页实例DOM序列化处理，生成序列化后的DOM数据向所述同屏服务实例发送；所述Canvas内容处理模块，配置为将所述目标网页实例的网页内容在第一Canvas上执行绘制，基于所述第一Canvas生成Canvas数据向所述同屏服务实例发送；所述图片数据采集模块，配置为基于所述目标网页实例的显示内容生成图片数据，将所述图片数据作为同屏数据向所述客户端发送；

所述网页操作事件执行模块，配置为执行从所述客户端接收的网页操作事件；

所述同屏服务单元，用于创建与管理同屏服务实例，所述同屏服务实例对应于所述目标网页实例，所述同屏服务实例为参与同屏的客户端提供数据通信、控制服务，包括同屏数据发送模块、网页操作数据接收模块，其中：

所述同屏数据发送模块，配置为向所述客户端发送所述同屏数据；

所述网页操作数据接收模块，配置为接收所述客户端发送的网页操作事件数据；

所述客户端，用于访问所述同屏网页链接，执行其对应的所述目标网页实例的同屏，包括通信模块、DOM数据处理模块/Canvas数据处理模块/图片数据显示模块、网页操作事件采集模块，其中：

所述通信模块，配置为与对应的所述同屏服务实例建立通信；

所述DOM数据处理模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的序列化后的DOM数据，基于所述序列化后的DOM数据更新或替换所述同屏客户端网页DOM内容；

所述Canvas处理模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的Canvas数据，在所述同屏客户端网页中创建第二Canvas，基于所述Canvas数据在所述第二Canvas上显示图片或执行绘制；

所述图片数据显示模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的图片数据，基于所述图片数据显示图片；

所述网页操作事件采集模块，配置为监听所述客户端中发生的网页操作事件，在所述客户端中不做处理，并将所述网页操作事件向所述同屏服务实例发送。

在本申请的一种实现方式中，在所述***中，还包括生成所述浏览器实例、所述同屏服务实例、所述客户端之间的对应关系，其中，在同一时刻，所述浏览器实例对应于一个所述同屏服务实例，所述同屏服务实例为多个所述客户端提供对应于所述目标网页实例的同屏网页的同屏服务。还包括，基于预置的同屏网页，为所述目标网页实例计算并返回对应的同屏网页链接，或者，对应于所述目标网页实例创建网页文件并增加所述第二脚本生成所述同屏网页，返回所述同屏网页链接。

在本申请的一种可能的实现方式中，所述浏览操作执行单元或所述同屏服务单元，还包括录制模块，所述录制模块采集所述同屏数据及对应的时间信息、从所述客户端接收的网页操作事件及对应的时间信息并存储，生成同屏过程录制数据。

在本申请的一种可能的实现方式中，所述客户端还包括运行环境信息采集模块，所述同屏服务实例还包括运行环境参数计算模块，所述浏览器操作执行单元还包括运行环境参数设置模块，其中：

所述运行环境信息采集模块，配置为采集客户端浏览器和/或***参数信息，向所述服务端发送；

所述运行环境参数计算模块，配置为基于参与一次同屏的所有所述客户端浏览器和/或***参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数；

所述运行环境参数设置模块，配置为基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例。

在本申请的一种可能的实现方式中，所述浏览操作执行单元还包括网页内容图像采集模块，所述客户端还包括涂鸦处理模块，其中：

所述网页内容图像采集模块，配置为在接收到切换至涂鸦工作模式指令后，基于所述目标网页实例当前页面内容生成图片数据或Canvas数据；

所述涂鸦处理模块，配置为接收所述网页内容图像采集模块生成的图片数据或Canvas数据，在所述客户端显示所述图片数据或基于所述Canvas数据执行绘制，生成涂鸦背景内容。

综合以上，本发明的实现原理是：在客户端收集事件，由服务端执行并返回结果给客户端，客户端渲染最终结果实现同屏。因此，本发明实现了执行环境与浏览操作环境的完整分离，至少具有如下有益效果：在服务端构建网页的执行环境，便于统一执行网页操作和同屏过程的控制，避免程序运行混乱；在客户端显示同屏结果与收集操作事件，便于保护客户端隐私；基于服务端处理的灵活性，可实现针对任何网页进行快速同屏，无需对同屏网页进行修改，拿来即用，大大降低实施成本；基于服务端对一次同屏交流的统一管理，解决现有技术中的页面跳转中断、音视频通信中断、涂鸦错位等问题。可见，本申请提供的网页同屏方法与***，实施成本低，效率高，且准确性、适用性、用户体验方面均有提升。

附图说明

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

图2为本申请实施例提供的一种网页同屏方法的结构示意图；

图3为本申请实施例提供的一种网页同屏方法的交互流程示意图；

图4为本申请实施例提供的一种网页同屏方法的交互流程示意图；

图5为本申请实施例提供的一种网页同屏方法的处理网页跳转的流程示意图；

图6为本申请实施例提供的一种网页同屏方法的录制数据的流程示意图；

图7为本申请实施例提供的一种网页同屏方法的交互流程示意图；

图8为本申请实施例提供的一种网页同屏方法的同步Canvas的流程示意图；

图9为本申请实施例提供的一种网页同屏方法的交互流程示意图；

图10为本申请实施例提供的一种网页同屏方法的交互流程示意图；

图11为本申请实施例提供的一种网页同屏***的架构示意图；

图12为本申请实施例提供的一种网页同屏***的架构示意图。

具体实施方式

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

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

以下，对本申请中部分用语进行解释说明，以便本领域技术人员理解。

1)目标网页，指用于进行同屏交流的网页，即用户有针对于某一网页或者网址进行同屏交流的需求，使用本申请提供的方法实现同屏交流，则定义该网页或网址为目标网页。

2)目标网页实例，指在服务端浏览器实例中加载、运行的目标网页，例如，N组用户针对一个目标网页分别进行同屏交流，则需在服务端创建N个浏览器实例，分别载入所述目标网页，同时生成N个目标网页实例。

3)同屏网页、客户端，用户针对某目标网页进行同屏交流，通过在客户端访问同屏网页链接进入，实现同屏交流之目的。所述同屏网页与目标网页的链接不同，但其在运行时，实时载入目标网页的显示内容以实现同屏效果。访问同屏网页的客户端，即为客户端。

4)同屏服务，执行同屏业务逻辑计算，在同屏过程中，为客户端运行的同屏网页、目标网页实例提供同屏业务相关的数据通信、指令传输服务。

5)和/或，描述关联对象的关联关系表示可以存在三种关系，例如，A和/或B，可以表示:单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

本申请提供了一种网页同屏方法，实现原理在于：在客户端浏览器操作，在服务端浏览器执行，实现网页的显示与执行相分离，将客户端浏览器、服务端浏览器实例与同屏服务实例相组合，逻辑上形成一个完整的浏览器，提供多方客户端进行同屏交流。请参考图2所示的本申请实施例提供的一种网页同屏方法的结构示意图，同屏创建请求处理单元接收到同屏创建请求，所述同屏创建请求即要求基于某网页或网址创建同屏交流，其至少包含目标网页的网页或网址信息。所述同屏创建请求处理单元处理所述同屏创建请求，包括：创建一个服务端浏览器实例1以运行目标网页；同时对应创建一个同屏服务实例1以提供同屏服务；返回对应的同屏网页链接(包含网址和/或参数)，供客户端访问。通过以上步骤，实现客户端访问同屏网页，针对目标网页进行同屏交流，其中，所述浏览器实例1为目标网页的实际执行环境，客户端A、B等为目标网页的内容浏览、操作事件收集环境，由此，实现网页在所述浏览器实例1中实际执行，且在客户端A、B收集操作事件和显示同屏结果的同屏交流效果。

以下，结合图1所示的流程示意图，说明本申请在服务端的一种可能的实施步骤，示例步骤如下：

S101，在所述服务端创建一个浏览器实例，加载目标网页，生成目标网页实例；

S102，在所述目标网页实例中注入第一脚本，在所述服务端对应实例化同屏服务实例，并在所述目标网页实例启动页面监听；

S103，在所述目标网页实例内容加载完成或者监听到所述目标网页实例内容发生变化后，序列化所述目标网页实例DOM生成序列化后的DOM数据向客户端发送，或者，将所述目标网页实例显示内容在Canvas上执行绘制并获取Canvas数据向所述客户端发送，或者，基于所述目标网页实例显示内容生成图片数据向所述客户端发送；

S104，所述同屏服务实例接收所述客户端发送的网页操作事件，执行其包含的网页操作。

如上所述，S101在所述服务端创建一个浏览器实例，如在服务端浏览器实例化一个Tab，所述浏览器实例为目标网页提供执行环境。S102中所述第一脚本包括但不限于启动页面监听、DOM序列化处理和/或第一Canvas绘制与获取Canvas数据和/或生成图片数据、基于接收的网页操作事件执行网页操作功能。在所述服务端对应实例化同屏服务，等价于创建一个同屏服务实例。S103在执行环境中采集同屏内容数据，方式包括但不限于：序列化后的DOM数据、借助Canvas绘制网页内容并获取Canvas数据、采集目标网页实例显示内容生成的图片数据等，所述Canvas数据包括基于所述第一Canvas的绘制生成绘制数据或基于所述第一Canvas显示内容生成图片数据。可选的，在服务端获取浏览器实例的显示画面生成图片数据作为同屏数据发送。客户端通过访问同屏网页链接实现对所述目标网页实例网页内容的同屏浏览与操作，步骤S104接收到客户端的操作后，在所述浏览器实例中实际执行。

在本申请实施例中，浏览器实例运行目标网页，客户端浏览同屏网页，同屏服务实例为两者提供同屏数据、控制服务，对应于一个同屏创建请求，浏览器实例运行目标网页生成一个目标网页实例，对一个目标网页实例，均存在一个同屏服务实例、同屏网页链接与之对应，所述数据发送与接收均约束于所述对应关系。需要特别说明的是，以上创建浏览器实例与创建同屏服务实例的实现顺序无特别限定，在具体实现时，可以同时执行，或者，也可根据预设的顺序执行。另外需要说明的是，在本申请实施例中，针对一个网页或网址可创建多个同屏交流，但对每个同屏交流，均需为其创建一个浏览器实例，拥有独立的执行环境；且为每个同屏交流创建一个独立的同屏服务实例；每个同屏交流所对应的同屏网页链接不同，通过不同的网址或参数进行区分。

以下，结合图3所示的交互流程示意图，说明本申请提供的网页同屏方法的一种可能的实施步骤，如图所示，在所述服务端包括：创建单元，用于接收与处理同屏交流创建请求；浏览操作执行单元，用于创建浏览器实例运行目标网页，也即同屏交流中网页的实际执行环境；同屏服务单元，用于为所述目标网页实例、同屏网页提供同屏交流数据、控制服务，也即同屏交流的服务单元；另外在示例中包括一个客户端：客户端1，用于浏览与操作同屏网页，也即同屏交流中网页的浏览与操作环境，主要步骤如下：

在所述同屏请求处理单元：

S301，接收同屏创建请求；

S302，处理同屏创建请求，创建或配置同屏网页；

S303，发送目标网页网址、浏览器实例创建参数等；

S304，发送同屏服务实例创建参数等；

S305，发送同屏网页链接；

在所述浏览操作执行单元：

S306，创建浏览器实例，实例化一个Tab；

S307，加载目标网页；

S308，注入第一脚本；

S309，启动监听；

S310，加载完成，序列化所述目标网页实例DOM生成序列化后的DOM数据，并基于所述序列化后的DOM数据生成同屏数据；

在同屏服务单元：

S311，创建同屏服务实例；

在客户端1：

S312，访问同屏网页；

S313，运行第二脚本；

在所述浏览操作执行单元：

S314，发送同屏数据；

在同屏服务单元：

S315，发送同屏数据；

在客户端1：

S316，解析同屏数据包含的序列化后的DOM数据，基于其更新DOM；

S317，采集网页操作事件，不执行，生成同屏数据；

318，发送同屏数据

在同屏服务单元：

S319，发送同屏数据；

在所述浏览操作执行单元：

S320，接收网页操作事件，执行网页操作；

S321，监听到网页内容改变，序列化改变的DOM节点生成序列化后的DOM数据，并基于序列化后的DOM数据生成同屏数据；

S322，发送同屏数据；

在同屏服务单元：

S323，发送同屏数据；

S324，解析同屏数据包含的DOM字符串数据，基于其替换DOM。

在以上步骤中，S301接收同屏创建请求，所述请求中至少包括用于创建同屏交流的网页文件、网址、可转化为网页的文件、图片信息中的一种。可选的，在所述同屏创建请求中，基于可转化为网页的文件或图片创建同屏交流，则在S302步骤中，还应包括将所述创建请求中的文件、图片等转化为网页文件，生成目标网页并存储和分配相应的网址等处理。S302处理同屏创建请求，其目的在于配置本次同屏交流的执行环境、服务环境、生成客户端浏览的同屏网页链接，因此，在S302处理结束后分别执行S303发送数据至浏览操作执行单元、执行S304发送数据至同屏服务单元、S305发送同屏网页链接至客户端。需要说明的是，本申请中的所述发送数据，包括先接收请求然后返回数据的方式。

结合以上实施例的一种可能的实现方式中，在所述同屏服务单元中配置同屏交流的执行环境、服务环境、生成同屏链接，主要区别在于，S302处理创建同屏网页请求后，不执行S303、S305，仅执行S304发送同屏服务实例创建参数等数据至同屏服务单元，在所述同屏服务单元，执行S311生成同屏服务实例，且生成本次同屏交流的浏览器实例配置数据发送至浏览操作执行单元，生成同屏网页链接返回至客户端。

需要说明的是，以上两种配置执行环境、服务环境以及生成同屏网页链接的方式仅用于说明本申请的实现原理，在具体实施时还存在多种变换与组合方式，或一些模块中的部分功能可在其他模块中实现或被替换，例如，在以上步骤S308注入第一脚本首次发送连接请求至同屏服务单元，在所述连接请求信息中携带所述同屏服务实例创建参数信息，所述同屏服务单元基于连接请求信息创建同屏服务实例并启动服务。

以上实施例相关一次同屏交流请求的执行环境、服务环境、浏览操作环境配置完成后，在浏览操作执行单元，执行S306-S310步骤创建浏览器实例并加载目标网页等操作，其中，S308注入的所述第一脚本，包括但不限于与同屏服务实例建立通信连接、启动页面监听、DOM序列化处理、还原执行网页操作等功能，在该步骤执行后即建立目标网页实例与对应的同屏服务实例之间的通信连接，S309启动页面监听，所述监听用于监听目标网页实例中网页内容发生的变化，包括DOM变化等，另外，S309、S310的执行顺序无特别限定。基于本申请的实现原理，所述执行环境用于产生目标网页的执行结果，所述执行结果包括DOM数据与网页显示图像两种方式，因此，可选的，S310可替换为：将所述目标网页内容在第一Canvas上执行绘制，基于所述第一Canvas获取Canvas数据，将所述Canvas数据作为同屏数据的方式，其中，所述Canvas数据包括基于所述第一Canvas的绘制生成绘制数据或基于所述第一Canvas显示内容生成的图片数据，如基于当前页面显示内容生成Base64数据、用于在Canvas上绘制当前页面显示内容的绘制指令数据等。可选的，S310还可替换为：基于所述目标网页实例显示内容生成图片数据，将所述图片数据作为同屏数据的方式，其中，所述图片数据包括但不限于图片文件、Base64数据等。

结合以上实施例在执行环境中的相关步骤，说明本申请实施例优点。对比传统网页同屏技术，需对网页本身进行修改、部署，或者在运行环境(客户浏览器)安装插件，但以上两种方式会产生实施成本或增加用户使用难度。在本申请中，采用服务端控制网页执行环境的方式实现，因而灵活性、可控性大大增强，比如，在服务端创建浏览器实例、在页面中注入第一脚本、刷新页面、控制跳转页面等，均得利于这一实现方式。

以上实施例中，同屏服务单元中的同屏服务实例接收服务端浏览器实例发送的同屏数据，并发送至参与同屏的客户端。客户端1通过S312、S313加载同屏网页并运行所述第二脚本，所述第二脚本包括但不限于建立与同屏服务实例之间的通信、接收所述同屏数据、处理所述同屏数据、采集网页操作事件、发送所述网页操作事件等功能。

在所述客户端1接收到所述序列化后的DOM数据后，解析所述序列化后的DOM数据并更新同屏网页DOM，获得与所述目标网页实例一致的显示效果。可选的，在所述客户端1接收到所述Canvas数据后，基于所述Canvas数据的类型，在image元素中显示图片数据，或者，在Canvas元素中显示图片或执行相应绘制，同样获得与所述目标网页实例一致的显示效果。可选的，在所述客户端1接收到所述图片数据后，基于所述图片数据显示图片。需要说明的是，以上实施例以一个客户端(即客户端1)为例阐述本申请的实现原理，在具体的实施场景中，存在一个或多个类似于客户端1的客户端。

在所述客户端1中发生用户执行的网页操作后，S317采集所述网页操作事件，但不在该客户端中执行，即在客户端监听操作事件,包括但不限于touch、click、input、change、scroll等,在监听到网页操作事件后直接发送给同屏服务单元而不在客户端做任何执行处理。以上在浏览操作环境中的处理方式，体现了本申请中网页的执行、显示(另包括操作)相分离的实现原理。

步骤S317所采集的网页操作事件，最终直接或间接发送至目标网页执行环境中，在S320实际执行，然后S321监听并获取执行结果，生成同屏数据发送至网页同屏客户端，所述客户端执行S324获得与执行端目标网页实例显示一致的同屏效果。优选的，S321将所述目标网页实例中发生变化的DOM节点序列化，生成序列化后的DOM数据作为增量数据，将所述增量数据作为所述同屏数据发送。可选的，S321基于所述第一Canvas的变化，将两次变化之间的差异化部分生成差异化图片，将所述差异化图片数据生成为所述同屏数据。可选的，S321基于所述目标网页实例显示内容发生变化的部分生成差异化图片数据，将所述差异化图片数据生成为所述同屏数据。

在一种可能的实施方式中，在同屏请求处理单元或同屏服务单元中，产生同屏网页链接的方式包括：

方式一，将预先制作的网页配置为同屏网页，所述网页中包含所述第二脚本。在该方式中，所述同屏网页可对应于多个目标网页，或多个目标网页实例提供同屏客户端访问、浏览服务。因此，在处理所述同屏创建请求时，建立所述目标网页实例与所述同屏网页之间的对应关系，产生并返回用于连接所述同屏网页的参数信息，生成同屏网页链接。在客户端访问所述同屏网页链接时，所述链接中需包含所述同屏创建请求返回的参数信息，如UUID，所述第二脚本基于所述参数信息计算识别与之对应的所述目标网页实例；

方式二，在服务端创建一个新的网页，在其中加入所述第二脚本，以及与对应的同屏服务实例相连接的配置信息，生成专用的同屏网页，所述专用的同屏网页对应于所述目标网页或目标网页实例并提供服务。在该方式中，一个同屏网页可对应于一次同屏交流提供同屏客户端访问、浏览服务，在客户端连接时，无需携带参数信息；一个同屏网页也可对应于一目标网页提供同屏客户端访问、浏览服务，在客户端连接时需携带同屏交流的ID或类似信息。

在一种可能的实施方式中，所述同屏创建请求还包括房间ID信息，所述房间ID信息用于所述服务端为一个所述目标网页、一个房间ID组合信息创建或分配相应的同屏服务实例，以及创建浏览器实例，所述同屏服务实例为访问同一目标网页、同一房间ID的客户端提供同屏服务。对应于一个目标网页、一个房间ID在所述服务端创建所述浏览器实例，所述浏览器实例加载所述目标网页并生成目标网页实例；在所述目标网页实例生成同屏数据后向对应房间ID的客户端发送；接收对应于所述房间ID的所述客户端发送的网页操作事件，在对应的所述目标网页实例中执行。

在一种可能的实施方式中，在所述服务端创建浏览器实例，所述浏览器包括但不限于浏览器引擎、程序中创建的浏览器、无头浏览器(Headless browser)、无图形界面浏览器等。优选的，所述浏览器采用无头浏览器(Headless browser)，利于节约服务器计算资源、增加程序控制的灵活性。

在一种可能的实施方式中，请参考图4所述的流程示意图，参考客户端的浏览器尺寸、分辨率等信息，计算目标网页实例的渲染尺寸，以便浏览器实例中对目标网页实例的渲染结果在各个参与交流的客户端中都能够正确显示，详细步骤如下：

在客户端1:

S401，采集浏览器参数信息，如视口尺寸；

S402，发送同屏客户端参数数据；

在同屏服务单元：

S403，基于客户端浏览器参数，按照预定的计算规则执行计算，获得目标网页实例网页尺寸设置参数；

S404，发送目标网页实例网页尺寸设置参数；

在浏览操作执行单元：

S405，设置目标网页实例网页尺寸，执行渲染；

S406，加载完成，序列化目标网页实例DOM生成序列化后的DOM数据，并基于所述序列化后的DOM数据生成同屏数据；

S407，发送同屏数据；

在同屏服务单元：

S408，发送同屏数据；

在客户端1:

S409，解析同屏数据包含的序列化后的DOM数据，基于其更新DOM。

在具体的实施场景中，参与同屏的客户端存在诸多差异，难于保证在目标网页上生成的同屏结果在所有的客户端均能正常兼容或正常显示，例如因目标网页实例尺寸过大客户端尺寸过小导致的同屏内容显示不完整问题，导致用户体验非常差。以上实施例中，以页面的尺寸为例，说明了本申请基于参与同屏的客户端的参数计算目标网页实例参数并设置的实现原理，S403中，所述预定的计算规则如：计算最小可显示的设备大小，其目的在于所有的同屏客户端均能完整显示所述目标网页实例内容。在一种可能的实施场景中，还包括，所述服务端接收所述客户端发送的断开连接请求，当确认所述客户端不是最后一个客户端时，根据剩余在连接的所述客户端的浏览器参数信息，基于客户端浏览器参数按照预定的计算规则执行计算，获得所述目标网页实例的目标渲染尺寸，基于所述目标渲染尺寸设置所述目标网页实例的网页页面尺寸或浏览器视口大小。

在以上实施例中，所述客户端浏览器参数信息包括但不限于分辨率、浏览器视口大小、网页页面尺寸等。以上实施例以设置网页页面尺寸为例，说明本申请基于客户端参数设置服务端浏览器实例及目标网页实例参数，以提升同屏交流中客户端设备兼容性的实现原理。另外需要说明的是，以上实施例的步骤仅对本申请提升设备兼容性的原理进行说明，不对其中的步骤的执行顺序、功能进行限定，如S406、S409中，采集与处理同屏数据的方式，可将序列化后的DOM数据，替换为Canvas数据、图片数据等方式。

以上实施例获得的有益效果是，兼容同屏客户端浏览器及设备的差异，优化同屏效果，提升用户体验。

在一种可能的实施方式中，在服务端浏览器中的目标网页实例发生网页跳转后，请参考图5所示的流程示意图，主要步骤如下：

S501，监听或判断所述服务端浏览器实例中的目标网页实例发生网页跳转；

S502，将所述跳转后的网页作为新的目标网页，在所述浏览器中加载新目标网页，生成新目标网页实例；

S503，在所述新目标网页实例中注入所述第一脚本；

S504，在所述新目标网页实例加载完成后，序列化所述新目标网页实例DOM生成序列化后的DOM数据向客户端发送，或者，将所述新目标网页实例显示内容在Canvas上执行绘制并获取Canvas数据向所述客户端发送，或者，基于所述新目标网页实例显示内容生成图片数据向所述客户端发送。

在以上实施方式中，S501监听或判断所述服务端浏览器实例中的目标网页实例发生网页跳转，所述监听包括但不限于通过服务端监听、在目标网页实例中监听、在同屏网页中监听、在浏览器实例中监听等，所述判断包括但不限于在同屏服务中判断其所对应的目标网页实例是否发生改变等方式。可选的，当所述目标网页实例发生网页跳转后，设定当前同屏服务实例与新目标网页实例之间为对应关系并继续为新目标网页实例提供服务。可选的，基于新的目标网页实例，创建新的同屏服务实例，所述新的同屏服务实例对应于新目标网页实例提供同屏服务。可选的，保留跳转前的目标网页实例所对应的同屏服务实例，并记录跳转前后的目标网页实例所对应的同屏服务实例之间的关联关系。S504及后续步骤与图3实施例S310及后续步骤基本相同，在此不再赘述。

在一种可能的实施方式中，所述服务端浏览器实例中的目标网页实例发生网页跳转后，设定原目标网页实例对应的同屏服务实例继续为所述新目标网页实例提供同屏服务，故该同屏服务实例对应的所述同屏网页链接保持不变，由此，在目标网页实例中发生网页跳转的情况下，客户端访问的同屏网页不会发生网页跳转。

通过以上实施方式，在同屏网页中包含音视频通信服务，在目标网页实例中发生网页跳转时，所述音视频通信仍保持连续通信状态。

在一种可能的实施方式中，记录同屏过程并生成同屏过程录制数据，如图6所示的流程示意图，主要步骤如下：

S601，采集所述同屏数据及对应的时间信息，和/或，采集从所述客户端接收的网页操作事件及对应的时间信息；

S602，结构化存储，生成同屏过程录制数据。

在以上实现方式中，所述同屏过程录制数据用于存储、回放交流过程，按照所述时间信息，在所述同屏网页中接收并处理所述同屏数据，执行同屏交互过程回放。可选的，在浏览操作执行单元执行以上S601、S602步骤，生成同屏过程录制数据。可选的，在同屏服务单元执行以上S601、S602步骤，生成同屏过程录制数据。可选的，在所述客户端由所述第二脚本创建录制模块，执行以上S601、S602步骤，生成同屏过程录制数据。可选的，在所述服务端创建一模拟客户端的浏览器实例，作为一个客户端参与同屏交流，在该客户端注入脚本创建录制模块，执行以上S601、S602步骤，生成同屏过程录制数据。可选的，S601中采集的数据，还包括音频数据、视频数据、涂鸦数据中的一种或多种。

在一种可能的实施方式中，在运行所述目标网页或访问所述同屏网页的浏览器，采用录制浏览器视频的方式实时录制网页同屏交流过程，生成同屏过程录制视频。在该种实现方式中，所述运行所述目标网页或访问所述同屏网页的浏览器，包括但不限于访问同屏网页的客户端浏览器、运行目标网页的服务端浏览器实例、在服务端创建的模拟客户端的浏览器实例。其中，所述录制浏览器视频，所录制的内容包括但不限于浏览器的显示画面、浏览器播放的音频、浏览器接收的音频数据等。

在一种可能的实施方式中，如图7所示的交互流程图，本申请还提供了一种针对涂鸦指令的处理方法，具体步骤如下：

在浏览操作执行单元：

S701，接收到切换至涂鸦工作模式指令；

S702，基于目标网页实例当前页面内容生成图片数据，或者，将目标网页实例的网页内容Canvas上执行绘制并获取Canvas数据；

S703，发送同屏数据；

在同屏服务单元：

S704，发送同屏数据；

在客户端1：

S705，显示所述图片数据或基于Canvas数据执行绘制，生成涂鸦背景内容；

S706，采集涂鸦操作；

S707，发送涂鸦操作数据。

在以上实现方式中，在同屏交流过程中进入涂鸦工作模式时，首先将目标网页实例的显示内容生成为图片或绘制数据发送至参与同屏的客户端，由此确保在进入涂鸦工作模式后所有客户端显示的画面与所述浏览器实例中的显示画面保持一致，且基于该画面进行涂鸦操作，参考定位涂鸦内容，避免因设备差异而导致的涂鸦错位问题。

一种可能的实施方式中，如图8所示的流程示意图，本申请还提供了一种针对包含Canvas元素的目标网页进行处理的方法，具体步骤如下：

S801，监听到Canvas属性变化或其Context事件执行；

S802，缓存Canvas数据；

S803，启动时钟监听；

S804，时钟周期结束；

S805，判断是否接收到所述Canvas元素变化；

当接收到所述Canvas元素变化时：

S806，缓存当前所述Canvas数据；

当未接收到所述Canvas元素变化时：

S807，发送所述同屏数据并清空缓存数据。

以下，结合以上实施例举例说明：在服务端浏览器实例中加载的目标网页，所述目标网页中包含一Canvas元素，所述Canvas元素的显示内容为图表，根据本申请的实现原理，所述Canvas元素在所述目标网页加载过程中产生大量的网页操作事件(Canvas中显示内容在生成过程中的绘制操作事件，如绘制图表)，对应的产生多次数据通信，参考图3中的S314、S315，由此可能造成通信阻塞。根据以上实施例提供的方法，通过缓存Canvas数据、在Canvas绘制结束后执行通信的方式，避免了包含Canvas元素且在网页加载时存在大量Canvas绘制操作的网页在加载时因Canvas事件过多而导致的网络阻塞问题。

一种可能的实施方式中，如图9所示的交互流程示意图，本申请还提供了一种对指定类型的网页事件在网页同屏过程中的处理方法，具体步骤如下：

在客户端1：

S901，监听到指定类型的网页操作事件；

S902，执行所述网页操作事件；

S903，向其它同屏客户端发送网页操作事件；

S905，向同屏服务单元发送网页操作事件；

在客户端2：

S904，接收网页操作事件，执行网页操作；

在同屏服务单元：

S906，向浏览操作执行单元发送网页操作事件；

在浏览操作执行单元：

S907，接收网页操作事件，执行网页操作，采集执行结果数据；

S908，向同屏服务单元发送执行结果数据；

在同屏服务单元：

S909、S910，向客户端1、其它客户端发送执行结果数据；

在客户端1：

S911，基于接收的执行结果数据执行校正操作；

在客户端2：

S912，基于接收的执行结果数据执行校正操作。

以上实施例针对一些特定类型的网页事件如touch、scroll等，该类网页事件通常要求快速响应，如在目标网页实例中执行，然后将执行结果同步至客户端，会产生延时，造成较差的用户体验，因此，本实施例在客户端执行的同时，同步发送至其他客户端执行，由此降低延时以提升用户体验，另外，参考服务端目标网页实例的执行结果进行校正，保证同屏最终结果的正确性。

一种可能的实施方式中，针对客户端中的网页操作事件存在调用本地***或浏览器的情况进行处理，如图10所示的交互流程示意图，在客户端1，执行步骤S1001，当确定网页操作触发的事件为调用本地***或浏览器的操作时，将所述事件同时传至本地***或浏览器；S1005，本地***或浏览器执行处理，在其处理结束后触发本地调用完成事件，在完成事件中向所述服务端发送所述网页操作数据。在目标网页实例中，执行步骤S1008，基于客户端执行结果，处理所述网页操作事件，模拟执行效果。可选的，在客户端1执行S1001后，向所述目标网页实例发送通知，在所述目标网页实例中执行S1004，显示在客户端执行的提示或其他处理。举例说明以上实施步骤，如在客户端操作input元素输入文字内容，当输入焦点在所述input元素上时，触发调用本地输入法部件，此时，发送通知至目标网页实例，以使得目标网页实例生成“客户端1输入中”的相关提示并同屏至其他同屏客户端，当客户端1所述input元素输入完成后，触发其change事件，在采集到该事件向服务端发送时，同时发送操作结果数据，本例中的操作结果数据即本次输入的字符串数据。通过以上实现方式，避免在网页操作触发的事件为调用本地***或游览器的操作时所有客户端均执行本地操作而发生混乱，同时有利于保护客户端隐私，获得一致的同屏执行结果。

在一种可能的实施方式中，本申请实施例中的所述第一脚本、所述第二脚本，还包括在目标网页实例、参与同屏的客户端访问的同屏网页之间建立实时语音对话或视频对话的功能，以实现同屏交流过程中的音视频通信。

在一种可能的实施方式中，本申请实施例中的所述第一脚本，还包括在目标网页实例中创建涂鸦Canvas，采集涂鸦数据，将所述涂鸦数据作为同屏数据发送；接收同屏数据并解析其中包含的涂鸦数据，在所述涂鸦Canvas上执行绘制。本申请实施例中的所述第二脚本，还包括在客户端浏览的同屏网页中创建涂鸦Canvas，采集涂鸦数据，将所述涂鸦数据作为同屏数据发送；接收同屏数据并解析其中包含的涂鸦数据，在所述涂鸦Canvas上执行绘制。

在一种可能的实施方式中，在所述同屏服务实例或所述服务端浏览器实例中生成所述同屏过程录制数据，还包括记录所述同屏交流过程中的音频数据、视频数据、涂鸦数据中的一种或多种，完整记录交流过程。

可选的，在所述服务端浏览器实例、所述客户端、所述同屏服务实例之间采用WebSocket通信方式实现数据通信。可选的，在所述服务端浏览器实例、参与同屏交流的所述客户端之间采用WebRTC(Web Real-Time Communication，网页实时通信)API实现通信。

在一种可能的实施方式中，基于所述同屏过程录制数据生成消息摘要，所述消息摘要由同屏交流的创建者、参与者等保存，用于核验同屏交流过程录制数据，存证所述同屏交流过程。或者，基于所述同屏过程录制数据每一次更新后的数据生成消息摘要，所述消息摘要由同屏交流的创建者、参与者等保存，用于核验每一个交流状态的录制数据，对应存证所述同屏交流状态。以上，所述生成消息摘要的算法如MD5等。

在一种可能的实施方式中，使用参与同屏交流的一个客户端浏览器取代所述服务端浏览器实例的方式进行实施。

在一种可能的实施方式中，在所述目标网页实例中创建包含所述目标网页内容的内联框架，对应地，在所述同屏网页中创建包含所述同屏网页内容的内联框架，例如，将待同屏的网页内容放在IFrame中运行，将音视频和同屏操作放在MainFrame中运行。通过该实施例提供的方法，在目标网页发生跳转时，同屏业务与音视频保持连续不中断。

基于本申请实施例上述提出的网页同屏方法，本申请实施例还提供了一种网页同屏***，请参考图11，包括服务端S、客户端C，其中：

所述服务端S，包括创建单元S01、浏览操作执行单元S02、同屏服务单元S03，具体如下：

所述创建单元S01，用于接收同屏创建请求，基于所述同屏创建请求创建浏览器实例与同屏服务实例，包括同屏请求处理模块S011，其中：

所述同屏请求处理模块S011，配置为接收同屏创建请求，基于其包含的目标网页网址信息，通知所述浏览操作执行单元S02在服务端浏览器中实例化一个Tab，加载目标网页生成目标网页实例，并通知所述同屏服务单元S03创建相应的同屏服务实例；

所述浏览操作执行单元S02，用于管理服务端浏览器，在所述服务端创建浏览器实例S021，在所述浏览器实例S021中执行目标网页浏览与操作，包括加载模块S0212、通信模块S0211、DOM数据采集模块S0213-1/Canvas内容处理模块S0213-2/图片数据采集模块S0213-3、网页操作事件执行模块S0214，其中：

所述加载模块S0212，配置为加载所述目标网页生成目标网页实例，在所述目标网页实例中注入第一脚本，并启动页面监听；

所述通信模块S0211，配置为与对应的所述同屏服务实例S031建立通信；

所述DOM数据采集模块S0213-1，配置为在监听到所述目标网页实例内容发生改变后，将所述目标网页实例DOM序列化处理，生成序列化后的DOM数据向所述同屏服务实例S031发送；所述Canvas内容处理模块S0213-2，配置为将所述目标网页实例的网页内容在第一Canvas上执行绘制，基于所述第一Canvas生成Canvas数据向所述同屏服务实例S031发送；所述图片数据采集模块S0213-3，配置为基于所述目标网页实例的显示内容生成图片数据，将所述图片数据作为同屏数据向所述同屏服务实例S031发送；

所述网页操作事件执行模块S0214，配置为执行从所述客户端接收的网页操作事件；

所述同屏服务单元S03，用于创建与管理同屏服务实例S031，所述同屏服务实例对应于所述目标网页实例，所述同屏服务实例为参与同屏的客户端提供数据通信、控制服务，包括同屏数据发送模块S0311、网页操作数据接收模块S0312，其中：

所述同屏数据发送模块S0311，配置为向所述客户端C发送所述同屏数据；

所述网页操作数据接收模块S0312，配置为接收所述客户端C发送的网页操作事件数据。

所述客户端C，用于访问所述同屏网页链接，执行其对应的所述目标网页实例的同屏，包括通信模块C01、DOM数据处理模块C02-1/Canvas数据处理模块C02-2/图片数据显示模块C02-3、网页操作事件采集模块C03，其中：

所述通信模块C01，配置为与对应的所述同屏服务实例S031建立通信；

所述DOM数据处理模块C02-1，配置为接收所述同屏服务实例S031发送的同屏数据，解析其包含的序列化后的DOM数据，基于所述序列化后的DOM数据更新或替换所述同屏客户端网页DOM内容；

所述Canvas处理模块C02-2，配置为接收所述同屏服务实例S031发送的同屏数据，解析其包含的Canvas数据，在所述同屏客户端网页中创建第二Canvas，基于所述Canvas数据在所述第二Canvas上显示图片或执行绘制；

所述图片数据显示模块C02-3，配置为接收所述同屏服务实例S031发送的同屏数据，解析其包含的图片数据，基于所述图片数据显示图片；

所述网页操作事件采集模块C03，配置为监听所述客户端中发生的网页操作事件，在所述客户端中不做处理，并将所述网页操作事件向所述同屏服务实例S031发送。

在一种可行的实现场景中，在所述***中，还包括，生成所述浏览器实例S021、所述同屏服务实例S031、所述客户端C之间的对应关系，其中，在同一时刻，所述浏览器实例对应于一个所述同屏服务实例，所述同屏服务实例为多个所述客户端提供对应于所述目标网页实例的同屏网页的同屏服务；

还包括，基于预置的同屏网页，为所述目标网页实例计算并返回对应的同屏网页链接，或者，对应于所述目标网页实例创建网页文件并增加所述第二脚本生成所述同屏网页，返回所述同屏网页链接。

在一种可能的实现场景中，所述浏览操作执行单元S02或所述同屏服务单元S03或所述客户端C，还包括录制模块，所述录制模块采集所述同屏数据及对应的时间信息、从所述客户端接收的网页操作事件及对应的时间信息并存储，生成同屏过程录制数据。

在一种可能的实现场景中，所述客户端C还包括运行环境信息采集模块C04，所述同屏服务实例S031还包括运行环境参数计算模块S0313，所述浏览器操作执行单元S02还包括运行环境参数设置模块S0215，其中：

所述运行环境信息采集模块C04，配置为采集客户端浏览器和/或***参数信息，向所述服务端发送；

所述运行环境参数计算模块S0313，配置为基于参与一次同屏的所有所述客户端浏览器和/或***参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例S021的设置参数；

所述运行环境参数设置模块S0215，配置为基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例S021。

在一种可能的实现场景中，所述浏览操作执行单元S02还包括网页内容图像采集模块S0216，所述客户端还包括涂鸦处理模块C05，其中：

所述网页内容图像采集模块S0216，配置为在接收到切换至涂鸦工作模式指令后，基于所述目标网页实例当前页面内容生成图片数据或Canvas数据；

所述涂鸦处理模块C05，配置为接收所述网页内容图像采集模块生成的图片数据或Canvas数据，在所述客户端C显示所述图片数据或基于所述Canvas数据执行绘制，生成涂鸦背景内容。

另外需要说明的是，本申请中的服务端，是指逻辑上的服务端，在具体的实施场景中，可能存在一个或多个实际的服务端，逻辑上实现本申请中提及的服务端功能。同样的，本申请中的各种模块，也仅限于在逻辑上的功能划分，在具体的实施场景中，可能组合、拆分一些模块的功能生成新的模块，或者使用功能相似的模块替换现有模块实现。

根据以上本申请提供的网页同屏方法及***，在客户端收集事件,由服务端执行,再将全量或差量数据返回给客户端,客户端渲染结果。最终产生的有益效果是，实现针对任何网页拿来即用，进行快速同屏，客户端可以任意时间进入参与同屏，且解决现有技术中存在的页面跳转中断、音视频通信中断、涂鸦错位等、不能实时录制等问题，因此，本申请提供的方法实施成本低，效率高，且准确性、适用性、用户体验方面均有提升。

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

Claims (20)

1.一种网页同屏方法，所述方法应用于服务端，其特征在于，包括：

在所述服务端创建一个浏览器实例，在所述浏览器实例中加载目标网页，生成目标网页实例，在所述目标网页实例中注入第一脚本，并启动页面监听；

在所述目标网页实例内容加载完成或者监听到所述目标网页实例内容发生变化后，序列化所述目标网页实例DOM生成序列化后的DOM数据，将所述序列化后的DOM数据作为同屏数据向客户端发送，或者，将所述目标网页实例显示内容在第一Canvas上执行绘制，基于所述第一Canvas获取Canvas数据，将所述Canvas数据作为同屏数据向所述客户端发送，或者，基于所述目标网页实例显示内容生成图片数据，将所述图片数据作为同屏数据向所述客户端发送；

还包括：

接收所述客户端发送的网页操作事件，执行其包含的网页操作；

其中，所述目标网页为用于同屏的网址或网页文件；所述第一脚本至少包括启动页面监听、DOM序列化处理和/或第一Canvas绘制与获取Canvas数据和/或生成图片数据、基于接收的网页操作事件执行网页操作功能；所述Canvas数据包括基于所述第一Canvas的绘制生成绘制数据或基于所述第一Canvas显示内容生成图片数据；所述客户端通过访问同屏网页实现对所述目标网页实例内容的同屏浏览与操作。

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

将预先制作的网页配置为同屏网页，或者，基于所述目标网页实例信息计算生成所述同屏网页；

基于所述同屏网页的网址，和/或，所述同屏网页与所述目标网页实例之间的对应关系生成同屏网页链接；

根据所述目标网页实例，向所述客户端返回对应的所述同屏网页链接；

其中，预置或生成所述同屏网页，所述同屏网页中均需包含第二脚本，所述第二脚本至少包括接收与处理所述同屏数据、采集与发送网页操作事件功能；每一个目标网页实例，均存在一个同屏网页链接与之对应，所述同屏网页链接包括同屏网页网址和/或参数信息；将预先制作的网页配置为同屏网页，所述同屏网页对应于多个目标网页并提供服务，所述同屏网页链接中包含参数信息，所述第二脚本基于所述参数信息计算识别与之对应的所述目标网页实例；基于所述目标网页实例信息计算生成所述同屏网页，所述同屏网页对应于所述目标网页实例并提供服务。

3.根据权利要求1所述的网页同屏方法，其特征在于，还包括：

所述浏览器为无头浏览器(Headless browser)。

4.根据权利要求1所述的网页同屏方法，其特征在于，在所述服务端浏览器加载所述目标网页，注入所述第一脚本之后，还包括：

在所述服务端对应实例化同屏服务实例；

所述同屏服务实例接收所述服务端浏览器实例发送的同屏数据，向所述客户端发送；所述同屏服务实例接收所述客户端发送的所述网页操作事件，向所述服务端浏览器实例发送；

其中，在所述目标网页实例，通过所述第一脚本执行，建立与所述同屏服务实例之间的通信连接；在所述同屏网页，通过所述第二脚本执行，建立与所述同屏服务实例之间的通信连接。

5.根据权利要求1所述的网页同屏方法，其特征在于，基于所述目标网页实例生成同屏数据，还包括：

将所述目标网页实例中发生变化的DOM节点序列化处理，生成序列化后的DOM数据，将所述序列化后的DOM数据生成为所述同屏数据；或者，基于所述第一Canvas的变化，将两次变化之间的差异化部分生成差异化图片数据，将所述差异化图片数据生成为所述同屏数据；或者，基于所述第一Canvas的变化生成绘制数据，将所述绘制数据生成为所述同屏数据；或者，基于所述目标网页实例显示内容发生变化的部分生成差异化图片数据，将所述差异化图片数据生成为所述同屏数据。

6.根据权利要求1所述的网页同屏方法，其特征在于，还包括，所述服务端接收所述客户端发送的客户端浏览器和/或***参数信息，基于所述客户端浏览器和/或***参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数，基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例；

还包括，所述服务端监听到所述客户端断开连接事件，当确认所述客户端不是最后一个客户端时，根据剩余在连接的所述客户端的浏览器和/或***参数信息，基于客户端浏览器参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数，基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例。

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

监听或判断所述服务端浏览器实例中的目标网页实例发生网页跳转；

当确认所述目标网页实例发生网页跳转后，将所述跳转后的网页作为新的目标网页，在所述浏览器中加载新目标网页，生成新目标网页实例；

在所述新目标网页实例中注入所述第一脚本。

8.根据权利要求1所述的网页同屏方法，其特征在于，包括：

存储所述同屏数据及对应的时间信息，和/或，从所述客户端接收的网页操作事件及对应的时间信息，生成同屏过程录制数据；

其中，所述同屏过程录制数据用于同屏交互过程回放，按照所述时间信息，在所述同屏网页中接收并处理所述同屏数据，和/或，接收网页操作事件并模拟网页操作，执行同屏交互过程回放。

9.根据权利要求1所述的网页同屏方法，其特征在于，包括：

在所述目标网页实例接收到切换至涂鸦工作模式指令；

基于所述目标网页实例当前页面内容生成图片数据，或者，将所述目标网页实例当前页面内容在Canvas上执行绘制并获取Canvas数据；

将所述图片数据或所述Canvas数据生成为同屏数据向所述客户端发送。

10.根据权利要求1所述的网页同屏方法，其特征在于，还包括：

监听所述目标网页实例中的Canvas元素，当监听到变化后，缓存所述Canvas元素的Canvas数据，暂不做通信处理，并启动按照时钟周期监听，在下一时钟周期结束，判断是否接收到所述Canvas元素变化，当确认未接收到所述Canvas元素变化时，发送所述同屏数据并清空缓存数据，当确认接收到所述Canvas元素变化时，缓存当前所述Canvas元素的Canvas数据。

11.一种网页同屏方法，所述方法应用于客户端，其特征在于，包括：

访问同屏网页链接，加载所述同屏网页；

接收所述服务端发送的同屏数据，解析其包含的序列化后的DOM数据，基于所述序列化后的DOM数据更新或替换所述同屏客户端网页DOM内容，或者，解析其包含的Canvas数据，在所述同屏客户端网页中创建第二Canvas，基于所述Canvas数据在所述第二Canvas上显示图片或执行绘制，或者，解析其包含的图片数据，基于所述图片数据显示图片；

还包括：

监听所述客户端中发生的网页操作事件，在所述客户端中不做处理，并将所述网页操作事件向所述服务端发送；

其中，所述同屏网页包含第二脚本，所述第二脚本至少包括与所述服务端建立通信连接、接收与处理所述同屏数据、采集与发送所述网页操作事件功能。

12.根据权利要求11所述的网页同屏方法，其特征在于，在所述客户端切换至涂鸦工作模式时，还包括：

接收所述服务端发送的基于目标网页实例中网页内容生成的图片数据或Canvas数据，在所述客户端显示所述图片数据或基于所述Canvas数据执行绘制，生成涂鸦背景内容；

以所述涂鸦背景尺寸、位置信息作为相对参考，采集与绘制涂鸦数据。

13.根据权利要求11所述的网页同屏方法，其特征在于，还包括：

基于所述客户端采集浏览器参数信息和/或***参数信息，向所述服务端发送，所述浏览器参数信息和/或***参数信息用于所述服务端计算所述目标网页实例、浏览器实例的设置参数。

14.根据权利要求11所述的网页同屏方法，其特征在于，监听所述客户端中发生的网页操作事件并向所述服务端发送，还包括：

当确定监听到指定类型的网页操作事件时，在本地执行所述网页操作事件，并将所述网页操作事件同时发送至所述服务端浏览器实例、参与同屏的其它客户端；

还包括：

接收所述指定类型的网页操作事件，在所述客户端执行，并接收对所述指定类型的网页操作事件的执行结果通知，基于所述执行结果通知执行校正操作。

15.根据权利要求11所述的网页同屏方法，其特征在于，包括：

当确定所述网页操作触发的事件为调用本地***或本地游览器的操作时，将所述事件同时传至本地***或本地浏览器处理，在其处理结束后触发本地调用完成事件，在所述本地调用完成事件中向所述服务端发送所述网页操作事件，其中，在所发送的网页操作事件中包括本地的执行结果信息。

16.一种网页同屏***，其特征在于，所述***包括服务端、客户端，所述服务端包括创建单元、浏览操作执行单元、同屏服务单元，其中，

所述创建单元，用于接收同屏创建请求，基于所述同屏创建请求创建浏览器实例与同屏服务实例，包括同屏请求处理模块，其中：

所述同屏请求处理模块，配置为接收同屏创建请求，基于其包含的目标网页网址信息，通知所述浏览操作执行单元在服务端浏览器中实例化一个Tab，加载目标网页生成目标网页实例，并通知所述同屏服务单元创建相应的同屏服务实例；

所述浏览操作执行单元，用于管理服务端浏览器，在所述服务端创建浏览器实例，在所述浏览器实例中执行目标网页浏览与操作，包括加载模块、通信模块、DOM数据采集模块/Canvas内容处理模块/图片数据采集模块、网页操作事件执行模块，其中：

所述加载模块，配置为加载所述目标网页生成目标网页实例，在所述目标网页实例中注入第一脚本，并启动页面监听；

所述通信模块，配置为与对应的所述同屏服务实例建立通信；

所述DOM数据采集模块，配置为在监听到所述目标网页实例内容发生改变后，将所述目标网页实例DOM序列化处理，生成序列化后的DOM数据向所述同屏服务实例发送；所述Canvas内容处理模块，配置为将所述目标网页实例的网页内容在第一Canvas上执行绘制，基于所述第一Canvas生成Canvas数据向所述同屏服务实例发送；所述图片数据采集模块，配置为基于所述目标网页实例的显示内容生成图片数据，将所述图片数据作为同屏数据向所述同屏服务实例发送；

所述网页操作事件执行模块，配置为执行从所述客户端接收的网页操作事件；

所述同屏服务单元，用于创建与管理同屏服务实例，所述同屏服务实例对应于所述目标网页实例，所述同屏服务实例为参与同屏的客户端提供数据通信、控制服务，包括同屏数据发送模块、网页操作数据接收模块，其中：

所述同屏数据发送模块，配置为向所述客户端发送所述同屏数据；

所述网页操作数据接收模块，配置为接收所述客户端发送的网页操作事件数据；

所述客户端，用于访问所述同屏网页链接，执行其对应的所述目标网页实例的同屏，包括通信模块、DOM数据处理模块/Canvas数据处理模块/图片数据显示模块、网页操作事件采集模块，其中：

所述通信模块，配置为与对应的所述同屏服务实例建立通信；

所述DOM数据处理模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的序列化后的DOM数据，基于所述序列化后的DOM数据更新或替换所述同屏客户端网页DOM内容；

所述Canvas处理模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的Canvas数据，在所述同屏客户端网页中创建第二Canvas，基于所述Canvas数据在所述第二Canvas上显示图片或执行绘制；

所述图片数据显示模块，配置为接收所述同屏服务实例发送的同屏数据，解析其包含的图片数据，基于所述图片数据显示图片；

所述网页操作事件采集模块，配置为监听所述客户端中发生的网页操作事件，在所述客户端中不做处理，并将所述网页操作事件向所述同屏服务实例发送。

17.根据权利要求16所述的***，其特征在于，还包括：

生成所述浏览器实例、所述同屏服务实例、所述客户端之间的对应关系，其中，在同一时刻，所述浏览器实例对应于一个所述同屏服务实例，所述同屏服务实例为多个所述客户端提供对应于所述目标网页实例的同屏网页的同屏服务；

还包括，基于预置的同屏网页，为所述目标网页实例计算并返回对应的同屏网页链接，或者，对应于所述目标网页实例创建网页文件并增加所述第二脚本生成所述同屏网页，返回所述同屏网页链接。

18.根据权利要求16所述的***，其特征在于，所述浏览操作执行单元或所述同屏服务单元或所述客户端，还包括录制模块，所述录制模块采集所述同屏数据及对应的时间信息、从所述客户端接收的网页操作事件及对应的时间信息并存储，生成同屏过程录制数据。

19.根据权利要求16所述的***，其特征在于，所述客户端还包括运行环境信息采集模块，所述同屏服务实例还包括运行环境参数计算模块，所述浏览器操作执行单元还包括运行环境参数设置模块，其中：

所述运行环境信息采集模块，配置为采集客户端浏览器和/或***参数信息，向所述服务端发送；

所述运行环境参数计算模块，配置为基于参与一次同屏的所有所述客户端浏览器和/或***参数按照预定的计算规则执行计算，获得所述目标网页实例、浏览器实例的设置参数；

所述运行环境参数设置模块，配置为基于所述目标网页实例的设置参数设置所述目标网页实例，基于所述浏览器实例的设置参数设置所述浏览器实例。

20.根据权利要求16所述的***，其特征在于，所述浏览操作执行单元还包括网页内容图像采集模块，所述客户端还包括涂鸦处理模块，其中：

所述网页内容图像采集模块，配置为在接收到切换至涂鸦工作模式指令后，基于所述目标网页实例当前页面内容生成图片数据或Canvas数据；

所述涂鸦处理模块，配置为接收所述网页内容图像采集模块生成的图片数据或Canvas数据，在所述客户端显示所述图片数据或基于所述Canvas数据执行绘制，生成涂鸦背景内容。

Images