js 二维码扫描盒/枪对接

七里汀

已于 2023-03-24 15:48:17 修改

阅读量4.1k

点赞数 2

文章标签：前端

于 2023-03-24 15:45:15 首次发布

本文链接：https://blog.csdn.net/xy_peng/article/details/129751870

版权

二维码扫描盒/枪对接

前言

二维码应用非常广泛，使用场景有：手机上网、个人名片、凭证类、溯源类、数据防伪等等，如下图：

使用也非常简单，外接USB接口, 如下图，以下就是我对接的盒子
图1.2 扫码枪/盒子

原理

拿到二维码阅读器盒子，附带一个使用说明书，记得一定要先阅读说明书，这个很重要！这里会有两个模式，一个是USB虚拟串口模式（需要安装相应的驱动程序），一个是USB-HID模式（默认）。大多数都采用的是默认的HID试模式，我这边也是默认的HID模式。

将扫码器USB插入设备，扫码器一般会有指示灯光亮起，或是蜂鸣“嘀”一声，标识设备已初始化成功。然后在设备上打开任意可以输入的文本或是控件，例如：记事本、文本框，浏览器输入框。将任意测试的二维码，对准扫码器，听到扫码器“滴”一声提示扫码成功，那么可以看到设备文本框或是控件上，一个字符一个字符慢慢的出现二维码内容。
图2.1 扫码枪返回结果

以上可以看到，扫码枪/盒子在USB-HID模式下，会劫持设备系统的键盘输入事件，将二维码内容通道键盘输入事件的通道传入设备。

应用场景

在web前端中查阅API，键盘事件**KeyboardEvent**描述了用户与键盘的交互。每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown，keypress 与 keyup 用于识别不同的键盘活动类型。从keydown、keypress、keyup三种类型中最终选择keydown事件。keydown对象如下图所示：
图2.2 KeyboardEvent返回对象

场景一：

在document或是window上添加事件监听，这里使用的是addEventListener事件的API，有一个注意点，就是removeEventListener的对应使用。

created () {
    // 解决重复监听
    document.removeEventListener('keydown', this.handleKeydown, true)
    // 添加事件监听
    document.addEventListener('keydown', this.handleKeydown, true)
}

handleKeydown (event) {
    // 处理KeyboardEvent事件
    console.log(event)
    if (event.key && event.key.length === 1) {
       this.qrcodeStr += event.key
    }
    if (event.key === 'Enter') {
        console.log('==扫码结果===', this.QrcodeStr)
    }
}

该场景是一个应用内的全局监听，适用于简单的场景。不过要注意的缺陷是，应用内的所有input输入框，都会触发这个监听回调。

场景二：

添加一个input输入框，将KeyboardEvent对接到该聚焦的输入框。
图3.1 添加输入框

<template>
    <input ref="inputData" size="large" placeholder="请输入" @blur="inputBlur" @compositionstart.native="compositionstart" />
</template>

created () {
    // 自动聚焦
    this.keyPress()
},
methods: {  
    keyPress () {
        // nextTick 针对DOM 没有渲染出现Undefined问题
        this.$nextTick(() => {
            this.$refs.inputdata.focus()
        })
    },
    compositionstart (val) {
        //当用户使用拼音输入法开始输入汉字时，这个事件就会被触发
       console.log('===compositionstart==', val)
    },
    inputBlur (val) {
        console.log('===inputBlur==', val)
        const that = this
        // FireFox 和 IE 失去焦点，blur直接执行focus 不会生效，加个延时
        setTimeout(() => {
            that.$refs.inputdata.focus()
        }, 10)
    },
}

项目应用

根据项目测温访客机5032型号应用访客系统客户端，需求中需要扫码枪将识别健康码信息回传入应用中，通过接口传入健康码系统做健康码信息查询，同时场景一模式适合需求。为了解决场景一的缺陷，思考了一下，考虑到有以下两种方式。

方式一：

单独处理input控件，做一个自定义的input组件注册，在input自带的focus以及blur事件中做一个拦截。在focus事件中移除全局监听，在blur中恢复监听，将页面内的所有的input控件替换掉，全部使用这个自定义的input。

blur () {
   document.addEventListener('keydown', this.handleKeydown, true)
},
focus () {
  document.removeEventListener('keydown', this.handleKeydown, true)
}

方式二：

基于程序的延展性与复杂性考虑，方式一不是很适合。回到问题的最初分析，扫码枪会劫持系统的键盘输入事件，包括程序中所有的input、textarea等输入框。那么场景一中document上监听的keydown事件中的回调，也就成了系统输入事件的回调，包括input、textarea等。可以在该回调中再次做一个劫持过滤。如下：

handleKeydown (event) {
  if (event.target.tagName !== 'BODY') {
    console.log(event.target.tagName)
    return
  }
  // 处理KeyboardEvent事件
  if (event.key && event.key.length === 1) {
     this.QrcodeStr += event.key
  }
  // 二维码传输结束符  
  if (event.key === 'Enter') {
    console.log('==扫码结果===', this.QrcodeStr)
  }
},

性能测试

打包提交测试，做连续的扫码的性能测试，发现会有二维码字符串有缺失问题，如下：

图5.1 二维码测试结果

分析问题

字符串缺失问题，先添加日志手机字符串缺失的内容，观察二维码内容缺失的字符是不是有规律。通过大量的测试数据观察，没发现规律，排除是特殊字符串传输中转码问题。接着排查字符串处理逻辑问题，去除代码中处理逻辑，继续测试排查，排除代码处理逻辑缺陷。接下来排查KeyboardEvent事件类型keydown，keypress 与 keyup 用于识别不同的键盘活动类型去测试，依旧还有这个字符串缺失的问题。

接下来从系统传输的问题排查，跳出开发的应用程序。在设备的应用里面，打开浏览器浏览器或是其他的文本输入区，聚焦的情况下，测试扫码数据，同样发现这个问题，出现在浏览器和文本输入区二维码结果字符串缺失。这个就需要探究设备系统的问题，只能去请教设备系统开发人员。

问题结论

开发人员分析是系统传输速率问题，然后说了更多的专业术语，大致的情况是扫码器的输入输出是分开的两个线程，内部会有一个消息缓存buffer，当输出的进程与输入的速率不一致，导致buffer溢出，抛出异常的结果。。。唉？一脑子的摸不着头脑，更深的认识到隔行如隔山的障碍。最后对方给出的方案是系统需要做个版本补丁。问题的下一阶段就是交给他，等他将系统新版本的安装包交付提出来，然后对设备进行刷机，重新安装系统。

总结是：需要在系统的IO中添加buffer，使之延长，减缓这个速率问题。最后就是刷机安装系统的步骤，需要自己亲自动手去实践了。