探讨 WebHID (Human Interface Device) 和 WebUSB API 如何允许网页安全地与特定硬件设备进行通信。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，大家好！欢迎来到今天的“网页与硬件的蜜月之旅”讲座。我是你们的导游，今天就带大家深入探索 WebHID 和 WebUSB 这两个 API，看看它们如何让你的网页也能和各种奇奇怪怪的硬件设备眉来眼去，并且保证安全！

第一站：背景故事 – 为什么我们需要 WebHID 和 WebUSB？

很久很久以前（其实也没多久），网页只能和服务器打交道，想直接控制你心爱的游戏手柄、酷炫的LED灯条、甚至是神秘的科学仪器？没门！你只能依赖浏览器插件，或者更糟糕的，安装一些来路不明的驱动程序。

这些方法问题多多：

安全风险： 插件和驱动程序权限太高，容易被恶意利用。
兼容性问题： 不同浏览器、不同操作系统，适配起来简直是噩梦。
用户体验差： 安装、配置过程繁琐，用户早就跑路了。

于是，W3C 的大佬们看不下去了，决定搞事情，于是就有了 WebHID 和 WebUSB。它们就像是网页和硬件之间的“翻译官”，让网页可以用标准、安全的方式与硬件设备交流。

第二站：WebHID – 人机交互设备的福音

WebHID (Web Human Interface Device) API 专门为 HID 设备而生。什么是 HID 设备呢？简单来说，就是那些你每天都在用的输入设备，比如：

键盘
鼠标
游戏手柄
触控板
摇杆
… 以及各种奇奇怪怪的定制设备！

WebHID 的优势在于它提供了一个通用的接口，不需要为每种设备编写特定的驱动程序。

2.1 WebHID 的核心概念

navigator.hid： 这是 WebHID API 的入口点，通过它可以访问连接到计算机的 HID 设备。
HID.requestDevice()： 弹出设备选择器，让用户选择要连接的 HID 设备。
HIDDevice： 代表一个连接的 HID 设备，可以从中获取设备信息、发送数据、接收数据。
HIDInputReportEvent： 当 HID 设备发送数据时，会触发这个事件。

2.2 WebHID 的使用方法

让我们用一个简单的例子来说明如何使用 WebHID 读取游戏手柄的数据。

步骤 1：请求设备访问权限

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [{ usagePage: 0x01, usage: 0x05 }] // 游戏手柄的 Usage Page 和 Usage
    });

    if (devices.length > 0) {
      const device = devices[0];
      console.log("设备已选择:", device.productName);
      await connectToDevice(device);
    } else {
      console.log("没有选择任何设备。");
    }
  } catch (error) {
    console.error("请求设备时出错:", error);
  }
}

这段代码会弹出一个设备选择器，让用户选择一个游戏手柄。filters 参数用于过滤设备，usagePage 和 usage 描述了设备的类型（在这里是游戏手柄）。

步骤 2：连接设备并监听数据

async function connectToDevice(device) {
  try {
    await device.open();
    console.log("设备已连接。");

    device.addEventListener("inputreport", (event) => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);

      // 处理接收到的数据
      console.log("收到数据:", uint8Array, "报告ID:", reportId);
      processGamepadData(uint8Array);
    });

    device.addEventListener("disconnect", () => {
      console.log("设备已断开连接。");
    });

  } catch (error) {
    console.error("连接设备时出错:", error);
  }
}

这段代码首先打开设备连接，然后监听 inputreport 事件。当游戏手柄发送数据时，会触发这个事件。data 属性包含了接收到的数据，reportId 属性包含了报告 ID。

步骤 3：处理游戏手柄数据

function processGamepadData(data) {
  // 假设数据格式如下：
  // data[0]: 左摇杆 X 轴 (0-255)
  // data[1]: 左摇杆 Y 轴 (0-255)
  // data[2]: 右摇杆 X 轴 (0-255)
  // data[3]: 右摇杆 Y 轴 (0-255)
  // data[4]: 按键状态 (bitmask)

  const leftX = data[0];
  const leftY = data[1];
  const rightX = data[2];
  const rightY = data[3];
  const buttons = data[4];

  console.log("左摇杆:", leftX, leftY);
  console.log("右摇杆:", rightX, rightY);
  console.log("按键:", buttons);

  // TODO: 根据数据更新游戏状态
}

