本发明涉及大屏显示控制领域,特别涉及一种基于网页切换的展示大屏切换控制方法。
背景技术:
1、在企业、工厂等生产经营领域,需要监控大屏或展示大屏对一些数据进行展示,进行监控、介绍等操作。传统的展示大屏只会展示一个系统的内容,因此不需要切换控制,随着企业的发展和需求的增加,展示大屏被需要展示多个系统的界面信息并控制不同系统之间的切换,不同系统之间的切换涉及到控制策略以及系统有密码情况下的登录操作,因此在切换时需要对此进行考虑;现有技术常采用的方式采用专门的控制设备或安装专门开发的app对展示大屏进行控制,造成用户成本高,体验不好。而且现有技术尝尝只能切换五密码的系统页面,需要用户登录的页面会弹出登录界面,无法完成展示功能,也无法实现在控制端对大屏展示元素的控制、无法切换cs架构的系统。
技术实现思路
1、本发明的目的在于克服现有技术的不足,提供一种基于网页切换的展示大屏切换控制方法,用于解决上述切换展示大屏页面存在的至少一个技术问题。
2、为了实现上述目的,本发明采用的技术方案为:一种基于网页切换的展示大屏切换控制方法,展示大屏连接至控制电脑,控制电脑对展示大屏进行控制;在控制电脑上安装有vnc服务器软件并配置vnc服务器,设置访问权限和密码;基于html开发vnc服务页面,所述vnc服务页面被配置有大屏控制功能;具有上网功能的终端设备通过浏览器访问vnc服务界面实现在vnc服务界面对控制电脑的操控进而实现展示大屏页面的切换控制。
3、在控制电脑中编写大屏内容管理程序,所述大屏内容管理程序被配置为保存所需展示和切换的web系统的url链接,保存大屏展示内容的场景分类,根据不同的场景来切换需要展示的web系统链接。
4、基于编写startginserver自定义函数,监听8090端口,发布/pg/sc/接口http服务;利用iframe标签,嵌入所保存的web系统url链接至sc.html服务页面,在sc.html服务页面,通过编写的websocketinit自定义函数,与startginserver服务建立websocket链接,实时接受控制端发来的切换命令,修改前述iframe中的src地址,切换展示内容,startginserver服务发送切换控制命令,切换展示内容。
5、在控制电脑中安装nginx服务,配置反向代理,对跨域限制进行屏蔽,实现浏览器跨域。
6、在控制电脑中安装nginx服务;编写nginx的反向代理规则,将请求转发到后端服务。在所述规则中,为每个代理系统设置server,选择监听端口port范围为8001-8020;编写nginx的跨域资源共享(cors)策略,proxy_hide_header www-authenticate;屏蔽应用系统认证限制,设置access-control-allow-origin、access-control-allow-headers响应头屏蔽跨域限制;设置x-frame-options为allowall,允许浏览器的iframe跨域嵌套;设置sub_filter,替换代理页面部分内容,为代理页面增加域:<script>document.domain="10.11.12.11"</script>。
7、配置需要展示的系统的登录用户和密码,编写脚本自动登录,实现同域名下系统自动登录。
8、收集需要展示的系统及其登录接口;编写自定义脚本login函数,调用jqueryajax函数,设置请求类型为post,编写success回调函数,将成功请求的结果保存到浏览器sessionstorage,localstorage,cookie中,存储登录凭据,并确保安全性;编写自定义脚本startlogin函数,调用前述的login函数向登录接口发送请求,保存返回的token,模拟登录过程;编写pagelogin.html页面,将前述startlogin函数置于<script type="text/javascript"></script>标签中,页面加载,自动运行startlogin函数;部署pagelogin.html页面到前述nginx服务中,编写pagelogin.html页面访问链接,与前述代理的系统页面在相同的server和端口port下,保证同域;浏览器利用cookie或session机制,在再次发送请求的时候会自动带上同域名下的cookie,实现同域名下的系统自动登录;
9、在控制电脑中编写截屏软件发布接口服务,将cs架构系统展示到页面端,实现对cs桌面程序进行切换展示。
10、编写captruescreen函数,根据500毫秒的频率,调用screenshot.capturerect函数,对屏幕进行截屏,捕获cs架构系统的屏幕内容;编写startserver函数,发布"/remotescreen/"截屏服务,提供api接口供screen.html页面调用;编写screen.html页面,调用"/remotescreen/"服务,展示截屏图片;screen.html页面保存至前述“大屏内容管理程序”,供前述“sc.html”页面切换调用;编写startwebsocket函数,将前述截图通过base64编码后,推送到screen.html页面,实现将cs架构系统嵌入到web页面中,实现在web端对桌面程序的展示和切换,实现在前端展示桌面程序的画面。
11、本发明的优点在于:实现对需要展示的系统自动登录,对cs架构系统快速接入,对展示的系统实现手机控制,无需特殊设备,无需安装app,支持手机、pad、普通计算机等多个终端进行控制,使用方便快捷。
1.一种基于网页切换的展示大屏切换控制方法,其特征在于:展示大屏连接至控制电脑,控制电脑对展示大屏进行控制;在控制电脑上安装有vnc服务器软件并配置vnc服务器,设置访问权限和密码;基于html开发vnc服务页面,所述vnc服务页面被配置有大屏控制功能;具有上网功能的终端设备通过浏览器访问vnc服务界面实现在vnc服务界面对控制电脑的操控进而实现展示大屏页面的切换控制。
2.如权利要求1所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:在控制电脑中编写大屏内容管理程序,所述大屏内容管理程序被配置为保存所需展示和切换的web系统的url链接,保存大屏展示内容的场景分类,根据不同的场景来切换需要展示的web系统链接。
3.如权利要求2所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:基于编写startginserver自定义函数,监听8090端口,发布/pg/sc/接口http服务;利用iframe标签,嵌入所保存的web系统url链接至sc.html服务页面,在sc.html服务页面,通过编写的websocketinit自定义函数,与startginserver服务建立websocket链接,实时接受控制端发来的切换命令,修改前述iframe中的src地址,切换展示内容,startginserver服务发送切换控制命令,切换展示内容。
4.如权利要求1-3任一所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:在控制电脑中安装nginx服务,配置反向代理,对跨域限制进行屏蔽,实现浏览器跨域。
5.如权利要求4所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:在控制电脑中安装nginx服务;编写nginx的反向代理规则,将请求转发到后端服务。在所述规则中,为每个代理系统设置server,选择监听端口port范围为8001-8020;编写nginx的跨域资源共享(cors)策略,proxy_hide_header www-authenticate;屏蔽应用系统认证限制,设置access-control-allow-origin、access-control-allow-headers响应头屏蔽跨域限制;设置x-frame-options为allowall,允许浏览器的iframe跨域嵌套;设置sub_filter,替换代理页面部分内容,为代理页面增加域:<script>document.domain="10.11.12.11"</script>。
6.如权利要求1-4任一所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:配置需要展示的系统的登录用户和密码,编写脚本自动登录,实现同域名下系统自动登录。
7.如权利要求6所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:收集需要展示的系统及其登录接口;编写自定义脚本login函数,调用jquery ajax函数,设置请求类型为post,编写success回调函数,将成功请求的结果保存到浏览器sessionstorage,localstorage,cookie中,存储登录凭据,并确保安全性;编写自定义脚本startlogin函数,调用前述的login函数向登录接口发送请求,保存返回的token,模拟登录过程;编写pagelogin.html页面,将前述startlogin函数置于<script type="text/javascript"></script>标签中,页面加载,自动运行startlogin函数;部署pagelogin.html页面到前述nginx服务中,编写pagelogin.html页面访问链接,与前述代理的系统页面在相同的server和端口port下,保证同域;浏览器利用cookie或session机制,在再次发送请求的时候会自动带上同域名下的cookie,实现同域名下的系统自动登录。
8.如权利要求1-4任一所述的一种基于网页切换的展示大屏切换控制方法,其特征在于:在控制电脑中编写截屏软件发布接口服务,将cs架构系统展示到页面端,实现对cs桌面程序进行切换展示。
9.如权利要求8所述的一种基于网页切换的展示大屏切换控制方法,其特征在于: