CN115186218B - 一种应用于网页同屏的内容切换方法、系统 - Google Patents

Abstract

本申请提供一种应用于网页同屏的内容切换方法、系统，涉及互联网技术及通信领域，方法包括：在客户端加载同屏程序以执行所述方法，指定或动态创建用于显示网页内容的显示容器，接收服务端发送的网页内容并在显示容器中显示，在显示容器内部或外部加载控制部件，控制部件至少包括内容切换按钮；根据内容切换按钮的触发事件，从服务端请求获取内容列表并显示；根据用户在内容列表中选择的内容项，生成内容请求向服务端请求网页内容；接收服务端返回的网页内容在显示容器中切换显示。可见，本申请实施例提供的方法，在同屏的内容切换时，客户端加载网页内容而不重新加载同屏程序，因此在内容切换过程中通信连接、音视频不中断，用户体验佳。

Description

一种应用于网页同屏的内容切换方法、系统

技术领域

本发明实施例涉及互联网技术及通信领域，尤其涉及一种应用于网页同屏的内容切换方法、系统。

背景技术

网页同屏，通过在多个参与交流的客户端之间实现同步浏览、操作网页获得同屏效果，在接通语音通话基础上，即生成了一种“面对面”的交流方式，为针对网页内容进行交流提供便利。在实际的应用场景中，人们针对某网页内容进行交流，经常遇到需要更换交流内容的需求，例如，供方与购方交流订购内容，有针对某产品的产品图片、手册进行交流的需求，保险代理人与客户沟通保险计划书相关内容，有针对某保险产品的条款进行交流的需求，或者，某参与者在本地保存了一些资料，希望在交流过程中上传并切换为该交流内容。而现有的网页同屏技术未提供交流内容的切换方法，在遇到交流内容切换需求时，通过在具有同屏交流功能的网页之间跳转以实现交流内容切换，在该方式中，跳转新的同屏交流网页必须重新加载网页，其包含的同屏JS程序加载后携带房间号重新连接同屏服务，因此，在重新连接过程中必然会导致音视频中断、同屏交流过程中断等问题，导致非常差的用户体验，且不利于同屏交流过程管理、记录等。

因此，针对以上网页同屏技术在内容切换时存在的问题，亟需应用新技术解决。

发明内容

针对上述问题，本发明提供一种应用于网页同屏的内容切换方法，旨在解决现有网页同屏技术存在内容切换时存在的音视频中断、同屏交流过程中断等问题，提升网页同屏交流的用户体验，使网页同屏达到视频类同屏显示一致的同屏效果。本发明提供的技术方案如下：

第一方面，本发明提供了一种应用于网页同屏的内容切换方法，所述方法应用于客户端，在所述客户端加载客户端同屏程序以执行所述方法，所述方法包括：

建立与服务端间的通信连接以执行网页同屏数据通信，建立音频和/或视频通信以传输音频和/或视频数据；在客户端指定或动态创建一用于显示网页内容的显示容器，接收服务端发送的网页内容并发送至该显示容器显示；在显示容器内部或外部独立加载控制部件，所述控制部件至少包括内容切换按钮；

接收内容切换按钮的触发事件，从服务端请求获取内容列表并显示；接收用户在内容列表中的选择项，生成内容请求向所述服务端发送；接收所述服务端返回的与所选择项对应的网页内容，在显示容器中切换显示该网页内容。

其中，所述同屏程序，例如，用于实现客户端同屏功能的JS库、JS程序等；网页内容包括网页数据或网址，其用于在所述客户端间同屏显示；相应的，显示容器显示网页内容，包括加载网页内容包含的网页数据或网址。

以上实现方式的核心在于，同屏程序、显示容器分别为位于所述客户端内部，且两者为相独立的程序与部件，在显示容器内加载的内容不包括同屏程序的相关内容。

通过以上实现方式，当内容切换时，在客户端加载新的网页内容而不重新加载同屏程序，因此，在内容切换过程中音视频通信、同屏交流过程均不中断。

在一种可能的实现方式中，所述控制部件还包括新建内容按钮，在接收到该按钮上的触发事件后，显示内容设置部件以接收用户执行的内容设置，然后，基于用户执行的内容设置，生成内容创建请求向服务端发送。其中，内容设置包括但不限于网址、网页、文件、图片、基于指定内容生成网页内容等，当内容设置中包括文件时，该文件必须为可转化为网页格式的文件。根据客户端发送的内容创建请求，服务端生成对应的网页内容，并更新内容列表。

以上实现方式提供了一种在同屏交流过程中实时上传交流内容的方法，以增加交流的灵活性。

在一种可能的实现方式中，客户端所接收的网页内容，还包括该网页内容的类型信息，基于其类型信息加载对应的控制部件。所述类型信息例如：图片、网址、网页、Word文件、PDF文件、Excel文件、可编辑、不可编辑、静态网页、动态网页、私密内容等。该实现方式根据类型信息加载对应的控制部件，有利于针对某类型的内容进行特殊的交流控制，例如，在确认为PDF文件时加载PDF浏览部件，如放大、缩小、页面导航部件等。

在一种可能的实现方式中，根据从服务端接收的网页内容，在客户端本地存储生成本地内容缓存数据记录，或者，或在执行内容切换前从显示容器中获取网页数据，在客户端本地存储生成本地内容缓存数据记录，所述本地内容缓存数据记录至少包括内容标识、内容数据。在接收到用户选择的切换内容项指令或从服务端接收到内容项切换通知后，首先在本地内容缓存数据记录中判断是否存在相应的数据记录，当存在时直接获取相应的数据记录在显示容器中显示。该实现方式可获得的有益效果包括：降低网络传输、提升交流效率，且有利于保留每个网页内容的交流状态。