这段代码只是一个简单的例子，实际的数据格式取决于游戏手柄的 HID 描述符。你需要查阅设备文档，了解数据的含义。

2.3 WebHID 的优势

通用性： 可以支持各种 HID 设备，无需编写特定的驱动程序。
安全性： 用户必须显式授权才能访问设备，避免了恶意软件的入侵。
跨平台： 可以在各种支持 WebHID 的浏览器和操作系统上运行。

第三站：WebUSB – USB 设备的终极解放

WebUSB API 则更强大，它可以让网页直接访问 USB 设备，比如：

3D 打印机
示波器
Arduino 开发板
… 甚至是你自己DIY的USB设备！

WebUSB 的优势在于它提供了底层的 USB 访问能力，可以实现更复杂的功能。

3.1 WebUSB 的核心概念

navigator.usb： 这是 WebUSB API 的入口点。
USB.requestDevice()： 弹出设备选择器，让用户选择要连接的 USB 设备。
USBDevice： 代表一个连接的 USB 设备，可以从中获取设备信息、配置设备、发送数据、接收数据。
USBInterface： 代表 USB 设备的一个接口，一个 USB 设备可以有多个接口。
USBEndpoint： 代表 USB 接口的一个端点，用于发送和接收数据。

3.2 WebUSB 的使用方法

让我们用一个简单的例子来说明如何使用 WebUSB 向 Arduino 开发板发送数据。

步骤 1：请求设备访问权限

async function requestUSBDevice() {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [{ vendorId: 0x2341, productId: 0x0043 }] // Arduino Uno 的 Vendor ID 和 Product ID
    });

    console.log("设备已选择:", device.productName);
    await connectToUSBDevice(device);
  } catch (error) {
    console.error("请求设备时出错:", error);
  }
}

这段代码会弹出一个设备选择器，让用户选择一个 Arduino Uno 开发板。vendorId 和 productId 用于过滤设备，你需要查阅设备文档，获取这些信息。

步骤 2：连接设备并发送数据

async function connectToUSBDevice(device) {
  try {
    await device.open();
    console.log("设备已连接。");

    // 选择配置
    await device.selectConfiguration(1);

    // 声明使用的接口
    await device.claimInterface(0);

    // 发送数据
    const data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // "Hello" 的 ASCII 码
    await device.transferOut(1, data); // Endpoint 1 用于发送数据

    console.log("数据已发送。");

    device.addEventListener("disconnect", () => {
      console.log("设备已断开连接。");
    });

  } catch (error) {
    console.error("连接设备或发送数据时出错:", error);
  }
}

这段代码首先打开设备连接，然后选择配置、声明接口，最后通过 transferOut 方法向设备发送数据。Endpoint 1 是用于发送数据的端点，你需要查阅设备文档，了解端点的编号。

步骤 3：Arduino 代码接收数据

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char data = Serial.read();
    Serial.print("收到数据: ");
    Serial.println(data);
  }
}

这段 Arduino 代码会监听串口数据，并将接收到的数据打印到串口监视器上。

3.3 WebUSB 的优势

底层访问： 可以直接访问 USB 设备的底层功能，实现更复杂的功能。
灵活性： 可以支持各种 USB 设备，只要设备支持 WebUSB 协议。
无需驱动： 不需要安装特定的驱动程序，简化了用户的使用流程。

第四站：安全注意事项

WebHID 和 WebUSB 虽然强大，但也需要注意安全问题：

用户授权： 始终要求用户显式授权才能访问设备。
数据验证： 验证从设备接收到的数据，防止恶意数据的注入。
权限控制： 限制网页可以访问的设备功能，避免设备被滥用。
HTTPS： 必须使用 HTTPS 协议，确保数据传输的安全性。

第五站：WebHID vs. WebUSB：选哪个？

