前端控制屏幕双屏显示 pos副屏 副屏方案
之前在做到一个需求 电脑接了多个显示器 要在主屏上显示web界面 第二个屏幕上通过主屏来调起第二个界面
之前在网上看到的方案 :通过window.open(url, name, fulls)来打开浏览器 计算位置来放打开的界面 但是这个有兼容性 好像只在火狐生效 。 还有通过ActiveXObject 插件来控制啥的 我也不知道ActiveXObject是啥 反正我是没实现,文章来源js控制屏幕双屏显示
面对这个需求 可能在店铺里面见得比较多 收银机之类的 前面收银员收钱的屏幕 背面还有个打广告 显示收款信息的屏幕 这样说应该比较好理解 现在看来纯web网页端实现多多少少会有问题(话不能说的太满容易打脸)哈哈 之后发现了新的方式 也就是我下面要讲的方式 通过c语言或者其他的语言 来做一个桌面端控件 让web网站来调起这个控件 通过websocket连接来打通它们的联络实现数据共享
至于用什么语言来写桌面端的控件看你或者公司里人会用什么语言了,我只会前端所以接下来讲的会是用前端的东西来讲实现方案,下面列举了5中比较流行的框架,我用的第一种,毕竟咱前端流行开发工具 vscode工具也是来自它。
时下最流行的5个用于桌面应用程序开发的 JS 框架
- Electron
- NodeGUI
- Proton Native
- NW.js
- AppJS
使用步骤
1.搭建Electron项目:首先你要明确搭建项目只需要用Electron作中转打开在线的网址还是说你要把页面写在Electron项目里面,Electron可以集成到vue,react等框架 具体可以自行百度 下面只讲搭建Electron单项目,来连接
- 安装 electron
npm install -g electron
electron-forge 搭建一个 electron 项 目
electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包 electron 项目。
npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start
至此项目跑起来了 嫌麻烦可以直接克隆官方demo库
2. Electron中使用WebSocket 通信
- main.js:程序入口文件 我们直接写在主进程中
先创建一个浏览器窗口
const {app,BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow() {let displays = electron.screen.getAllDisplays()let externalDisplay = displays.find((display) => {return display.bounds.x !== 0 || display.bounds.y !== 0})mainWindow = new BrowserWindow({fullscreen: false,x: externalDisplay.bounds.x + 500,//y: externalDisplay.bounds.y + 50,width: 800,height: 740,title:app.getName(),frame: false ,//无边框窗体autoHideMenuBar:true,//可以使用户在打开软件时隐藏菜单栏,但是如果用户按下alt按键,菜单栏又会弹出来alwaysOnTop:true,//窗口是否永远在别的窗口上面webPreferences: {//解决electron require未定义,以下两项//是否注入nodeapinodeIntegration: true,//nodeIntegration设为false页面就不能使用nodejs和Electron APIscontextIsolation: false, //渲染进程是否启用remote模块enableRemoteModule: true,//在渲染进程中使用主进程中的模块方法时,可以使用Electron Remote解决在渲染和主进程间的通讯,这么看 remote 模块可以说是非常好用啦,渲染进程就不用显式通过 ipcRenderer / ipcMain 与主进程通信。除此之外,可以通过 remote.getGlobal 获取主进程中 的全局变量, 通过 remote.process 拿到主进程的 process 对象信息preload: path.join(__dirname, 'preload.js')}})// 窗口 不在任务栏显示 true 表示不显示,false 表示显示。mainWindow.setSkipTaskbar(false)//启动时加载 index.html页面.mainWindow.loadFile('./index.html')//打开页面调试工具:DevTools.mainWindow.webContents.openDevTools()// 永久隐藏菜单栏mainWindow.setMenu(null);mainWindow.on('closed', () => {mainWindow = null})
}
mainWindow.loadFile('./index.html') 是打开当前index.html文件作为渲染进程的界面如果是用在线地址应该用mainWindow.loadURL("http://************");的方式 代替
上面跑起来了项目并且也有了窗体打开在想要的位置第二屏,接下来是Node.js ws 模块 使用
引入:
const WebSocketServer = require('ws').Server;
创建:
var Socket =new WebSocketServer({port: 10000});//10000为端口号
Socket.on监听connection连接事件 在里面每一个socke客户端连接都会触发 接下来就是记录进来的连接
Socket.on('connection', (ws,req) => {});
例如我要A端向B端发消息这时候 A,B端都连接到这个socket服务端
let ASocket =nullSocket.on('connection', (ws,req) => {ASocket =ws //这里是收到了连接并记录下来 //下面要建立监听 接受A端消息ASocket.on('message', (message) => {// 接收到消息 反馈 这里可以判断B屏是否连接进来 连进来的话应该发给B屏的ASocket.send(JSON.stringify({type:0}))});});
上面是简单的例子 创建一个浏览器窗口代码可以直接使用 socket只给了一个简要使用说明 具体代码业务还需自己拿捏 如果有有什么疑问欢迎留言
前端控制屏幕双屏显示 pos副屏 副屏方案相关推荐
- JS实现浏览器跨屏跳转窗口/控制屏幕双屏显示
(高版本的谷歌,edge不支持跨屏,需要降低浏览器版本86.0版本)低版本谷歌浏览器 链接:百度网盘 请输入提取码https://pan.baidu.com/s/1iqgvVYSbgeoMC7WBFD ...
- js控制屏幕双屏显示
一.需求 双屏显示器下,在主屏(副屏)显示的web页面中,点击链接,打开新页面在副屏(主屏)上显示. 二.实现方式 代码实现: testdouble.html <!DOCTYPE html> ...
- 树莓派 PHP白屏,树莓派3.5英寸屏幕安装显示驱动,解决白屏问题
前几天为了树莓派显示DNS解析统计,我购买了一个3.5英寸的树莓派显示屏幕,它采用的显示方式是SPI方式,占用树莓派的26个IO口,由于不是采用HDMI方式显示,所以要安装树莓派显示驱动,否则屏幕是一 ...
- 多屏控制处理器双屏显示卡边缘融合视频叠加与大屏幕投影效果[转]
摘自互联网:大屏幕时代 最近我用两台投影机实现了的最大分辨率为2000×768的HDTV的方案,在这里把我的攻略写出来跟大家分享一下.4.7m*2m的环幕,支持2.35:1的电影播放.硬件成本大概是2 ...
- cefsharp实现双屏显示网页(横屏|竖屏)可拖动分隔条
知识点: 1)横向或纵向显示双网页 2)嵌入式窗体的实现方法 实现方式:通过快捷键方式或窗体嵌入方式,上图是通过快捷键调用方式,可能更灵活 //通过给pan ...
- 怎么连接屏幕_触控一体机怎么实现无线投屏功能
触控一体机怎么实现无线投屏功能 今天早上有网友咨询,他会议室买的85寸触控会议平板,但是自带的无限投屏功能不能满足会议室的需求,想通过专业的无线投屏设备满足会议室的需求.通过对用户需求的了解,推荐相对 ...
- 副屏幕全屏_win7双屏电脑主屏副屏设置|Win7系统如何设置双屏显示?
随着人们对现实要求越来越高,双屏显示越来越受人们的关注.在日常生活中,我们使用电脑一般只需要一个显示屏,不过有时候做一些工作需要用到多个显示屏.例如抄股做T+0操作,既要关注大盘的走势又要关注股票的走 ...
- 双屏鼠标经常跑到副屏_这个电脑的双屏幕,让我重新找回了修图的乐趣
从事摄影自媒体工作这么多年,每天的工作都接触到修图.虽然手机里的大部分图片还是以手机修为主,但是对于一些精修的细节,时不时还需要在电脑上进行完善. 如果我在选择修图的笔记本电脑时,最主要的诉求是:1. ...
- win10 双屏显示 鼠标可以从主屏幕左侧滑入右侧竖屏
win10 双屏显示 鼠标可以从主屏幕左侧滑入右侧竖屏 把之前的位置用鼠标拖拽一下,放到左边即可.
最新文章
- Asp.Net 创建MetaWeblog API
- stm32f4 hs 电路_三相电路分析
- 科来网络分析系统概要介绍
- MIMIC 以太坊医疗项目开发(4)Axios
- 2022年全球及中国脂肪酸氯化物行业专项可行性与供需前景调研报告
- android 随意漂浮动画,Android实现气泡漂浮动画,类似IOS Game Center中气泡动画
- 设计模式在Netty中的应用-观察者模式源码举例
- .net 读蓝牙数据_Linux内核曝严重蓝牙漏洞,影响多个版本
- 里用gam使用_第一次使用Roam一头雾水?
- 测试计划剔除 log剔除_我是如何在整个公司面前被剔除的(以及为什么这样做很好)...
- antd vue关闭模态对话框_Vue.extend 登录注册模态框
- (转)对冲基金不信中国经济数据,转用卫星监控6000块工业用地
- Transfer Learning from Speaker Verification to Multispeaker Text-To-Speech Synthesis
- 挑战运筹学——单纯形法,大M法
- 张勋说:溢流型棒磨机在水煤浆气化中的应用及技改(图文)
- 12/27复习有感--整环的整除性
- 计划预算(PV)、实际完成工作预算(EV)、实际成本(AC)
- 《树莓派开发笔记 - 第1部分 基础篇》第7章 树莓派变身路由器
- 第6章 系统数据文件和信息
- 帝国cms自动生成html首页,分享一个帝国CMS定时生成首页(自动刷新首页)的方法...