一种web网页屏幕分享与双向控制方法及系统技术方案

本发明专利技术涉及屏幕共享领域，公开了一种web网页屏幕分享与双向控制方法及系统，用于提高网页屏幕共享的适配性以及控制的安全性。所述方法包括：采集第一页面的网页元素及操作数据，并通过预设的消息形式和websocket发送网页元素及操作数据；当接收到第二终端加入websocket的消息时，发送第一终端的全量快照和当前页面的滚动高度，并根据当前页面的滚动高度对第一终端进行页面高度校准；加入通讯频道并连接websocket，在第二终端连接成功后，创建rrweb播放器，并将rrweb播放器插入html节点中；计算屏幕高度和屏幕宽度，并根据屏幕高度和屏幕宽度进行设备适配，以及通过websocket对第一终端发送提示消息以提示第二终端加入了通讯频道。了通讯频道。了通讯频道。

【技术实现步骤摘要】
一种web网页屏幕分享与双向控制方法及系统


[0001]本专利技术涉及屏幕共享领域，尤其涉及一种web网页屏幕分享与双向控制方法及系统。

技术介绍

[0002]远程交流场景下，常有屏幕分享和控制的需求。现有的屏幕分享、远程控制技术，主要采用获取窗口画面，采用音视频传输协议（如webRTC，udp直播）技术，实现分享者画面同步投放至观看方，远程控制时，采用控制协议传输设备事件至分享者，进行实时控制操作。
[0003]现有方案往往需要较重的客户端要求，需要获取音视频权限，设备权限等，一般需要安装原生客户端或APP；音视频传输分辨率极易受网络带宽影响，弱网时可能降低分辨率，导致画面不清晰；由于采用音视频传输，无法做到控制画面效果，如涉及一些敏感内容，无法进行有效屏蔽；控制权限开放后，对方获取全部操作权限，无法有效规避操作中的安全风险。

技术实现思路

[0004]本专利技术提供了一种web网页屏幕分享与双向控制方法及系统，用于提高网页屏幕共享的适配性以及控制的安全性。
[0005]本专利技术第一方面提供了一种web网页屏幕分享与双向控制方法，所述web网页屏幕分享与双向控制方法包括：将预置embed元素嵌入第一终端的第一页面，通过所述第一终端发起页面分享，并在发起页面分享之后，创建websocket连接；在websocket创建成功后，开启所述第一终端中的rrweb播放器采集所述第一页面的网页元素及操作数据，并通过预设的消息形式和所述websocket发送所述网页元素及所述操作数据；当接收到第二终端加入websocket的消息时，发送所述第一终端的全量快照和当前页面的滚动高度，并根据所述当前页面的滚动高度对所述第一终端进行页面高度校准；通过所述第二终端加入通讯频道并连接所述websocket，在所述第二终端连接成功后，创建所述第二终端的第二页面所对应的rrweb播放器，并将所述rrweb播放器插入html节点中；计算所述第二终端的屏幕高度和屏幕宽度，并根据所述第二终端的屏幕高度和屏幕宽度对所述第二终端对应的设备进行适配，以及通过所述websocket对所述第一终端发送提示消息以提示所述第二终端加入了所述通讯频道。
[0006]结合第一方面，在本专利技术第一方面的第一实施方式中，所述web网页屏幕分享与双向控制方法还包括：接收所述第一终端发送的全量快照和录制操作；调用所述rrweb播放器的addevent方法，在所述第二终端对应的第二页面中，对所述第一页面进行页面实时回放；计算所述第二终端的屏幕滚动高度，并根据所述屏幕滚动高度对所述第二页面进行校准定位。
[0007]结合第一方面，在本专利技术第一方面的第二实施方式中，所述web网页屏幕分享与双
向控制方法还包括：接收所述第二终端申请控制的消息，并根据所述第二终端申请控制的消息创建或加入控制的websocket连接；在控制连接成功后，接收所述第二终端发送的操作事件，并通过应用镜像操作进行页面操作。
[0008]结合第一方面，在本专利技术第一方面的第三实施方式中，所述在控制连接成功后，接收所述第二终端发送的操作事件，并通过应用镜像操作进行页面操作，包括：在控制连接成功后，对所述第二终端中的rrweb回放的播放器进行隐藏处理，并创建控制的播放器；将所述第二终端的当前操作记录通过所述websocket发送至所述第一终端，并通过应用镜像操作进行页面操作。
[0009]结合第一方面，在本专利技术第一方面的第四实施方式中，所述web网页屏幕分享与双向控制方法还包括：当所述第一终端取消控制时，通过所述第一终端销毁控制对象，关闭控制的websocket连接，关闭websocket的连接，执行取消控制；当所述第二终端取消控制时，通过所述第二终端销毁控制的websocket对象，销毁控制相关对象，删除控制的播放器，展示rrweb回放的播放器。
[0010]结合第一方面，在本专利技术第一方面的第五实施方式中，所述web网页屏幕分享与双向控制方法还包括：当所述第一终端停止分享时，通过所述第一终端停止推送并关闭rrweb录制，关闭心跳检测，关闭其他操作；当所述第二终端停止分享时，通过所述第二终端退出分享频道，执行取消控制，从html中删除rrweb播放器，关闭反向滚动控制组件，关闭心跳检测。
[0011]本专利技术第二方面提供了一种web网页屏幕分享与双向控制系统，所述web网页屏幕分享与双向控制系统包括：创建模块，用于将预置embed元素嵌入第一终端的第一页面，通过所述第一终端发起页面分享，并在发起页面分享之后，创建websocket连接；采集模块，用于在websocket创建成功后，开启所述第一终端中的rrweb播放器采集所述第一页面的网页元素及操作数据，并通过预设的消息形式和所述websocket发送所述网页元素及所述操作数据；发送模块，用于当接收到第二终端加入websocket的消息时，发送所述第一终端的全量快照和当前页面的滚动高度，并根据所述当前页面的滚动高度对所述第一终端进行页面高度校准；连接模块，用于通过所述第二终端加入通讯频道并连接所述websocket，在所述第二终端连接成功后，创建所述第二终端的第二页面所对应的rrweb播放器，并将所述rrweb播放器插入html节点中；处理模块，用于计算所述第二终端的屏幕高度和屏幕宽度，并根据所述第二终端的屏幕高度和屏幕宽度对所述第二终端对应的设备进行适配，以及通过所述websocket对所述第一终端发送提示消息以提示所述第二终端加入了所述通讯频道。
[0012]结合第二方面，在本专利技术第二方面的第一实施方式中，所述web网页屏幕分享与双向控制系统还包括：回放模块，用于接收所述第一终端发送的全量快照和录制操作；调用所述rrweb播放器的addevent方法，在所述第二终端对应的第二页面中，对所述第一页面进行页面实时回放；计算所述第二终端的屏幕滚动高度，并根据所述屏幕滚动高度对所述第二页面进行校准定位。
[0013]结合第二方面，在本专利技术第二方面的第二实施方式中，所述web网页屏幕分享与双向控制系统还包括：控制模块，用于接收所述第二终端申请控制的消息，并根据所述第二终端申请控制的消息创建或加入控制的websocket连接；操作模块，用于在控制连接成功后，
接收所述第二终端发送的操作事件，并通过应用镜像操作进行页面操作。
[0014]结合第二方面，在本专利技术第二方面的第三实施方式中，所述操作模块具体用于：在控制连接成功后，对所述第二终端中的rrweb回放的播放器进行隐藏处理，并创建控制的播放器；将所述第二终端的当前操作记录通过所述websocket发送至所述第一终端，并通过应用镜像操作进行页面操作。
[0015]结合第二方面，在本专利技术第二方面的第四实施方式中，所述web网页屏幕分享与双向控制系统还包括：取消控制模块，用于当所述第一终端取消控制时，通过所述第一终端销毁控制对象，关闭控制的websocket连接，关闭websocket的连接，执行取消控制；当所述第二终端取消控制时，通过所述第二终端销毁本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web网页屏幕分享与双向控制方法，其特征在于，所述web网页屏幕分享与双向控制方法包括：将预置embed元素嵌入第一终端的第一页面，通过所述第一终端发起页面分享，并在发起页面分享之后，创建websocket连接；在websocket创建成功后，开启所述第一终端中的rrweb播放器采集所述第一页面的网页元素及操作数据，并通过预设的消息形式和所述websocket发送所述网页元素及所述操作数据；当接收到第二终端加入websocket的消息时，发送所述第一终端的全量快照和当前页面的滚动高度，并根据所述当前页面的滚动高度对所述第一终端进行页面高度校准；通过所述第二终端加入通讯频道并连接所述websocket，在所述第二终端连接成功后，创建所述第二终端的第二页面所对应的rrweb播放器，并将所述rrweb播放器插入html节点中；计算所述第二终端的屏幕高度和屏幕宽度，并根据所述第二终端的屏幕高度和屏幕宽度对所述第二终端对应的设备进行适配，以及通过所述websocket对所述第一终端发送提示消息以提示所述第二终端加入了所述通讯频道；所述web网页屏幕分享与双向控制方法还包括：接收所述第二终端申请控制的消息，并根据所述第二终端申请控制的消息创建或加入控制的websocket连接；在控制连接成功后，接收所述第二终端发送的操作事件，并通过应用镜像操作进行页面操作；其中，在控制连接成功后，对所述第二终端中的rrweb回放的播放器进行隐藏处理，并创建控制的播放器；将所述第二终端的当前操作记录通过所述websocket发送至所述第一终端，并通过应用镜像操作进行页面操作；当所述第一终端取消控制时，通过所述第一终端销毁控制对象，关闭控制的websocket连接，关闭websocket的连接，执行取消控制；当所述第二终端取消控制时，通过所述第二终端销毁控制的websocket对象，销毁控制相关对象，删除控制的播放器，展示rrweb回放的播放器；当所述第一终端停止分享时，通过所述第一终端停止推送并关闭rrweb录制，关闭心跳检测，关闭其他操作；当所述第二终端停止分享时，通过所述第二终端退出分享频道，执行取消控制，从html中删除rrweb播放器，关闭反向滚动控制组件，关闭心跳检测。2.根据权利要求1所述的web网页屏幕分享与双向控制方法，其特征在于，所述web网页屏幕分享与双向控制方法还包括：接收所述第一终端发送的全量快照和录制操作；调用所述rrweb播放器的addevent方法，在所述第二终端对应的第二页面中，对所述第一页面进行页面实时回放；计算所述第二终端的屏幕滚动高度，并根据所述屏幕滚动高度对所述第二页面进行校准定位。3.一种web网页屏幕分享与双向控制系统，其特征在于，所...

【专利技术属性】
技术研发人员：吴联鹏，张睿千，
申请(专利权)人：深圳高益科技有限公司，
类型：发明
国别省市：