在一种可能的实现方式中，在接收内容切换按钮的触发事件并向服务端发送内容请求后，表示在等待接收数据以切换网页内容，此时，首先屏蔽发生于显示容器内的用户操作事件，在显示容器中的网页数据加载完成后向服务端发送加载完成通知，其中，服务端在接收到所有客户端发送的加载完成通知后，向拥有同屏操作控制权的客户端发送允许操作通知。当接收服务端发送的允许操作通知，解除对显示容器内的用户操作事件的屏蔽。因内容切换开始至加载完成需要一定时间，该实现方式利用防止用户在内容切换过程中对在同屏网页进行操作。可选的，在客户端接收到服务端发送的内容项切换通知后，屏蔽发生于显示容器内的用户操作事件，在接收服务端发送的允许操作通知后，解除对显示容器内的用户操作事件的屏蔽。

在一种可能的实现方式中，在接收内容切换按钮的触发事件并向服务端发送内容请求后，向服务端交回同屏操作控制权，在显示容器中的网页数据加载完成后向服务端发送加载完成通知，其中，服务端收回所述同屏操作控制权，并在接收到所有客户端发送的加载完成通知后，向发送内容请求的客户端分配同屏操作控制权或允许所有客户端请求同屏操作控制权。

通过以上各实现方式，在显示容器中显示同于同屏的网页内容，除显示容器外均不在同屏范围内，对显示容器中网页内容的替换、操作不会停止同屏主程序运行，由此在同屏过程中保持持续的同屏数据通信、音视频通信，即同屏交流过程、音视频均不会内容切换、新增等引起中断。可见，以上方法提供的内容切换、内容增加等，增强了同屏交流的功能，同时保持了良好的网页同屏用户体验。

第二方面，本发明还提供了一种应用于网页同屏的内容切换方法，该方法应用于服务端，方法包括：

建立与客户端间的通信连接以执行网页同屏数据通信；

获取网页内容向与之建立通信连接的客户端发送；

接收客户端发送的内容列表请求，生成内容列表向客户端发送；

接收客户端发送的内容请求，解析内容请求中包含的内容项，获取内容项对应的网页内容向客户端发送；

在以上方法中，网页内容包含网页数据或网址，网页内容用于在客户端间同屏显示；服务端在网页同屏过程中为客户端提供网页内容，所述网页内容用于在客户端的显示容器中加载；客户端在内容切换时加载网页内容而不重新加载同屏程序，在内容切换过程中通信连接、音视频通信不中断。

通过以上实现方式，服务端与客户端建立通信连接后，在服务端处理内容相关请求、管理网页内容，为网页同屏内容切换提供服务端支持，在处理内容相关请求时，与客户端之间的通信不中断，因此，有利于整体的同屏交流过程管理、记录，且提供了良好的用户体验。

在一种可能的实现方式中，服务端接收客户端发送的内容创建请求，解析获取其包含的内容数据并存储，生成网页内容服务记录。在该实现方式中，存储内容创建请求中包含的内容数据，包括直接存储其包含的原始内容数据、将其包含的原始内容数据转换为网页数据存储两种方式；网页内容服务记录用于根据客户端发送的内容请求提供网页内容，还用于生成内容列表数据。该实现方式为客户端实时创建交流内容提供了服务端支持。可选的，生成网页内容服务记录，还包括记录所述网页内容的类型信息。

在一种可能的实现方式中，在接收到内容请求后，根据预设的网页数据生成规则计算网页数据的生成方式，或接收指定的网页数据的生成方式，网页数据的生成方式包括从网页内容服务记录中获取网页数据、根据网页内容服务记录中包含的网址实时产生网页数据。确定生成方式为实时产生网页数据时，在服务端创建浏览器实例以运行网页内容服务记录中包含的网址，并基于该浏览器实例采集所产生的网页数据，或者，向指定的客户端发送网页内容服务记录中包含的网址，接收该指定的客户端所产生的网页数据并向其它客户端发送，其中，所述指定的客户端运行所述网址并采集所产生的网页数据。需说明的是，服务端向客户端发送的网页内容，包括网页数据、网址两种方式，当采用网页数据的同步方式实现同屏时，该实现方式提供了获得网页数据的生成方式的方法，另外，该实现方式还提供了两种实时产生网页数据的方法，即在服务端的浏览器实例中运行产生、在指定的客户端中运行产生，所述网页数据即为在网页同屏过程中于客户端显示容器内显示以同步的网页数据。

通过以上各实现方式，在服务端除提供同屏服务外，另提供内容管理、内容生成、内容生成方式计算、网页数据生成等内容相关服务，为客户端处理内容切换、内容实时增加等提供支持。可获得的有益效果是，在网页同屏的内容切换过程中，与客户端的通信连接不中断，利于网页同屏的全过程管理。

第三方面，本发明还提供一种应用于网页同屏的内容切换系统，所述系统包括：

服务端，包括同屏服务模块、内容服务模块、内容数据库。同屏服务模块用于与客户端建立通信以提供网页同屏数据通信、同屏控制；内容服务模块用于管理网页内容服务记录，接收与处理内容请求、内容创建请求、内容列表请求，创建网页内容服务记录，生成与发送网页内容；内容数据库用于存储内容数据、网页内容服务记录。

多个客户端，包括同屏本地处理模块、控制部件、显示容器。同屏本地处理模块用于建立与服务端间的通信、执行网页同屏数据通信、执行音频和/或视频通信、创建显示容器、加载控制部件；显示容器用于接收与显示网页内容，包括加载网页内容中的网页数据、网址；显示容器还用于在客户端被指定为实时产生网页数据的客户端时，产生、采集网页数据并发送；控制部件用于采集与发送用户对同屏的控制请求，还用于基于网页内容的类型生成对应的控制按钮；控制部件至少包括内容切换按钮，用于调用内容切换功能以生成内容请求；控制部件还包括新建内容按钮，用于调用创建内容功能以生成内容创建请求。

可选的，内容服务模块还包括网页数据生产模块，网页数据生产模块用于实时产生网页数据，在服务端包括浏览器实例，网页数据生产模块用于创建或调用浏览器实例，还用于控制浏览器实例运行网页内容中包含的网址以产生网页数据，还用于采集所产生的网页数据并用于在客户端间同屏显示。

