屏幕共享方法及装置

技术领域

本申请涉及数据处理技术领域，尤其涉及一种屏幕共享方法及装置。

背景技术

随着信息技术的发展，网络已成为信息传播的重要手段。基于远程控制与操作互动作为一种新的交互方式，让用户不需要身临其境便可以实现相同的互动，异地的观看与操作，其中，屏幕共享是数据共享中的一种重要应用，屏幕共享是指将共享终端的屏幕上显示的信息实时显示到接收终端的屏幕上。

通常用户共享屏幕是基于操作系统API和用于屏幕共享的客户端支持实现的，如果仅需要临时共享屏幕中的浏览器上的操作，例如，用户操作网站遇到问题时将自己的操作同步给开发人员，那么通过操作系统API和客户端实现屏幕共享，存在效率低并且复杂程度高等问题。

发明内容

针对现有技术中的问题，本申请提出了一种屏幕共享方法及装置，能够提高屏幕共享的效率和便捷化程度，进而能够提高用户体验。

为了解决上述技术问题，本申请提供以下技术方案：

第一方面，本申请提供一种屏幕共享方法，包括：

接收屏幕共享请求；

根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端；

应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息；

将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

进一步地，所述定时从所述浏览器的缓存中获取预设时间段内的用户操作信息，包括：

应用requestAnimationFrame方法，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

进一步地，在所述应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息之后，还包括：

若接收到屏幕共享中止指令，则中止本次屏幕共享。

进一步地，所述用户操作信息包括：鼠标移动、鼠标交互、页面滚动、视窗变更和用户输入信息中的至少一种。

第二方面，本申请提供一种屏幕共享装置，包括：

快照接收模块，用于接收屏幕共享请求；

快照发送模块，用于根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端；

操作信息接收模块，用于应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息；

屏幕共享模块，用于将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

进一步地，所述操作信息接收模块，用于应用requestAnimationFrame方法，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

进一步地，所述的屏幕共享装置，还包括：

终止模块，用于若接收到屏幕共享中止指令，则中止本次屏幕共享。

进一步地，所述用户操作信息包括：鼠标移动、鼠标交互、页面滚动、视窗变更和用户输入信息中的至少一种。

第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的屏幕共享方法。

第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现所述的屏幕共享方法。

由上述技术方案可知，本申请提供一种屏幕共享方法及装置。其中，该方法包括：接收屏幕共享请求；根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端；应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息；将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享，能够提高屏幕共享的效率和便捷化程度，进而能够提高用户体验；具体地，可以在用户遇到问题时便捷地将操作信息实时同步给开发人员的接收终端，开发人员可以根据用户的操作快速定位问题原因，提高作业效率，无需安装客户端，轻量并且便捷。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例中屏幕共享方法的流程示意图；

图2是本申请另一实施例中屏幕共享方法的流程示意图；

图3是本申请实施例中屏幕共享装置的结构示意图；

图4是本申请应用实例中屏幕共享系统的结构示意图；

图5是本申请应用实例中屏幕共享方法的第一流程示意图；

图6是本申请应用实例中屏幕共享方法的第二流程示意图；

图7为本申请实施例的电子设备的系统构成示意框图。

具体实施方式

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

基于此，为了提高屏幕共享的效率和灵活度，进而提高用户体验，本申请实施例提供一种屏幕共享装置，该装置可以是一服务器或客户端设备，所述客户端设备可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(PDA)、车载设备和智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表和智能手环等。

在实际应用中，进行屏幕共享的部分可以在如上述内容所述的服务器侧执行，也可以所有的操作都在所述客户端设备中完成。具体可以根据所述客户端设备的处理能力，以及用户使用场景的限制等进行选择。本申请对此不作限定。若所有的操作都在所述客户端设备中完成，所述客户端设备还可以包括处理器。

上述的客户端设备可以具有通信模块(即通信单元)，可以与远程的服务器进行通信连接，实现与所述服务器的数据传输。所述服务器可以包括任务调度中心一侧的服务器，其他的实施场景中也可以包括中间平台的服务器，例如与任务调度中心服务器有通信链接的第三方服务器平台的服务器。所述的服务器可以包括单台计算机设备，也可以包括多个服务器组成的服务器集群，或者分布式装置的服务器结构。

