前端 WebHID API：弥合与人机接口设备之间的差距

WebHID API 通过实现与人机接口设备 (HID) 的直接通信，为 Web 应用程序开辟了一个充满可能性的新世界。 该 API 允许网站与各种通常无法通过标准 Web API 访问的设备交互，从而扩展了基于 Web 的应用程序的功能，并创造了创新的用户体验。 本指南提供了 WebHID API、其应用、实现细节和重要的安全注意事项的全面概述。

什么是 WebHID？

WebHID（Web 人机接口设备 API）是一个 Web API，允许网页访问和与 HID 设备交互。 HID 是人类用来与计算机交互的广泛设备类别，包括：

• 键盘
• 鼠标
• 游戏手柄和操纵杆
• 专用输入设备（例如，条形码扫描仪、科学仪器、定制控制器）

传统上，Web 应用程序在直接与这些设备交互的能力方面受到限制。 WebHID API 通过提供一种安全且受控的方式，使网页能够通过 JavaScript 与 HID 通信，从而弥合了这一差距。

为什么使用 WebHID？

WebHID API 提供了优于传统 HID 设备交互方法的几个优点：

• 直接访问： 能够直接与设备通信，绕过标准浏览器 API 的限制。
• 扩展功能： 支持更广泛的设备，包括标准 API 可能无法识别的专用硬件。
• 可定制的交互： 允许开发人员为与特定设备交互定义自定义协议和数据格式。
• 增强的用户体验： 通过更好地控制用户输入，创建更具沉浸感和响应速度的 Web 应用程序。
• 跨平台兼容性： WebHID 旨在在支持该 API 的不同操作系统和浏览器之间提供一致的体验。

WebHID 的用例

WebHID API 在各个行业中具有广泛的潜在应用：

游戏

WebHID 为基于 Web 的游戏提供了高级游戏手柄和操纵杆支持，从而实现更精确的控制和身临其境的游戏体验。 例如，想象一个完全在浏览器中运行的飞行模拟器，它使用专用的飞行操纵杆进行逼真的控制。 模拟器可以直接读取飞行操纵杆每个轴和按钮的输入，而不是仅限于通用的游戏手柄支持。

可访问性

该 API 可用于创建辅助技术，允许残疾用户更有效地与 Web 内容交互。 专用输入设备（例如，头部跟踪器或吸气和呼气开关）可以直接集成到 Web 应用程序中，从而提供自定义的输入方法。 这允许有运动障碍的用户更轻松地浏览网站并与 Web 应用程序交互。

科学和工业应用

WebHID 实现了用于控制和监视科学仪器和工业设备的基于 Web 的界面。 这允许研究人员和工程师从远程位置访问和分析数据。 考虑一个测量温度和压力的实验室仪器。 通过 WebHID，Web 应用程序可以直接从仪器读取数据并实时显示，从而消除了在本地计算机上安装专用软件的需要。

教育

WebHID 可用于创建交互式教育工具，这些工具利用专用输入设备进行实践学习。 例如，虚拟解剖工具可以使用触觉反馈设备来模拟不同组织的触感，为学生提供更逼真和引人入胜的学习体验。

自定义硬件接口

该 API 提供了一种直接从 Web 浏览器与自定义构建的硬件设备交互的方式。 这为涉及微控制器、传感器和其他电子元件的创新项目开辟了可能性。 想象一个控制连接到微控制器的自定义 LED 照明系统的 Web 应用程序。 该应用程序可以使用 WebHID 向微控制器发送命令，控制灯的颜色和亮度。

WebHID 的工作原理：技术概述

API 结构

WebHID API 由几个关键接口和方法组成：

• navigator.hid： WebHID API 的入口点。
• HID.requestDevice()： 提示用户选择要连接的 HID 设备。
• HIDDevice： 代表已连接的 HID 设备。
• HIDDevice.open()： 打开与设备的连接。
• HIDDevice.close()： 关闭与设备的连接。
• HIDDevice.addEventListener('inputreport', ...)： 侦听来自设备的传入数据。
• HIDDevice.sendReport()： 向设备发送数据。
• HIDDevice.sendFeatureReport()： 向设备发送功能报告。
• HIDDevice.getFeatureReport()： 从设备检索功能报告。

连接到 HID 设备

连接到 HID 设备的过程涉及以下步骤：