可选的，内容服务模块还包括网页数据生产模块，在指定的客户端包括显示容器、网页数据采集模块，网页数据生产模块用于向指定的客户端发送包含网址的网页内容，显示容器用于运行网址以产生网页数据，网页数据采集模块用于采集所产生的网页数据并向服务端发送，所述网页数据用于在其它客户端间同屏显示。

第四方面，本发明实施例中还提供一种计算机存储介质，该存储介质中存储有软件程序，该软件程序在被一个或多个处理器读取并执行时可实现上述任一方面的任意一种实施方式提供的方法。

第五方面，本发明实施例中还提供一种计算机程序产品，该计算机程序产品在被一个或多个处理器读取并执行时可实现上述任一方面的任意一种实施方式提供的方法。

可见，通过本发明实施例所提供的方法，所述显示容器为客户端内部元素，其与用于执行同屏的同屏程序在结构上为平行关系，且均位于客户端内部，在网页同屏过程中，将用于同屏的网页内容在显示容器中显示，网页内容的切换、更新等受同屏程序控制，但不会影响到同屏程序运行。可获得的有益效果为：在内容切换过程中通信连接、音视频通信均保持连续，且有利于对同屏交流过程的全过程进行管理、记录和控制。

附图说明

图1为本发明实施例提供的一种在客户端执行的网页同屏内容切换的流程示意图；

图2为本发明实施例提供的一种应用于网页同屏的内容切换的流程示意图；

图3为本发明实施例提供的一种应用于网页同屏的新建内容的流程示意图；

图4为本发明实施例提供的一种根据网页内容类型对应加载控制部件的流程示意图；

图5为本发明实施例提供的一种存储生成本地内容缓存数据的流程示意图；

图6为本发明实施例提供的一种通过本地内容缓存数据获取网页内容的流程示意图；

图7为本发明实施例提供的一种内容切换过程中对用户操作权限控制的流程示意图；

图8为本发明实施例提供的一种网页数据的生成方式判断、生成的流程示意图；

图9为本发明实施例提供的一种应用于网页同屏的内容切换系统结构示意图；

图10为本发明实施例提供的一种控制部件结构示意图；

图11为本发明实施例提供的一种控制部件结构示意图；

图12为本发明实施例提供的一种在服务端产生网页数据的系统结构示意图；

图13为本发明实施例提供的一种在指定客户端产生网页数据的系统结构示意图。

具体实施方式

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

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

网页同屏作为一种非视频类同屏技术，其通过在参与同屏交流的客户端间同步运行网页实现同屏，相比视频类同屏技术具有速度快、画质无损等优势，因此应用越来越广泛。但是，视频类同屏技术（如：远程桌面）可通过切换运行程序轻松改变同屏内容，而网页同屏本身基于网页实现，即通过在网页中加载同屏程序实现同屏功能，其同步的内容为网页本身，因此，现有的网页同屏技术在切换同屏内容时，网页本身进行了切换，新的网页虽然可保持同屏功能，但在切换过程中的同屏通信中断、音视频交流中断难以避免。

本发明实施例提供一种应用于网页同屏的内容切换方法，解决以上问题。本发明通过在网页内部构建或指定一用于执行网页内容同步的显示容器，如图9所示的客户端10的结构示意图，在同屏交流过程中，利用在显示容器103中改变网页内容实现内容切换，达到同屏通信不中断、音视频交流连续的技术效果。

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

1）网页同屏。与传统视频影像的同屏性质不同，网页同屏是一种通过网页本身的运行实现同屏的方式，其通过网页操作指令、网页数据、Canvas数据、Canvas绘制指令、网页显示内容图片等传输，通过在另一侧网页中运行以上传输内容实现同屏效果。

2）客户端。在本发明中，指为用户提供的包含执行网页同屏功能的网页或网页程序，通常在浏览器、可运行网页的控件（如WebView控件）中运行。

3）同屏程序。或称作客户端同屏程序，其是在客户端网页中运行的用于实现网页同屏功能的程序，包括但不限于JS库、JavaScript代码、API等形式，所执行的功能包括但不限于创建与执行同屏通信连接、音视频通信、处理客户端相关的同屏操作，以及执行同屏的过程控制、同屏权限控制、数据显示等，或可理解为，本发明中客户端相关的方法均可由所述同屏程序完成。

4）网页内容、网页数据。网页内容并非常规的在网页中呈现的内容，其在本发明中被定义为一个专用名词，所述网页内容用于服务端向客户端发送，在所述显示容器中显示，其包含网页数据或网址中的一种。网页数据为网页包含的DOM数据、HTML、CSS、JS、网络资源等数据，其在浏览器或显示容器中加载时，可显示输出网页运行画面。当所述网页内容为网页数据时，在所述显示容器中加载以输出网页画面，当所述网页内容为网址时，在所述显示容器中访问该网址以输出网页画面。

5）显示容器。在本发明中，所述显示容器被定义为显示同步网页内容的容器，在此不对其形式进行限定，如网页DIV标签、iFrame标签等均可作为显示容器。

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

以下结合附图，对本发明实施例详细介绍：

实施例一

图1为本发明应用于网页同屏的内容切换方法实施例一的流程图，如图1所示，本实施例的方法在客户端实施，可以包括以下步骤：

S101，加载同屏程序；

所述同屏程序包含在客户端执行网页同屏的相关功能。

S102，建立与服务端间的通信连接，建立音视频通信；指定或动态创建显示容器，接收服务端发送的网页内容并在显示容器中显示；在显示容器内部或外部加载至少包括内容切换按钮的控制部件；