特性	WebHID	WebUSB
适用设备	人机交互设备 (键盘、鼠标、游戏手柄等)	各种 USB 设备 (3D 打印机、示波器等)
访问级别	较高层	较低层
复杂性	较低	较高
是否需要驱动	通常不需要	通常不需要，但可能需要自定义协议支持
使用场景	读取游戏手柄数据、控制键盘灯光等	控制 3D 打印机、读取示波器数据、自定义USB设备等

总结：

WebHID： 如果你的目标是人机交互设备，或者你不想处理复杂的 USB 协议，那么 WebHID 是一个不错的选择。
WebUSB： 如果你需要访问 USB 设备的底层功能，或者你需要支持自定义的 USB 设备，那么 WebUSB 才是你的菜。

第六站：实战演练 – 一个简单的 WebHID 键盘控制程序

让我们用 WebHID API 来实现一个简单的键盘控制程序，通过网页控制键盘的 LED 灯。

步骤 1：HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>WebHID 键盘控制</title>
</head>
<body>
  <h1>WebHID 键盘控制</h1>
  <button id="requestButton">请求键盘访问</button>
  <button id="ledOnButton">开启 LED</button>
  <button id="ledOffButton">关闭 LED</button>

  <script src="script.js"></script>
</body>
</html>

步骤 2：JavaScript 代码 (script.js)

const requestButton = document.getElementById("requestButton");
const ledOnButton = document.getElementById("ledOnButton");
const ledOffButton = document.getElementById("ledOffButton");

let keyboardDevice = null;

requestButton.addEventListener("click", async () => {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [{ usagePage: 0x000C, usage: 0x0001 }] // 键盘的 Usage Page 和 Usage
    });

    if (devices.length > 0) {
      keyboardDevice = devices[0];
      console.log("键盘已选择:", keyboardDevice.productName);
      await keyboardDevice.open();
      console.log("键盘已连接。");

      ledOnButton.disabled = false;
      ledOffButton.disabled = false;

      keyboardDevice.addEventListener("disconnect", () => {
        console.log("键盘已断开连接。");
        keyboardDevice = null;
        ledOnButton.disabled = true;
        ledOffButton.disabled = true;
      });

    } else {
      console.log("没有选择任何键盘。");
    }
  } catch (error) {
    console.error("请求键盘时出错:", error);
  }
});

ledOnButton.addEventListener("click", async () => {
  if (keyboardDevice) {
    // 假设报告 ID 为 0x05，第一个字节的 bit 0 控制 LED
    const data = new Uint8Array([0x05, 0x01]); // 开启 LED
    try {
      await keyboardDevice.sendReport(0x05, data);
      console.log("LED 已开启。");
    } catch (error) {
      console.error("发送数据时出错:", error);
    }
  }
});

ledOffButton.addEventListener("click", async () => {
  if (keyboardDevice) {
    // 假设报告 ID 为 0x05，第一个字节的 bit 0 控制 LED
    const data = new Uint8Array([0x05, 0x00]); // 关闭 LED
    try {
      await keyboardDevice.sendReport(0x05, data);
      console.log("LED 已关闭。");
    } catch (error) {
      console.error("发送数据时出错:", error);
    }
  }
});

ledOnButton.disabled = true;
ledOffButton.disabled = true;

注意事项：

这段代码只是一个示例，你需要根据你的键盘的 HID 描述符，修改 usagePage、usage、reportId 和 data 的值。
并非所有键盘都支持通过 WebHID 控制 LED 灯。

第七站：总结与展望

WebHID 和 WebUSB API 为网页带来了与硬件设备直接通信的能力，开启了无限可能。从游戏手柄到 3D 打印机，从科学仪器到 DIY 设备，只要你的想象力足够丰富，就可以用网页控制任何你想要的硬件。

当然，这两个 API 还在不断发展中，未来会更加完善、更加强大。让我们一起期待 WebHID 和 WebUSB 带来的更多惊喜吧！

好了，今天的“网页与硬件的蜜月之旅”就到这里。希望大家有所收获，也欢迎大家多多探索、多多实践，创造出更多有趣的 WebHID 和 WebUSB 应用！下次再见！

发表回复 取消回复

发表回复取消回复