1. 请求访问： 调用 navigator.hid.requestDevice() 提示用户选择一个设备。 此方法接受一个可选的过滤器参数，该参数允许您指定您感兴趣的设备类型。
2. 设备选择： 浏览器显示设备选择器，允许用户选择 HID 设备。
3. 打开连接： 用户选择设备后，调用 HIDDevice.open() 建立连接。
4. 接收数据： 侦听 HIDDevice 对象上的 'inputreport' 事件以接收来自设备的数据。
5. 发送数据（可选）： 调用 HIDDevice.sendReport() 或 HIDDevice.sendFeatureReport() 向设备发送数据。
6. 关闭连接： 完成后，调用 HIDDevice.close() 关闭连接。

示例代码段

以下是连接到 HID 设备并接收数据的基本示例：

async function connectToHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [{
        usagePage: 0x0001, // 通用桌面控制
        usage: 0x0004      // 操纵杆
      }]
    });

    if (devices.length > 0) {
      const device = devices[0];

      device.addEventListener('inputreport', event => {
        const { data, reportId } = event;
        const bytes = new Uint8Array(data.buffer);
        console.log(`从报告 ${reportId} 接收到的数据：`, bytes);
        // 在此处处理数据
      });

      await device.open();
      console.log(`已连接到设备：${device.productName}`);
    } else {
      console.log('未选择 HID 设备。');
    }
  } catch (error) {
    console.error('连接到 HID 设备时出错：', error);
  }
}

connectToHIDDevice();

安全注意事项

安全性是 WebHID API 的一个关键方面。 由于该 API 允许直接访问硬件，因此实施安全措施以防止恶意代码利用漏洞非常重要。

• 用户权限： 在网站可以访问 HID 设备之前，该 API 需要明确的用户权限。 浏览器会显示一个设备选择器，允许用户选择要连接的设备。
• 仅限 HTTPS： WebHID API 仅在安全 (HTTPS) 连接上可用。 这有助于防止中间人攻击。
• 源隔离： 该 API 受同源策略的约束，该策略限制对来自不同域的资源的访问。
• 清除输入： 始终清除从 HID 设备接收的输入，以防止注入攻击。
• 最小权限： 仅请求访问应用程序所需的特定 HID 设备和功能。
• 定期更新： 保持您的浏览器和操作系统为最新状态，以确保您拥有最新的安全补丁。

WebHID 开发的最佳实践

遵循这些最佳实践将帮助您创建强大且用户友好的 WebHID 应用程序：

• 提供清晰的说明： 清楚地向用户解释您的应用程序为什么需要访问 HID 设备以及该设备将如何使用。
• 妥善处理错误： 实施错误处理以妥善处理未找到设备或无法连接到设备的情况。
• 优化性能： 优化您的代码以最大限度地减少延迟并确保流畅的用户体验。
• 彻底测试： 使用各种 HID 设备测试您的应用程序以确保兼容性。
• 考虑可访问性： 在设计应用程序时考虑到可访问性，确保残疾用户可以使用它。
• 遵循安全最佳实践： 遵守上面概述的安全准则，以保护您的用户和您的应用程序。

浏览器支持

以下浏览器目前支持 WebHID API：

• Google Chrome（89 及更高版本）
• Microsoft Edge（89 及更高版本）

对其他浏览器的支持正在开发中。 请查看浏览器的官方文档，以获取有关 WebHID 支持的最新信息。

WebHID 的未来

WebHID API 是一项快速发展的技术，具有光明的未来。 随着浏览器支持的扩展和新功能的添加，该 API 将为基于 Web 的应用程序解锁更多可能性。

一些潜在的未来发展包括：

• 改进的设备发现： 增强设备选择器，使用户更容易找到并连接到 HID 设备。
• 标准化数据格式： 为常见的 HID 设备开发标准化数据格式，以简化开发并提高互操作性。
• 增强的安全功能： 实施额外的安全措施，以进一步保护用户免受恶意代码的侵害。
• 蓝牙支持： 扩展 API 以支持蓝牙 HID 设备。

结论

WebHID API 代表了 Web 应用程序功能的重大进步。 通过提供对人机接口设备的直接访问，该 API 为创建创新和身临其境的用户体验开辟了无限可能。 无论您是开发基于 Web 的游戏、辅助技术、科学仪器还是自定义硬件接口，WebHID API 都能让您创建以前不可能的 Web 应用程序。 通过了解 API、其安全考虑因素和最佳实践，您可以利用 WebHID 的强大功能来构建下一代 Web 体验。