在该步骤中，通过运行所述同屏程序，在客户端与服务端首次建立通信连接后，使用当前网页中指定的显示容器显示网页内容，或者，所述同屏程序动态创建一显示容器以显示网页内容。所述通信连接用于执行网页同屏数据通信，如网页内容传输、同屏控制相关的请求传输等。在本发明中，不对所述音视频通信的建立方式进行限定，其可通过所述服务端建立，也可通过其它专用于音视频通信的服务端建立，还可在客户端之间建立。在该步骤中，所述服务端发送的网页内容为客户端首次连接服务端时，服务端返回的用于同屏显示的网页内容。所述控制部件包括但不限于音视频开关部件、涂鸦控制部件、同屏状态显示部件、同屏权限控制部件、内容管理部件等，其中，所述内容切换按钮为内容管理部件中的一种。在客户端中显示所述控制部件，包括在显示容器外部、内部显示两种处理方式，当显示于所述显示容器外部时，在内容切换过程中，所述控制部件不重新加载，当显示与所述显示容器内部时，在内容切换时其通常随内容重新加载。可选的，将与内容控制无关的控制部件在所述显示容器外部显示，将与内容控制相关的显示部件在显示容器内部显示。

S103，接收内容切换按钮的触发事件，从服务端请求获取内容列表并显示；接收用户选择的内容项，生成内容请求向服务端发送；接收服务端返回的网页内容并在显示容器中切换显示；

该步骤提供了在客户端执行内容切换的步骤，本发明实施例包括多个用于交流的内容，所述内容在服务端存储和提供管理服务，当用户触发内容切换请求时，从服务端请求获得内容列表。根据用户选择的内容项，从服务端请求获取对应的网页内容。可选的，在S102与服务端建立通信连接后，或者在首次接收服务端发送的网页内容时，从所述服务端接收所述内容列表。可选的，在客户端生成所述内容列表的导航或选择的控制部件以执行所述内容切换。

以上可见，S103步骤向服务端请求获取网页内容，在显示容器中加载新的网页内容，在实现内容切换的同时，客户端运行的网页整体并未重新加载，其包含的同屏程序也未重新加载，因此，所述同屏程序建立的通信连接以及音视频通信连接均未中断，而是在所述同屏程序的控制下，对所述显示容器中的内容进行了单独更新。由此可获得的有益效果是，在内容切换过程中，所述通信连接、所述音视频通信保持持续，提升了用户体验，维护了交流过程的完整性，利于同屏交流过程整体管理。

实施例二

参考图2，示意出一种应用于网页同屏的内容切换的流程，其中包括服务端20、客户端10之间的交互及内部处理步骤，详细如下：

在客户端10中：

S201，加载同屏程序；

S202，建立通信连接；

S203，建立音视频通信；

S204，指定或动态创建显示容器；

S205，加载控制部件；

上述步骤与实施例一的S101、S102执行内容基本相同，在此不再赘述。

在服务端20中：

S206，建立通信连接；

S207，获取默认的网页内容；

S208，发送网页内容；

以上步骤在服务端20与客户端10建立请求后，在服务端获取默认的网页内容向客户端发送，所述默认的网页内容，也即当前在交流的网页内容。

在客户端10中：

S209，接收网页内容在显示容器中显示；

该步骤同样参考实施例一S102在显示容器中的显示处理。

在客户端10中：

S210，接收内容切换按钮的触发事件，生成内容列表请求；

S211，发送内容列表请求；

以上步骤参考实施例一S103的内容列表请求生成处理。

在服务端20中：

S212，处理内容列表请求，生成内容列表；

S213，发送内容列表；

根据以上步骤，本发明实施例在服务端对网页内容进行管理以及为客户端提供网页内容服务，例如，将内容服务记录在数据库中存储，将每条内容服务数据记录对应的网页内容以文件形式存储，在接收到所述内容列表请求后，在内容服务记录表中检索出与本次同屏交流相关的所有内容服务记录，并生成内容列表返回。

在客户端10中：

S214，显示内容列表，接收用户选择的内容项，生成内容请求；

S215，发送内容请求；

以上步骤参考实施例一S103的内容请求生成与发送处理。

在服务端20中：

S216，获取所述内容项对应的网页内容；

S217，发送网页内容；

以上步骤根据客户端10发送的内容请求，解析所述内容请求中包含的内容项，根据所述内容项的标识信息，在内容服务记录表或内容列表中查找对应项，并获取与该内容项对应的网页内容返回。

在客户端10中：

S218，接收网页内容并在显示容器中切换显示；

在接收到服务端20返回的网页内容后，在显示容器中切换显示该网页内容。其中，当所述网页内容为网页数据时，使用新的网页数据替换显示容器中的网页数据，例如，使用新的网页数据替换显示容器div内包含的网页数据；当所述网页内容为网址时，在所述显示容器中加载该新网址，例如，在iFrame显示容器中加载新网址。

本实施例示意出了一种应用于网页同屏的内容切换的交互与处理过程，与现有技术不同的是：针对一次同屏交流，支持多个交流内容，且支持在交流过程中切换内容；服务端包括对内容服务记录的管理，处理内容列表请求、内容请求等，为客户端提供与内容相关的服务；在客户端通过所包含的显示容器显示网页内容，将以网页整体为单位的网页同屏转化为在所述显示容器上执行的网页同屏，实现了同屏内容显示、同屏控制相分离。最终，本实施例可获得的有益效果为：在客户端执行针对同屏内容相关处理时，不会干扰到同屏过程控制、网页同屏数据通信、音视频通信等，维护了交流过程的完整性，用户体验佳。

实施例三

如图3所示，示意出了一种在网页同屏过程中实时创建内容的流程，步骤如下：

在客户端10中：

S301，接收新建内容按钮上的触发事件；

S302，显示内容设置部件；

S303，接收用户执行的内容设置，生成内容创建请求；

S304，发送内容创建请求；

根据以上步骤，用户在网页同屏过程中有针对新内容进行同屏交流的需求，点击“新建内容”按钮，通过所述内容设置部件执行内容设置，通常为，上传需要交流的文件、图片，或设置需交流的网址等。S303根据用户设置的新内容，生成内容创建请求，例如，在所述内容创建请求中包括但不限于房间ID、创建者ID、内容性质（网页数据或网址）、内容类型（PDF、Word、PPT、文本、图片等）、内容数据、网页数据生成方式等信息中的一种或者多种。

在服务端20中：

S305，接收并处理内容创建请求，解析获取其包含的内容数据并存储，生成网页内容服务记录；

