# h5-barcode-gun

**Repository Path**: zkool/h5-barcode-gun

## Basic Information

- **Project Name**: h5-barcode-gun
- **Description**: H5条码枪，手机秒变扫码枪
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 20
- **Forks**: 9
- **Created**: 2024-02-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简介
H5扫码枪采用Java Swing桌面开发，接收WebSocket消息，并模拟键盘录入数据，手机端H5网页调用手机摄像头扫码并实时发送数据到电脑任意位置。

# 需求背景
工作中偶尔需要使用扫码枪，但是手头又没有，跟老板说买一把，老板觉得这东西不常用。于是想着是否可以利用手机扫码功能。

# 效果展示

![电脑端](images/smq-pc.png)

![手机端](images/smq-mobile.png)

手机端线上测试地址：<https://zkool.github.io/html/scanner/index.html>

> 扫码体验微信小程序端

<table>
    <tr>
        <td><img height="160" src="/images/xcx.jpg"/></td>
        <td><img height="160" src="/images/gh_ab61ba5034cd_258.jpg"/></td>
    </tr>
</table>

# 下载地址
* 电脑端V1.2：<https://gitee.com/zkool/h5-barcode-gun/tags>
* 电脑端V1.3：<https://pan.baidu.com/s/1qdaodlVBz-hVom27OJcFcA?pwd=ezym>

# 其他资源
* 使用教程：<https://mp.weixin.qq.com/s/TAMKg-UtxGTqg3rNmBqAVg>
* 视频介绍地址：<https://www.bilibili.com/video/BV1CH4y1L78Z>
* 手机H5扫一扫Js组件：<https://zkool.github.io/html/scanner/scanModal.html>
  
**扫码关注公众号获取最新动态&加入交流群**

![公众号二维码](images/mp.jpg)

# 升级日志

## V1.3.0 (2025-05-26)
* 全新升级，电脑端用Electron重构，整合V1.1.2和V1.2
* 同时支持H5+PDA+小程序+局域网+互联网+离线等多终端多场景扫码

## V1.1.2 (2025-04-17)
* 手机端支持微信小程序局域网websocket通信

## V1.2 (2025-04-12)
* 升级手机与PC电脑通讯方式为https+wss，解决浏览器扫码页面与pc端通讯websocket连接失败问题
* 支持手机浏览器扫码页面不再依赖github线上网址，可直接访问本地网址，本地网址是https://电脑端ip:2025
* 扫码页面英文汉化

## V1.1 (2024-02-25)
* 扫码后增加回车换行
* 键盘录入时取消50毫秒的延时

## V1.0 (2024-02-25)
* 实现手机变扫码枪，调用手机摄像头扫码后实时发送到电脑（PC）的文本框内


---

# 以下是开发过程的思考

## 任务解析

* 首先要想电脑端怎么模拟键盘录入信息

* 其次手机端怎么调用摄像头并扫码

* 最后手机端要把扫码结果发送到电脑端

## 实现思路

* 电脑端写个Java客户端Swing程序，并利用Robot模拟键盘录入。Java客户端的实现借鉴了两个项目：

    1. <https://gitee.com/wmazh/easytodo>

    2. <https://gitee.com/s2689763871_admin/sftptool>

* 手机端写个H5页面调用手机摄像头并扫码【注意：用html5-qrcode 要求web服务器必须https协议访问，如果不是的话，是不能使用webRTC的，也就没有获取摄像头的权限了。】

    1. 使用了这个前端类库：<https://github.com/mebjas/html5-qrcode>

    2. 这是H5的示例：<https://github.com/mebjas/html5-qrcode/tree/master/examples/html5>

    3. 结合它提供的线上实例：<https://blog.minhazav.dev/research/html5-qrcode.html>

* 电脑端起WebSocket服务，手机端连接该服务并实时发送消息


## 记录：
扫码支持定义 DecodeHintType.ASSUME_GS1
https://github.com/mebjas/html5-qrcode/issues/669
hints.set(ZXing.DecodeHintType.ASSUME_GS1, true);

直接修改编译后的：
o.set(E.DecodeHintType.POSSIBLE_FORMATS, i), o.set(E.DecodeHintType.TRY_HARDER, !1), o.set(E.DecodeHintType.ASSUME_GS1, !0), this.hints = o

Html5QrcodeScanner 初始化摄像头列表时，移除前置摄像头
renderCameraSelection()
//数组t中的对象的label属性包含front则移除该对象
t = t.filter((function(t) {
return !t.label.includes("front")
}))

t=t.filter((function(t){return !t.label.includes("front")}));