所述服务器与所述客户端设备之间可以使用任何合适的网络协议进行通信，包括在本申请提交日尚未开发出的网络协议。所述网络协议例如可以包括TCP/IP协议、UDP/IP协议、HTTP协议、HTTPS协议等。当然，所述网络协议例如还可以包括在上述协议之上使用的RPC协议(Remote Procedure Call Protocol，远程过程调用协议)、REST协议(Representational State Transfer，表述性状态转移协议)等。

需要说明的是，本申请公开的屏幕共享方法及装置可用于金融技术领域，也可用于除金融技术领域之外的任意领域，本申请公开的屏幕共享方法及装置的应用领域不做限定。

具体通过下述各个实施例进行说明。

为了提高屏幕共享的效率和便捷化程度，进而提高用户体验，本实施例提供一种执行主体是屏幕共享装置的屏幕共享方法，如图1所示，该方法具体包含有如下内容：

步骤100：接收屏幕共享请求。

具体地，可以接收屏幕共享装置的前端发送的屏幕共享请求，用于启动屏幕共享。

步骤200：根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端。

具体地，可以获取屏幕共享装置的浏览器的DOM初始状态全量，将该DOM初始状态全量作为所述页面全量快照；可以将该页面全量快照经由服务终端发送至接收终端，所述服务终端包括但不限于服务器，所述接收终端可以是一终端设备，如计算机、平板电脑和手机等；所述服务终端可以存储有屏幕共享装置和接收终端之间的对应关系，可以根据该对应关系确定屏幕共享装置对应的接收终端。

步骤300：应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

具体地，所述用户操作信息包括：鼠标移动、鼠标交互、页面滚动、视窗变更和用户输入信息中的至少一种；鼠标移动信息可以包含有：鼠标移动前后的光标位置；鼠标交互信息可以包含有：触发鼠标左键标识、触发鼠标右键标识和双击左键标识等，用于确定是否触发鼠标；页面滚动信息可以包含有：滚动条相对于信息展示页面的偏移量；视窗变更可以包含有：视窗变更前后的长度和高度。

可以按照一定时间间隔定时从所述浏览器的缓存中获取用户操作信息，时间间隔可以根据实际需要进行设置，作为优选，可以在50至100毫秒范围内；所述预设时间段可以为上一次获取用户操作信息之后至本次获取用户操作信息之间的时间范围；所述用户操作信息为预设时间段内用户操作对应的用户操作信息即增量快照；在浏览器启动后，可以基于屏幕共享装置的浏览器的变动观察器MutationObserver收集用户的实时操作信息，上传至服务器保存或实时同步到至少一个接收终端，接收终端可以设有与所述屏幕共享装置相同型号的浏览器，能够实现轻量级的屏幕共享和操作共享。

步骤400：将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

具体地，可以将该用户操作信息经由服务终端发送至接收终端；可以将所述页面全量快照还原至所述接收终端，根据接收的用户操作信息调整接收终端还原后的页面，以实现屏幕共享。

为了避免屏幕共享时延，提高屏幕共享的可靠性，在本申请一个实施例中，步骤300中所述的定时从所述浏览器的缓存中获取预设时间段内的用户操作信息包括：

步骤301：应用requestAnimationFrame方法，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

为了进一步提高屏幕共享的可靠性，参见图2，在本申请一个实施例中，在步骤300之后，还包括：

步骤500：若接收到屏幕共享中止指令，则中止本次屏幕共享。

具体地，所述共享中止指令可以是屏幕共享装置的前端发送的；可以在步骤300之后接收到共享中止指令，也可以在屏幕共享方法的任何阶段接收到前端发送的共享中止指令，若接收到，则中止本次屏幕共享。

从软件层面来说，为了提高屏幕共享的效率和便捷化程度，进而提高用户体验，本申请提供一种用于实现所述屏幕共享方法中全部或部分内容的屏幕共享装置的实施例，参见图3，所述屏幕共享装置具体包含有如下内容：

快照接收模块10，用于接收屏幕共享请求。

快照发送模块20，用于根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端。

操作信息接收模块30，用于应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

其中，所述用户操作信息包括：鼠标移动、鼠标交互、页面滚动、视窗变更和用户输入信息中的至少一种。