以上步骤中，存储内容创建请求中包含的内容数据，包括直接存储其包含的原始内容数据、将其包含的原始内容数据转换为网页数据存储两种方式，例如，所述内容创建请求为基于一Word文件创建内容，所述原始内容数据为Word文件，所述网页数据为将Word文件转换为网页后的网页数据。在该步骤生成网页内容服务记录后，还包括，在网页内容服务数据表中存储该数据记录，在数据库或文件中存储网页内容数据。其中，所述内容服务记录用于根据客户端发送的内容请求提供所述网页内容，还用于根据客户端发送的内容列表请求生成内容列表数据。

需要说明的是，以上步骤在客户端10中执行时，其执行过程不在同屏范围内，因此，其中一个客户端新建内容不会干预到其它客户端的同屏交流。可选的，本实施例提供的方法采用异步执行的方式。可选的，在所述内容创建请求中还包括在内容创建完成后是否切换内容的选项，当该选项被选择时，在所述内容创建完成后执行内容切换，即在服务端20中S305之后向客户端10发送新的网页内容。

以上实施例提供的方法，可获得的有益效果是，为用户提供了一种在网页同屏交流过程中新建内容的方式，结合本发明提供的内容切换功能，进一步的提高了交流的灵活性。

实施例四

参考图4所示的根据网页内容类型对应加载控制部件的流程示意，S401，客户端接收服务端发送的网页内容；S402，获取所述网页内容的类型信息，基于所述类型信息加载对应的控制部件。同时参考实施例一S102中加载控制部件的相关说明，在所述显示容器内部或外部加载所述控制部件。在本发明中，不对所述网页内容的类型信息进行限定，例如文件类型、是否可编辑、内容类型等均可作为所述类型信息，本实施例所加载的控制部件用于实现针对不同类型的网页内容进行相应的控制，可见，该类控制部件通常与所述类型信息相关，如不包括用于执行同屏交流权限、过程控制的相关部件。例如，所述类型信息为“PDF文件”，对应的控制部件包括：页面导航部件、全屏切换部件、缩放部件等；所述类型信息为“Word文件”，对应的控制部件包括：页面导航部件、全屏切换部件、缩放部件、编辑部件、文字选择部件等；所述类型信息为“图片”，对应的控制部件包括：缩放部件、全屏浏览部件等。

通过以上，本实施例在切换内容后，加载对应类型的控制部件，为用户针对该类型内容进行交流提供对应的控制方式，增强交流功能以提升用户体验。

实施例五

如图5所示的一种生成本地内容缓存数据的流程示意图，同时结合图6所示的一种通过本地内容缓存数据获取网页内容的流程示意图，本实施例提供了在网页同屏交流过程中在客户端生成与使用本地内容缓存数据的方法。

其中，本实施例生成本地内容缓存数据的步骤如下：

S501，在执行内容切换前从显示容器中获取网页数据；

S502，在客户端本地存储生成本地内容缓存数据记录；

以上步骤均在客户端执行，在网页同屏过程中，所述显示容器的网页数据随着交流过程通常会发生变化，例如，用户在首次进入同屏后，在所述显示容器载入内容A，即网页数据或加载网址后生成网页数据，所述网页同屏的控制方执行相关操作后，如填写表单、滑动页面等，该类操作使所述显示容器显示内容发生改变，则所述显示容器所包含的网页数据也相应发生改变，在交流过程中切换为内容B，当再次切换为内容A时，用户希望获取到内容A在切换前状态的内容，因此，在将内容A切换为内容B时，首先执行S501从显示容器中获取内容A的网页数据，然后执行S502存储生成本地内容缓存数据记录。

可选的，在客户端接收到服务端发送的网页数据，或者在显示容器中加载网址生成网页数据后，从所述显示容器中获取网页数据并存储生成本地内容缓存数据记录，则将内容首次载入后存储生成本地内容缓存数据记录，以记录本内容初始的网页内容。

可选的，在同屏交流过程中，所述显示容器中的网页数据发生改变后，从所述显示容器中获取网页数据并更新本地内容缓存数据记录。

可选的，在同屏交流过程中，当在同屏的网页数据发生改变后，在服务端新增或更新对应的内容数据。

可选的，所述控制部件还包括内容刷新部件，在接收到所述内容刷新部件上的触发事件后，在所述显示容器中加载本内容初始的网页内容，例如，用户在所述显示容器首次加载内容A，将其包含的网页数据记录为初始网页内容，在交流过程中执行了若干操作，所述内容A对应的网页数据发生改变，通过操作所述内容刷新部件使所述显示容器显示所述初始网页内容。

另外，本实施例通过本地内容缓存数据获取网页的内容的步骤如下：

S601，接收到用户选择的切换内容项，或从服务端接收到内容项切换通知；

该步骤中，包括两种情形可引起执行内容切换，一种为用户发起内容切换请求，另一种为因其他用户执行了内容切换而由服务器发出内容切换通知。

S602，判断在本地内容缓存数据记录中是否存在对应的数据记录；

通常为，根据内容ID在本地内容缓存数据记录中执行查找，当找到对应的数据记录时，执行S603，从本地内容缓存数据记录中获取网页内容并在显示容器中显示，否则，执行S604，从服务端获取网页内容并在显示容器中显示。

以上实现方式中，优先获取本地内容缓存数据记录中的网页数据在所述显示容器中显示，由此避免了向服务端请求和传输网页内容，可提升内容切换的响应速度。

实施例六

在具体的实施场景中，一方用户发起内容切换请求，服务端向各同屏交流服务端发送内容切换通知、新的网页内容，因数据获取来源、网络速度等因素，导致各客户端加载新内容时间不统一，由此，可造成以下问题：一方用户的所述显示容器显示的为旧内容，另一方用户显示的为新内容，用户对自己的显示的内容进行操作，以期待与其他用户保持同屏；一方用户的所述显示容器的显示内容已切换为新内容，对该内容进行了操作，而此时其他用户仍在切换当中，由此导致各用户切换完成后显示画面不同步；一方用户发起了内容切换请求，该用户仍拥有同屏操作控制权，在未接收到新的网页内容前的时间段内对原内容执行了操作，且一部分用户同步了所述操作，而另一部分用户未同步所述操作。

可见，以上在内容切换过程中发生了同屏、数据存储等混乱问题，本实施例提供一种在网页同屏过程中内容切换时控制同屏操作控制权的方法，如图7所示，步骤如下：

在客户端10中：

S701，发送内容请求；

S702，屏蔽发生于显示容器内的用户操作事件；

根据网页同屏的实现原理，在同一时刻仅有一个客户端用户占有对所述显示容器中网页内容的操作权限，即同屏操作控制权，由此，该客户端10可执行内容切换、发送内容切换请求，表示该用户占有同屏操作控制权。在S702中屏蔽了发生于显示容器内的用户操作事件，即表示，此刻起，所有参与同屏交流的客户端均无同屏操作控制权。

在服务端20中：

S703，处理内容请求，生成网页内容；

S704，返回网页内容；

以上步骤中，可选的，服务端处理所述内容请求，还包括向其它客户端用户发送内容切换通知，可选的，其它客户端接收服务端发送的内容切换通知，根据实施例五提供的方法从本地内容缓存数据记录中获取网页内容。

在客户端10中：

S705，在显示容器中的网页数据加载完成后，生成加载完成通知；

S706，发送加载完成通知；

以上步骤中，在一客户端完成新网页内容加载后，向服务端发送加载完成通知，以供服务端判断本次内容切换是否全部完成，以执行下一步同屏控制。

在服务端20中：

S707，在接收到所有客户端发送的加载完成通知后，生成允许操作通知；

S708，发送允许操作通知；

以上步骤服务端在判断所有参与同屏交流的客户端均完成内容切换后，向发起内容请求的所述客户端发送允许操作通知。可选的，所述服务端在S707接收到所有客户端发送的加载完成通知后，允许任一客户端请求和获取同屏操作控制权。

在客户端10中：

S709，解除显示容器内的用户操作事件屏蔽；

该步骤客户端10重新获取到同屏操作控制权，可对所述显示容器中的网页进行操作以执行网页同屏交流。

根据以上，本实施例的技术特征为，在内容切换的起始时间点控制对所述显示容器内网页的同屏操作控制权，解决在内容切换过程中的显示内容不同步问题。另外，本实施例提供的方法在内容切换过程中，各客户端之间的音视频通信并未中断，因此，在内容切换过程中仍可保持正常的语音交流。进一步的，除显示容器中的显示的内容和对其执行控制的部件外，其它的同屏数据通信、控制功能等亦可考虑保持，如同步涂鸦、音视频开关等，因此，本实施例中的所述同屏操作控制权可限制为对所述显示容器执行操作的操作权限，也可不对其进行限制，将其定义为整体的同屏控制操作权限。

实施例七

根据本发明的实现原理，客户端基于所接收的网页内容在所述显示容器中显示，所述网页内容包括网址或网页数据，对应的，结合网页同屏技术的实现原理，在所述显示容器的显示内容同步过程中，包括加载相同的网址、加载相同的网页数据两种同步方式，其中，后者通过在将用于同步的网页数据发送到客户端显示以获得同屏效果。本实施例针对基于网页数据执行同步的方式提供实施方法，参考图8所示的一种网页数据的生成方式判断与生成的流程示意图，步骤如下：

S801，根据预设的网页数据生成规则计算网页数据的生成方式，或接收指定的网页数据的生成方式；

该步骤中，所述网页数据的生成方式包括但不限于在服务端实时产生网页数据、在指定客户端实时产生网页数据、读取服务端存放的网页数据等方式，所述预设的网页数据生成规则例如，当判断服务端存在某内容对应的网页数据时，读取服务端存放的网页数据；当判断网页的性质为动态网页，且可不依赖客户端本地接口执行时，在服务端实时产生网页数据；当判断网页的性质为动态网页，且需在客户端本地执行时，指定执行客户端实时产生网页数据等。根据以上步骤，可选的，根据指定的生成方式获取网页数据，如，指定在服务端实时产生网页数据。

S802，判断网页数据的生成方式；

根据判断结果执行以下步骤：

当判断为在服务端实时产生网页数据方式时，执行S803，在服务端创建浏览器实例以运行网页内容服务记录中包含的网址，并基于浏览器实例采集所产生的网页数据；其中，所述浏览器实例为在所述服务端运行的浏览器，例如无头浏览器；

当判断为在指定客户端实时产生网页数据方式时，执行S804，向指定的客户端发送网页内容服务记录中包含的网址，在该指定的客户端运行该网址并采集所产生的网页数据；

当判断为读取服务端存放的网页数据方式时，执行S805，从对应的网页内容服务记录获取网页数据；

以上步骤中，S803在服务端的浏览器实例中运行网页，并获取网页数据向参与网页同屏的客户端发送，为一种实时产生网页数据的方式，所述浏览器实例为网页的实际运行环境，各客户端通过获取快照数据在所述显示容器中呈现获得同屏效果，在该方式中，当监听到客户端针对所述显示容器中内容的操作时，获取操作事件并生成同步数据向服务端发送，在所述浏览器实例中实际执行并提供用于同步的所述网页数据。S804同样为一种实时产生网页数据的方式，与S803不同的是，该步骤将其中的一个客户端作为同屏网页的真实运行环境以产生网页数据，类似的，在其它客户端针对所述显示容器中的内容进行操作时，获取操作事件并生成同屏数据向所述指定的客户端发送，以在所述指定的客户端实际执行并提供用于同步的所述网页数据。S805通过从服务端的网页内容服务记录获取网页数据，则要求在所述内容创建时，在服务端存储其包含的网页数据。

根据以上，本实施例提供了网页数据的生成、获取方式，在具体的实施场景中，一个同屏交流可包括一个或多个内容，在所述内容为网页数据时，每个所述内容均对应于一种生成、获取方式，例如，在一个同屏交流中存在内容A、内容B、内容C、内容D，内容A为在服务端实时产生的网页数据，内容B为在指定客户端实时产生的网页数据，内容C为在服务端存放的网页数据，内容D为一网址，用户在网页同屏时直接获取并访问。可见，本实施方式为网页同屏时网页数据的生成与获取增加了灵活性，围绕实际应用中的多种内容同屏、切换需求，实现了根据内容的性质等特别处理以产生和获取网页数据。

