WebHID设备已打开但oninputreport监听器失效问题求助

你的代码中，选择指定vendorId和productId的HID键盘并打开后，按键时oninputreport监听器无响应，主要原因和解决方法如下：

核心原因：系统独占默认键盘输入 #

普通键盘作为系统默认输入设备，操作系统会独占其输入报告，WebHID无法获取到这些报告——系统优先接管键盘输入用于系统级操作（比如输入文字、快捷键），不会将报告传递给WebHID API。

排查与解决步骤 #

1. 更换测试设备 #

使用非系统正在使用的外接键盘（比如额外插一个USB键盘，当前系统用内置键盘），或者专门的HID测试设备（非系统默认输入设备）进行测试。这类设备的输入报告不会被系统独占，WebHID可以正常监听。

2. 完善错误处理与状态校验 #

在打开设备的逻辑中添加错误捕获，确认设备是否成功打开：

openButton.onclick = async event => {
  try {
    await device.open();
    console.log('设备已成功打开');
    device.oninputreport = ({device, reportId, data}) => {
      console.log(`输入报告 ${reportId} 来自 ${device.productName}:`, new Uint8Array(data.buffer));
    };
  } catch (err) {
    console.error('打开设备失败:', err);
  }
};

如果打开时抛出权限或设备占用错误，就能直接定位问题。

3. 检查设备报告结构 #

在获取设备后，打印设备的报告集合，确认输入报告的ID和格式：

requestDevice.onclick = async event => {
  document.body.style.display = "none";
  try {
    const filters = [
      { vendorId: 0x03F0, productId: 0x034A } // keyboard
    ];

    [device] = await navigator.hid.requestDevice({ filters });
    if (!device) return;
    console.log('设备信息:', device);
    // 打印报告结构，确认输入报告的ID
    console.log('设备报告集合:', device.collections);
  } finally {
    document.body.style.display = "";
  }
};

通过device.collections可以查看设备支持的报告ID、报告类型（输入/输出/特征），确保你监听的是正确的输入报告ID。部分键盘的输入报告ID可能为0（无报告ID），或者特定数值。

4. 确认浏览器环境要求 #

WebHID仅支持Chromium内核浏览器（Chrome、Edge等），且需要运行在HTTPS环境下（localhost开发环境除外）。

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