屏幕共享模块40，用于将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

在本申请一个实施例中，所述操作信息接收模块，用于应用requestAnimationFrame方法，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

在本申请一个实施例中，所述的屏幕共享装置，还包括：

终止模块，用于若接收到屏幕共享中止指令，则中止本次屏幕共享。

本说明书提供的屏幕共享装置的实施例具体可以用于执行上述屏幕共享方法的实施例的处理流程，其功能在此不再赘述，可以参照上述屏幕共享方法实施例的详细描述。

为了进一步说明本方案，本申请提供一种屏幕共享系统的应用实例，参见图4，在本应用实例中，所述屏幕共享系统包括：共享终端1、服务终端2和接收终端3；其中，服务终端2分别与所述共享终端1和接收终端3通信连接；所述共享终端实现的功能可以相当于上述屏幕共享装置实现的功能。

具体地，共享终端用于收集用户操作行为，并将操作行为序列化后传给服务终端；服务终端用于管理共享终端与接收终端的信息，将共享终端收集到的操作信息推送至正确的若干个接收终端；接收终端用于在页面上重放从服务终端推送来的操作信息。

结合上述屏幕共享系统，本申请提供一种屏幕共享方法的应用实例，该方法具体描述如下：

如图5所示，在共享终端侧执行以下步骤：

S101：发送页面全量快照。

具体地，当用户启动操作共享时，共享终端首先保存共享终端浏览器的DOM初始状态全量，将DOM初始状态全量作为页面全量快照；通过服务终端与接收终端进行一次同步，将页面全量快照同步至各接收终端。

S102：收集用户操作信息。

后续基于当前视图状态监听所有对视图造成改动的事件，形成增量快照；利用浏览器的MutationObserver接口记录共享终端的动作(包括DOM变化、鼠标移动、鼠标交互、页面滚动、视窗大小改变和用户输入)，将这些动作临时保存至LocalStorage浏览器缓存内。

S103：序列化用户操作信息。

具体地，定时将共享终端在这个时间片段内积累的行为记录即用户操作信息序列化。

S104：发送用户操作信息。

具体地，将序列化后的用户操作信息发送至服务终端，序列化是指将DOM数据转换为特定的文本格式(例如JSON)以方便传输。

S105：判断分享是否结束，若是，则结束，否则返回执行步骤S102。

具体地，判断用户是否终止操作分享，如果结束则终止记录，如果未结束则进入下一个时间片段重复上述操作。

如图6所示，在接收终端侧执行以下步骤：

S201：同步页面全量快照。

具体地，当接收终端开始加入本次分享时，接收终端首先会将共享终端的页面全量快照同步到本地，以保证后续获得的增量快照能够正确还原。

S202：接收用户操作信息。

具体地，通过websocket通信协议接收服务终端的推送信息。

S203：判断分享是否结束，若是，则结束；否则执行步骤S204。

S204：校正用户操作信息。

具体地，若用户操作信息为序列化数据，则对序列化数据进行时间校正，由于需要异步按照正确的时间重放每次一个增量快照，因此需要一个高精度的计时器，原生的setTimeout可能会由于主线程阻塞而导致不能在设置的延迟时间后准确执行，因此基于requestAnimationFrame方法提供一个不断校准的定时器，保证增量快照的重放延迟不超过一帧。

S205：将用户操作信息还原至页面上，返回执行步骤S202。

服务终端用于存储共享终端与接收终端的对应关系，以及将共享终端上送的用户操作信息同步至对应的接收终端。共享终端通过定时轮询的方式，将用户操作信息传给服务终端，而服务终端则通过websocket通信协议，将接收到的用户操作信息主动推送至接收终端。接收终端将用户操作信息还原至页面上，返回执行步骤S202，等待服务终端再次推送。

由上述描述可知，本申请提供的屏幕共享方法及装置，能够提高屏幕共享的效率和便捷化程度，进而能够提高用户体验；具体地，可以在用户遇到问题时便捷地将操作信息实时同步给开发人员的接收终端，开发人员可以根据用户的操作快速定位问题原因，提高作业效率，无需安装客户端，轻量并且便捷。