实施例八

本实施例提供一种应用于网页同屏的内容切换系统，如图9所示，所述系统包括服务端20、多个客户端10。所述服务端20包括同屏服务模块201、内容服务模块202、内容数据库203，其中，所述同屏服务模块201用于与客户端建立通信以提供网页同屏数据通信、同屏控制；所述内容服务模块202用于管理网页内容服务记录，接收与处理内容请求、内容创建请求、内容列表请求，创建网页内容服务记录，生成与发送网页内容；所述内容数据库203用于存储内容数据、网页内容服务记录。

所述客户端10包括同屏本地处理模块101、控制部件102、显示容器103，其中，所述同屏本地处理模块101用于建立与所述服务端间的通信、执行网页同屏数据通信、执行音频和/或视频通信、创建所述显示容器103、加载所述控制部件102；所述显示容器103用于接收与显示网页内容，包括加载所述网页内容中的网页数据、网址；所述显示容器103还用于在所述客户端被指定为实时产生网页数据的客户端时，产生并采集网页数据发送；所述控制部件102用于采集与发送用户对同屏的控制请求，还用于基于所述网页内容的类型生成对应的控制按钮；如图10所示，所述控制部件102至少包括内容切换按钮1021，用于调用内容切换功能以生成内容请求，可选的，所述控制部件102还包括内容列表部件1022，所述内容列表部件1022用于在执行内容切换时显示，用于显示内容列表、接收用户选择和生成内容请求；可选的，如图11所示，所述控制部件102还包括新建内容按钮1023，用于调用创建内容功能以生成内容创建请求。

在一种可能的实施方式中，所述内容服务模块202还包括网页数据生产模块2021，所述网页数据生产模块2021用于实时产生网页数据，在所述服务端20中包括浏览器实例204，所述网页数据生产模块2021用于创建或调用所述浏览器实例204，还用于控制所述浏览器实例204运行所述网页内容中包含的网址以产生网页数据，还用于采集所产生的网页数据并用于在所述客户端中同屏显示。

在一种可能的实施方式中，所述内容服务模块202还包括网页数据生产模块2021，所述网页数据生产模块2021用于实时产生网页数据，在指定的客户端10包括显示容器103、网页数据采集模块104，所述网页数据生产模块2021用于向所述指定的客户端10发送包含网址的所述网页内容，所述显示容器103用于运行所述网址以产生网页数据，所述网页数据采集模块104用于采集所产生的网页数据并向所述服务端20发送，所述网页数据用于在其它所述客户端中同屏显示。

以上，为本发明的一些基础实施例，用于说明本发明实现原理，可见，本发明为网页同屏提供了一种内容切换方法，支持对多个内容进行同屏交流，支持在交流过程中切换、实时新增交流内容等，增强了同屏交流功能，且提升了使用灵活性。其技术特征在于，在客户端指定或动态创建用于显示同屏网页内容的显示容器，所述显示容器位于客户端内部，且与同屏程序相独立，由此，将以网页整体为单位的网页同屏转化为在所述显示容器上执行的网页同屏，实现了同屏内容显示、同屏控制在结构上的分离，同屏控制可控制内容显示，但显示内容切换时不会对同屏控制造成影响。其有益效果包括：在同屏内容切换过程时，音视频、同屏交流过程均不会发生中断，用户体验好，且有利于执行完整的同屏交流过程管理、记录等。

需要说明的是，以上本申请的方法实施例中，一些步骤可以被相似的步骤取代，一些步骤可以合并、分解、调整顺序实施，因此，以上实施例并不构成对本申请所提出的一种应用于网页同屏的内容切换方法的限定。

本申请实施例还提供一种计算机程序产品，该计算机程序产品在被一个或多个处理器读取并执行时可实现上述任意一种实施方式提供的方法。

本申请还提供一种计算机可读存储介质，该计算机可读存储介质中存储有软件程序，软件程序在被一个或多个处理器读取并执行上述任一实施例的应用于网页同屏的内容切换方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

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

Claims (10)

1.一种应用于网页同屏的内容切换方法，其特征在于，所述方法应用于客户端，在所述客户端加载同屏程序以执行所述方法，所述方法包括：

建立与服务端间的通信连接以执行网页同屏数据通信，建立音频和/或视频通信以传输音频和/或视频数据；在所述客户端指定或动态创建用于显示网页内容的显示容器，接收所述服务端发送的网页内容并发送至所述显示容器显示；在所述显示容器内部或者外部加载控制部件，所述控制部件至少包括内容切换按钮；

接收所述内容切换按钮的触发事件，从所述服务端请求获取内容列表并显示；接收用户在所述内容列表中选择的内容项，生成内容请求向所述服务端发送；接收所述服务端返回的所述内容项对应的网页内容，在所述显示容器中切换显示所述网页内容；

其中，所述网页内容包含网页数据或网址，所述网页内容用于在所述客户端间同屏显示；所述内容列表包含一个或多个所述内容项，所述内容项对应于一个所述网页内容；所述同屏程序、所述显示容器位于所述客户端内部且为相独立的程序与部件，在所述显示容器内不包括所述同屏程序；所述显示容器显示所述网页内容，包括加载其包含的网页数据或网址；当所述内容切换时，在所述客户端加载所述网页内容而不重新加载所述同屏程序，在所述内容切换过程中所述通信连接、所述音频和/或视频通信不中断。

2.根据权利要求1所述的方法，其特征在于，所述控制部件还包括新建内容按钮，包括：

接收所述新建内容按钮的触发事件，显示内容设置部件以接收用户执行的内容设置，所述内容设置包括网址、网页、文件、图片、基于指定内容生成网页内容中的一种或者多种，所述文件为可转化为网页格式的文件；基于用户执行的所述内容设置，生成内容创建请求向所述服务端发送；

