JavaScript如何在浏览器未聚焦时捕获POS场景手持扫描仪输入

绝大多数普通USB手持扫描仪默认是模拟键盘输入模式，只有当前系统聚焦的窗口才能接收到对应的按键事件，这就是你之前只有Web应用窗口聚焦时才能捕获扫码内容的核心原因，针对需求有以下几种可落地的解决方案：

方案1：调整扫描仪输出模式+本地轻量代理服务 #

• 工业级手持扫描仪普遍支持切换为虚拟串口模式/HID POS专属模式，而非默认的模拟键盘模式，配置后扫码输出内容不会进入全局键盘输入流，只有主动监听对应硬件端口的程序可以获取数据
• 用Node.js、Python等工具开发一个几十行代码即可实现的本地后台常驻服务，设置开机自启，监听扫描仪对应的端口，拿到EAN编码后通过本地WebSocket服务主动推送给前端Web应用
• Web应用只要在初始化时和本地WebSocket服务建立长连接，无论窗口是否处于聚焦状态，都能实时接收EAN编码，后续正常查询商品信息展示对应图片即可

该方案无需修改现有POS收银软件的任何逻辑，改造成本极低，稳定性高，是优先推荐的方案

方案2：全局键盘钩子+本地代理服务 #

• 如果你的扫描仪不支持切换输出模式，只能使用模拟键盘模式，可以开发带全局键盘钩子能力的本地后台服务
• 后台服务监听系统全局的所有键盘输入，通过扫描仪输入的特征过滤出EAN编码：比如输入速度远快于人工打字（13位EAN码通常100ms内即可完成输入）、固定长度、末尾自带回车/制表符后缀，也可以手动给扫描仪配置专属的前缀、后缀标识，比如所有扫码内容前缀加#、后缀加@，钩子程序只提取被这两个标识包裹的内容，误判率可以降到几乎为0
• 过滤得到EAN编码后，同样通过本地WebSocket推送给Web应用即可

方案3：对接现有POS收银软件 #

• 如果你有现有POS收银软件的二次开发权限，可以直接修改收银软件逻辑，拿到扫码输入的EAN编码后，调用本地HTTP接口推送给本地代理服务，再转发给Web应用
• 也可以配置收银软件将扫码得到的EAN编码写入本地固定的临时文件，Web应用通过File API轮询读取文件更新获取最新编码，该方案实时性略低于WebSocket方案，适合特殊场景下使用

内容的提问来源于stack exchange，提问作者Leon