从硬件层面来说，为了提高屏幕共享的效率和灵活度，进而提高用户体验，本申请提供一种用于实现所述屏幕共享方法中的全部或部分内容的电子设备的实施例所述电子设备具体包含有如下内容：

处理器(processor)、存储器(memory)、通信接口(Communications Interface)和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述通信接口用于实现所述屏幕共享装置以及用户终端等相关设备之间的信息传输；该电子设备可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该电子设备可以参照实施例用于实现所述屏幕共享方法的实施例及用于实现所述屏幕共享装置的实施例进行实施，其内容被合并于此，重复之处不再赘述。

图7为本申请实施例的电子设备9600的系统构成的示意框图。如图7所示，该电子设备9600可以包括中央处理器9100和存储器9140；存储器9140耦合到中央处理器9100。值得注意的是，该图7是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。

在本申请一个或多个实施例中，屏幕共享功能可以被集成到中央处理器9100中。其中，中央处理器9100可以被配置为进行如下控制：

步骤100：接收屏幕共享请求。

步骤200：根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端。

步骤300：应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

步骤400：将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

从上述描述可知，本申请的实施例提供的电子设备，能够提高屏幕共享的效率和灵活度，进而提高用户体验。

在另一个实施方式中，屏幕共享装置可以与中央处理器9100分开配置，例如可以将屏幕共享装置配置为与中央处理器9100连接的芯片，通过中央处理器的控制来实现屏幕共享功能。

如图7所示，该电子设备9600还可以包括：通信模块9110、输入单元9120、音频处理器9130、显示器9160、电源9170。值得注意的是，电子设备9600也并不是必须要包括图7中所示的所有部件；此外，电子设备9600还可以包括图7中没有示出的部件，可以参考现有技术。

如图7所示，中央处理器9100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器9100接收输入并控制电子设备9600的各个部件的操作。

其中，存储器9140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器9100可执行该存储器9140存储的该程序，以实现信息存储或处理等。

输入单元9120向中央处理器9100提供输入。该输入单元9120例如为按键或触摸输入装置。电源9170用于向电子设备9600提供电力。显示器9160用于进行图像和文字等显示对象的显示。该显示器例如可为LCD显示器，但并不限于此。

该存储器9140可以是固态存储器，例如，只读存储器(ROM)、随机存取存储器(RAM)、SIM卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为EPROM等。存储器9140还可以是某种其它类型的装置。存储器9140包括缓冲存储器9141(有时被称为缓冲器)。存储器9140可以包括应用/功能存储部9142，该应用/功能存储部9142用于存储应用程序和功能程序或用于通过中央处理器9100执行电子设备9600的操作的流程。

存储器9140还可以包括数据存储部9143，该数据存储部9143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器9140的驱动程序存储部9144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。

通信模块9110即为经由天线9111发送和接收信号的发送机/接收机9110。通信模块(发送机/接收机)9110耦合到中央处理器9100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。

基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块9110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)9110还经由音频处理器9130耦合到扬声器9131和麦克风9132，以经由扬声器9131提供音频输出，并接收来自麦克风9132的音频输入，从而实现通常的电信功能。音频处理器9130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器9130还耦合到中央处理器9100，从而使得可以通过麦克风9132能够在本机上录音，且使得可以通过扬声器9131来播放本机上存储的声音。

上述描述可知，本申请的实施例提供的电子设备，能够提高屏幕共享的效率和灵活度，进而提高用户体验。

本申请的实施例还提供能够实现上述实施例中的屏幕共享方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的屏幕共享方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

步骤100：接收屏幕共享请求。

步骤200：根据所述屏幕共享请求获取页面全量快照，将该页面全量快照发送至接收终端。

步骤300：应用浏览器的变动观察器采集用户操作信息并将该用户操作信息保存在该浏览器的缓存内，定时从所述浏览器的缓存中获取预设时间段内的用户操作信息。

步骤400：将所述用户操作信息发送至所述接收终端，以使该接收终端应用所述用户操作信息和页面全量快照，完成屏幕共享。

从上述描述可知，本申请实施例提供的计算机可读存储介质，能够提高屏幕共享的效率和灵活度，进而提高用户体验。

本申请中上述方法的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。相关之处参见方法实施例的部分说明即可。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本申请中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。