WEBHID API搭配条形码扫描器时inputreport事件不触发问题求助

问题原因 #

• 扫码触发按钮点击：绝大多数民用条形码扫描器出厂默认是键盘模拟模式，扫码后会模拟键盘输入条码内容，且默认在末尾追加回车符。如果当前页面焦点落在openButton上，回车会直接触发按钮的onclick事件。
• 参数类型不匹配：WebHID规范要求filters中的vendorId、productId为十进制数字类型，你的代码中传入的是字符串，仅在极个别浏览器隐式类型转换的场景下能匹配到设备，这就是刷新上百次才偶发成功的核心原因。同理你判断device.productId != "9032"时，device.productId本身是数字类型，和字符串比较永远返回真，导致inputreport事件逻辑直接被拦截。
• 重复打开设备异常：你没有判断device.opened状态，每次触发点击就调用device.open()，已打开的设备重复调用open()会抛出未捕获的异常，导致后续事件绑定逻辑不执行，甚至设备连接被强制重置。
• 数据过滤逻辑错误：你直接过滤了首字节为0的报文，大多数HID类扫描器的输入报告首字节为报告ID或保留位，默认就是0，会导致你直接丢掉了所有正常的扫码报文。

排查与解决思路 #

1. 修复扫码触发按钮点击问题

• 参考扫描器说明书，扫对应设置码将扫描器从键盘模拟模式切换为纯HID输出模式，从根源避免模拟键盘输入触发页面元素动作。
• 临时解决方案：页面初始化时取消按钮的默认焦点，同时在openButton的点击逻辑开头加状态判断，设备已打开的场景直接返回，不执行后续逻辑。

2. 修正WebHID API参数类型
   将过滤和判断逻辑中的ID全部改为数字类型：

// 请求设备时的过滤参数
const filters = [
  {
    vendorId: 8792, 
    productId: 9032
  }
];
// 产品ID判断改为数字比较
if (device.productId !== 9032) return;

3. 优化设备打开与事件绑定逻辑
   避免重复打开设备、重复绑定事件，同时先打印完整报文排查数据格式：

// 把事件处理逻辑抽为独立函数，方便移除重复绑定
function handleInputReport(event) {
  const { data, reportId } = event;
  // 先打印完整报文，不要直接过滤首字节
  const fullData = new Uint8Array(data.buffer);
  console.log(`报告ID: ${reportId}, 完整数据: ${JSON.stringify(fullData)}`);
  // 后续根据实际报文格式解析条码内容
}

openButton.onclick = async event => {
  // 增加设备已打开的判断，避免重复执行
  if (!device || device.opened) return;
  try {
    await device.open();
    // 先移除之前可能绑定的事件，避免重复监听
    device.removeEventListener('inputreport', handleInputReport);
    device.addEventListener('inputreport', handleInputReport);
    console.log(`设备已打开，等待扫码输入...`);
  } catch (e) {
    console.log(`设备打开失败: ${e.message}`);
  }
};

4. 排查系统独占问题

• 确认扫描器没有被其他扫码软件、系统默认键盘驱动独占，关闭其他占用HID设备的程序后再测试。
• Chrome浏览器可访问chrome://device-log/查看设备连接、打开、报文传输的具体报错，定位异常点。

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