其中，所述服务端根据所接收的所述内容创建请求，生成对应的所述网页内容，并更新所述内容列表。

3.根据权利要求1所述的方法，其特征在于，所述客户端接收所述服务端发送的网页内容后，还包括，获取所述网页内容的类型信息，基于所述类型信息加载与其对应的所述控制部件。

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

获取从所述服务端接收的所述网页内容，或在执行内容切换前从所述显示容器中获取的网页数据，在所述客户端本地存储生成本地内容缓存数据记录，所述本地内容缓存数据记录至少包括内容标识、内容数据；

根据用户选择的切换内容项或从所述服务端接收的内容项切换通知，获取其包含的内容标识，基于所述内容标识在所述本地内容缓存数据记录中查找获得相应的数据记录，获取所述数据记录的内容数据在所述显示容器中显示。

5.根据权利要求1所述的方法，其特征在于，在接收所述内容切换按钮的触发事件并向所述服务端发送所述内容请求后，还包括：

屏蔽发生在所述显示容器内的用户操作事件，在所述显示容器中的网页数据加载完成后向所述服务端发送加载完成通知，其中，所述服务端在接收到所有客户端发送的所述加载完成通知后，向拥有同屏操作控制权的所述客户端发送允许操作通知；接收所述服务端发送的所述允许操作通知，解除对所述显示容器内的用户操作事件的屏蔽；

或者，向所述服务端交回同屏操作控制权，在所述显示容器中的网页数据加载完成后向所述服务端发送加载完成通知，其中，所述服务端收回所述同屏操作控制权，并在接收到所有客户端发送的所述加载完成通知后，向发送所述内容请求的所述客户端分配同屏操作控制权或允许所有客户端请求所述同屏操作控制权。

6.一种应用于网页同屏的内容切换方法，其特征在于，所述方法应用于服务端，所述方法包括：

建立与客户端间的通信连接以执行网页同屏数据通信；

获取网页内容向与之建立通信连接的所述客户端发送；

接收所述客户端发送的内容列表请求，生成内容列表向所述客户端发送；

接收所述客户端发送的内容请求，解析所述内容请求中包含的内容项，获取所述内容项对应的网页内容向客户端发送；

其中，所述网页内容包含网页数据或网址，所述网页内容用于在所述客户端间同屏显示；所述内容列表包含一个或多个所述内容项，所述内容项对应于一个所述网页内容；所述服务端在所述网页同屏过程中为所述客户端提供所述网页内容，所述网页内容用于在所述客户端的显示容器中加载，所述客户端在所述内容切换时加载所述网页内容而不重新加载同屏程序，在所述内容切换过程中所述通信连接、音频和/或视频通信不中断。

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

接收所述客户端发送的内容创建请求，解析获取其包含的内容数据并存储，生成网页内容服务记录；

其中，存储所述内容创建请求中包含的所述内容数据，包括直接存储其包含的原始内容数据、将其包含的原始内容数据转换为网页数据存储两种方式；所述网页内容服务记录用于根据所述客户端发送的内容请求提供所述网页内容，还用于生成所述内容列表数据。

8.根据权利要求6所述的方法，其特征在于，在接收到所述内容请求后，还包括：

根据预设的网页数据生成规则计算所述网页数据的生成方式，或接收指定的所述网页数据的生成方式，所述网页数据的生成方式包括从所述网页内容服务记录中获取网页数据、根据所述网页内容服务记录中包含的网址实时产生网页数据；确定所述生成方式为实时产生网页数据时，在所述服务端创建浏览器实例以运行所述网页内容服务记录中包含的网址，并基于所述浏览器实例采集所产生的网页数据，或者，向指定的客户端发送所述网页内容服务记录中包含的网址，接收所述指定的客户端所产生的网页数据并向其它所述客户端发送，其中，所述指定的客户端运行所述网页内容服务记录中包含的网址并采集所产生的网页数据。

9.一种应用于网页同屏的内容切换系统，其特征在于，所述系统包括：

服务端，包括同屏服务模块、内容服务模块、内容数据库；所述同屏服务模块用于与客户端建立通信以提供网页同屏数据通信、同屏控制；所述内容服务模块用于管理网页内容服务记录，接收与处理内容请求、内容创建请求、内容列表请求，创建网页内容服务记录，生成与发送网页内容；所述内容数据库用于存储内容数据、网页内容服务记录；其中，处理所述内容列表请求用于生成内容列表并返回所述客户端，所述内容列表包含一个或多个内容项，所述内容项对应于一个所述网页内容；

多个所述客户端，包括同屏本地处理模块、控制部件、显示容器；所述同屏本地处理模块用于建立与所述服务端间的通信、执行网页同屏数据通信、执行音频和/或视频通信、创建所述显示容器、加载所述控制部件；所述显示容器用于接收与显示网页内容，包括加载所述网页内容中的网页数据、网址；所述显示容器还用于在所述客户端被指定为实时产生网页数据的客户端时，产生并采集网页数据发送；所述控制部件用于采集与发送用户对同屏的控制请求，还用于基于所述网页内容的类型生成对应的控制按钮；所述控制部件至少包括内容切换按钮，用于调用内容切换功能以生成内容请求；所述控制部件还包括新建内容按钮，用于调用创建内容功能以生成内容创建请求。

10.根据权利要求9所述的系统，其特征在于，所述内容服务模块还包括网页数据生产模块，所述网页数据生产模块用于实时产生网页数据，包含以下结构之一：

在所述服务端包括浏览器实例，所述网页数据生产模块用于创建或调用所述浏览器实例，还用于控制所述浏览器实例运行所述网页内容中包含的网址以产生网页数据，还用于采集所产生的网页数据并用于在所述客户端间同屏显示；

或者，在指定的客户端包括显示容器、网页数据采集模块，所述网页数据生产模块用于向所述指定的客户端发送包含网址的所述网页内容，所述显示容器用于运行所述网址以产生网页数据，所述网页数据采集模块用于采集所产生的网页数据并向所述服务端发送，所述网页数据用于在其它所述客户端间同屏显示。

Images