看我如何让手机秒变扫码枪

简介: 为解决无扫码枪问题,作者受到微信小程序“超级扫码枪”启发,决定自制手机扫码到电脑的应用。项目需求是手机扫描条形码或二维码后实时传送到电脑。实现步骤包括:电脑端用Java Swing和Robot模拟键盘输入,手机端H5调用摄像头扫码(借助html5-qrcode库),并通过WebSocket服务将结果发送至电脑。项目源码及演示视频链接提供。

工作中偶尔需要使用扫码枪进行扫码到电脑上,但是手头又没有扫码枪,跟老板说买一把,老板觉得这东西不常用。于是想着是否可以利用手机扫码功能…到微信小程序里搜索“扫码枪”,发现里面有一个叫“超级扫码枪”的小程序,当看完它实现的功能,瞬间想起“贫穷限制了你的想象力”这句话。下面是关于超级扫码枪的介绍:

超级扫码枪是一款通过小程序扫码(条形码,二维码)后,实时发送到电脑(PC)的轻应用。适用于扫商品包装上的条形码或二维码、扫快递单号、扫发票二维码等等。

我就在琢磨它的实现原理,我自己是否也可以实现它的功能。再者说,一款软件有它的优点自然也有它的缺点,我要实现该软件的基本功能就得比它更简单、更安全、更易使用。于是,立项,开干!!!

需求

实现手机变扫码枪,调用手机摄像头扫码后实时发送到电脑(PC)的文本框内。

任务解析

  • 首先要想电脑(PC)端怎么模拟键盘录入信息
  • 其次手机端怎么调用摄像头并扫码
  • 最后手机端要把扫码结果发送到电脑(PC)端

实战

  1. 电脑(PC)端写个Java客户端Swing程序,并利用Robot模拟键盘录入。Java客户端的实现借鉴了两个项目:
    https://gitee.com/wmazh/easytodo
    https://gitee.com/s2689763871_admin/sftptool
  2. 手机端写个H5页面调用手机摄像头并扫码【注意:用html5-qrcode 要求web服务器必须https协议访问,如果不是的话,是不能使用webRTC的,也就没有获取摄像头的权限了。】
    使用了这个前端类库:https://github.com/mebjas/html5-qrcode
    这是H5的示例:https://github.com/mebjas/html5-qrcode/tree/master/examples/html5
    结合它提供的线上实例:https://blog.minhazav.dev/research/html5-qrcode.html
  3. 电脑(PC)端起WebSocket服务,手机端连接该服务并实时发送消息【该方案的局限性,手机端和电脑端必须在一个wifi下才可以进行通讯发送消息】

演示效果

PC端效果

手机端扫码效果

资源链接

项目源码地址:https://gitee.com/zkool/h5-barcode-gun
电脑(PC)端下载地址:H5扫码枪 V1.0 · zkool/h5-barcode-gun
视频介绍地址:https://www.bilibili.com/video/BV1CH4y1L78Z

目录
相关文章
|
安全 Java Maven
关于代码混淆,看这篇就够了
关于代码混淆,看这篇就够了
1450 4
|
机器学习/深度学习 存储 数据采集
阿里云 ACP是什么?阿里云 ACP有什么用?
ACP是什么,它是阿里云企业推出的针对于数据分析工程师的资格认证,有极高的含金量。因为阿里云在国内市场处于领先地位,他们推出的资格认证自然而然受到很多人的欢迎,很多互联网行业从业人员都以获得阿里ACP认证为荣。那么,阿里云 ACP是什么?阿里云 ACP有什么用?在认证大使官网上查阅了相关资料,我得到了答案
2932 0
阿里云 ACP是什么?阿里云 ACP有什么用?
如何给 NPM 设置代理
GFW 蛋疼的把 https://registry.npmjs.org 给墙了,导致无法通过 NPM 安装模块。
3908 0
|
Java Maven C++
Java在后台获取USB二维码扫描枪扫描的内容
在Java Web项目中集成扫描枪,首先发现扫描枪可模拟键盘输入,聚焦窗口即接收数据。通过官网电话得知有串口编程支持,但项目无串口,故搜索Java串口解决方案。找到开源项目,理解其工作原理。使用Java Native Access (JNA)来监听操作系统输入,解决Java JVM无法直接获取键盘输入的问题。遇到jar包缺失问题,最终在国内仓库mvnjar.com找到合适版本运行成功。实现时需注意处理字母大小写和特殊字符输入。
470 4
|
10月前
|
存储 人工智能 大数据
物联网、大数据、云计算、人工智能之间的关系
物联网、大数据、云计算、人工智能之间的关系是紧密相连、相互促进的。这四者既有各自独立的技术特征,又能在不同层面上相互融合,共同推动信息技术的发展和应用。
2742 0
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
1473 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
11月前
|
BI Linux API
掌握 SkiaSharp 轻松实现 .NET 跨平台绘图
.NET 框架的发展,我们越来越多地寻求能够在多个平台上无缝运行的应用解决方案。
1753 2
|
11月前
|
安全 双11
最新阿里云国际版支付方式以及注册教程和方法
最新阿里云国际版支付方式以及注册教程和方法
|
Linux Shell 开发工具
Linux文件内容查看和编辑指南:cat、less、grep等常用命令详解(一)
Linux文件内容查看和编辑指南:cat、less、grep等常用命令详解(一)
2384 0
WebStorm、Idea编辑器中右侧的SVN下拉,提交标志不见了呢?--已解决
WebStorm、Idea编辑器中右侧的SVN下拉,提交标志不见了呢?--已解决
626 0