JavaScript内核与高级编程之：`JavaScript` 的 `Web USB` API：其在 `JavaScript` 中与 `USB` 设备通信。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位观众老爷，大家好！今天咱们聊点刺激的——用 JavaScript 玩 USB 设备！

Web USB API：让你的浏览器“伸出咸猪手”

想象一下，你的浏览器不再只是上网冲浪的工具，还能直接控制你插在电脑上的各种 USB 设备，是不是感觉打开了新世界的大门？Web USB API 就是实现这个功能的钥匙。它允许 Web 应用直接与连接到用户机器上的 USB 设备进行通信。

为什么要用 Web USB？

你可能会问，为啥需要这么个玩意儿？理由很简单，有些设备，比如一些特殊的硬件调试器、自定义键盘、医疗设备等等，它们没有标准的 Web API 可以访问，或者现有的 API 太过复杂。Web USB API 提供了更直接、更底层的访问方式，让开发者可以更好地控制这些设备。

安全性，安全性，还是安全性！

别激动，直接操作硬件听起来很危险，对吧？Web USB API 当然考虑到了安全性问题。它采取了一系列措施来防止恶意网站滥用这个 API：

HTTPS only: 必须在 HTTPS 连接下使用，确保数据传输的安全。
用户授权: 每次访问 USB 设备都需要用户明确授权，浏览器会弹出一个选择设备的对话框，用户可以选择允许哪个网站访问哪个设备。
设备过滤: 网站可以指定它想要访问的 USB 设备的 VID (Vendor ID) 和 PID (Product ID)，这样可以避免用户误选其他设备。
权限持久化: 用户可以设置是否记住某个网站对某个设备的授权，下次访问时就不用再次授权了。

Web USB API 的基本概念

在开始写代码之前，咱们先了解一下 Web USB API 的几个核心概念：

USB 对象: 这是 Web USB API 的入口点，通过 navigator.usb 可以访问到它。
USBDevice 对象: 代表一个连接到系统的 USB 设备。包含了设备的各种信息，比如 VID、PID、设备版本等等，以及控制设备的方法。
USBConfiguration 对象: 代表 USB 设备的配置。一个设备可以有多个配置，每个配置定义了设备的不同工作模式。
USBInterface 对象: 代表 USB 设备的一个接口。一个配置可以有多个接口，每个接口定义了设备的不同功能。
USBEndpoint 对象: 代表 USB 设备接口上的一个端点。端点是数据传输的实际通道，分为输入端点 (IN) 和输出端点 (OUT)。
USBTransferResult 对象: 代表 USB 数据传输的结果。包含了传输的状态和数据。

Web USB API 的使用步骤

简单来说，使用 Web USB API 分为以下几个步骤：

请求设备: 通过 navigator.usb.requestDevice() 方法请求用户选择设备。
打开设备: 通过 device.open() 方法打开设备。
选择配置: 通过 device.selectConfiguration() 方法选择一个配置。
声明接口: 通过 device.claimInterface() 方法声明一个接口。
传输数据: 通过 device.transferIn() 或 device.transferOut() 方法传输数据。
释放接口: 通过 device.releaseInterface() 方法释放接口。
关闭设备: 通过 device.close() 方法关闭设备。

代码实战：控制一个 LED 灯 (假设)

为了更好地理解 Web USB API 的使用，咱们来写一个简单的例子：假设我们有一个 USB LED 灯，我们可以通过 Web USB API 控制它的开关。

首先，我们需要知道 LED 灯的 VID 和 PID。这个信息通常可以在设备的文档或者驱动程序中找到。假设 LED 灯的 VID 是 0x1234，PID 是 0x5678。

<!DOCTYPE html>
<html>
<head>
  <title>Web USB LED Control</title>
</head>
<body>
  <button id="connectButton">Connect to LED</button>
  <button id="onButton">Turn On</button>
  <button id="offButton">Turn Off</button>
  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');

    let device = null;
    let endpointIn = null; // 输入端点，用于接收数据 (如果需要)
    let endpointOut = null; // 输出端点，用于发送数据

    connectButton.addEventListener('click', async () => {
      try {
        const filters = [{ vendorId: 0x1234, productId: 0x5678 }]; // 替换为实际的 VID 和 PID
        device = await navigator.usb.requestDevice({ filters: filters });

        // 打开设备
        await device.open();

        // 选择配置 (通常选择第一个配置)
        await device.selectConfiguration(1); // 假设第一个配置是合适的

        // 声明接口 (通常声明第一个接口)
        await device.claimInterface(0); // 假设第一个接口是我们要用的

        // 找到输入和输出端点
        let configuration = device.configuration;
        let interface = configuration.interfaces[0]; //假设用第一个interface
        interface.alternates[0].endpoints.forEach(endpoint => {
          if (endpoint.direction === 'in') {
            endpointIn = endpoint;
          } else if (endpoint.direction === 'out') {
            endpointOut = endpoint;
          }
        });

        console.log('Connected to LED:', device);
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        console.error('Error connecting to LED:', error);
      }
    });

    onButton.addEventListener('click', async () => {
      try {
        // 发送命令打开 LED (假设命令是 [0x01])
        const data = new Uint8Array([0x01]);
        const result = await device.transferOut(endpointOut.endpointNumber, data); // 使用 endpointOut 的 endpointNumber

        if (result.status === 'ok') {
          console.log('LED turned on');
        } else {
          console.error('Error turning on LED:', result.status);
        }
      } catch (error) {
        console.error('Error turning on LED:', error);
      }
    });

    offButton.addEventListener('click', async () => {
      try {
        // 发送命令关闭 LED (假设命令是 [0x00])
        const data = new Uint8Array([0x00]);
        const result = await device.transferOut(endpointOut.endpointNumber, data); // 使用 endpointOut 的 endpointNumber

        if (result.status === 'ok') {
          console.log('LED turned off');
        } else {
          console.error('Error turning off LED:', result.status);
        }
      } catch (error) {
        console.error('Error turning off LED:', error);
      }
    });

    // 页面卸载时关闭设备
    window.addEventListener('beforeunload', async () => {
      if (device) {
        if (device.claimedInterfaces && device.claimedInterfaces.length > 0) {
          await device.releaseInterface(device.claimedInterfaces[0].interfaceNumber); // 释放接口
        }

        await device.close(); // 关闭设备
        console.log('Device closed');
      }
    });

    // 初始化按钮状态
    onButton.disabled = true;
    offButton.disabled = true;
  </script>
</body>
</html>

代码解释

HTML 结构: 三个按钮，分别用于连接设备、打开 LED 和关闭 LED。
connectButton 事件监听:
- 调用 navigator.usb.requestDevice() 方法请求用户选择设备。filters 数组用于过滤设备，只显示 VID 和 PID 匹配的设备。
- 如果用户选择了设备，就打开设备 (device.open())，选择配置 (device.selectConfiguration())，声明接口 (device.claimInterface())。这些步骤都是必须的，才能开始传输数据。
- 找到输入和输出端点，遍历interface.alternates[0].endpoints 获取endpointIn和endpointOut。
- 禁用连接按钮，启用打开和关闭按钮。
onButton 和 offButton 事件监听:
- 创建 Uint8Array 对象，用于存储要发送的数据。这里假设打开 LED 的命令是 [0x01]，关闭 LED 的命令是 [0x00]。
- 调用 device.transferOut() 方法发送数据。第一个参数是端点编号，第二个参数是要发送的数据。
- 检查 result.status，如果为 ok，表示数据发送成功。
beforeunload 事件监听:
- 在页面卸载时，关闭设备，释放接口，防止资源泄漏。

注意事项

错误处理: Web USB API 的错误处理非常重要。在实际开发中，应该捕获各种异常，并给出友好的提示信息。
数据格式: 不同的 USB 设备使用不同的数据格式。需要仔细阅读设备的文档，了解如何正确地发送和接收数据。
并发: Web USB API 是异步的，所以在处理并发请求时需要特别小心。可以使用 async/await 语法来简化异步操作。
兼容性: 并非所有浏览器都支持 Web USB API。在使用之前，应该检查浏览器是否支持 navigator.usb 对象。

Web USB API 的进阶应用

除了控制 LED 灯，Web USB API 还可以用于很多其他的场景：

自定义游戏手柄: 可以读取游戏手柄的按键和摇杆信息，实现更高级的游戏控制。
硬件调试器: 可以连接到单片机或者其他硬件设备，进行调试和编程。
医疗设备: 可以读取血压计、血糖仪等医疗设备的数据，方便用户进行健康管理。
指纹识别器: 可以读取指纹识别器的指纹数据，用于身份验证。
3D 打印机: 可以直接通过浏览器控制3D打印机。

实际案例分析：连接 USB 串口设备

有时候我们需要与 USB 串口设备进行通信，比如连接一个 Arduino 开发板。虽然 Web Serial API 更适合处理标准串口设备，但某些 USB 串口设备可能需要使用 Web USB API。以下是一个连接 USB 串口设备的示例：

async function connectToSerialDevice() {
  try {
    const filters = [{ vendorId: 0x2341, productId: 0x0043 }]; // Arduino Uno 的 VID 和 PID
    const device = await navigator.usb.requestDevice({ filters: filters });
    await device.open();

    // 假设 Arduino Uno 使用 CDC-ACM 协议，需要选择配置和声明接口
    await device.selectConfiguration(1); // 选择配置
    await device.claimInterface(2); // 声明接口

    // 设置串口参数 (波特率等) - 这是一个简化的例子，实际需要根据设备文档进行设置
    const controlTransferResult = await device.controlTransferOut({
      requestType: 'class',
      recipient: 'interface',
      request: 0x22, // SET_CONTROL_LINE_STATE
      value: 0x01,  // RTS (Request To Send)
      index: 2      // 接口编号
    });

    if (controlTransferResult.status === 'ok') {
      console.log('Serial port connected!');
      // 开始读取和写入数据 (需要进一步实现)
    } else {
      console.error('Failed to set control line state:', controlTransferResult.status);
    }
  } catch (error) {
    console.error('Error connecting to serial device:', error);
  }
}

代码解释

VID 和 PID: 使用 Arduino Uno 的 VID (0x2341) 和 PID (0x0043) 作为过滤器。
选择配置和声明接口: 假设 Arduino Uno 使用 CDC-ACM 协议，需要选择一个配置 (这里假设是配置 1) 并声明一个接口 (这里假设是接口 2)。具体的配置和接口编号需要参考设备文档。
设置串口参数: 使用 device.controlTransferOut() 方法发送控制传输请求，设置串口的控制线状态。这是一个简化的例子，实际需要根据设备文档进行设置波特率、数据位、停止位、校验位等参数。
读取和写入数据: 连接成功后，就可以使用 device.transferIn() 和 device.transferOut() 方法读取和写入数据了。具体的实现需要根据串口设备的协议进行处理。

Web USB 的替代方案：Web Serial API

值得一提的是，对于串口设备，Web Serial API 是一个更现代、更方便的选择。它提供了更高级的 API，可以更轻松地与串口设备进行通信。因此，如果你的目标是连接串口设备，建议优先考虑 Web Serial API。只有在 Web Serial API 无法满足需求时，才考虑使用 Web USB API。

Web USB API 的局限性

虽然 Web USB API 功能强大，但也存在一些局限性：

浏览器支持: Web USB API 的浏览器支持情况不如 Web Serial API 广泛。
设备兼容性: 并非所有 USB 设备都支持 Web USB API。有些设备可能需要安装驱动程序才能正常工作。
开发难度: 相比 Web Serial API，Web USB API 的开发难度更高，需要更深入地了解 USB 协议和设备的工作原理。

总结

Web USB API 是一把双刃剑。它提供了直接访问 USB 设备的强大能力，但也带来了更高的安全风险和开发难度。在使用 Web USB API 之前，需要仔细评估其必要性和可行性，并采取必要的安全措施。

总的来说，Web USB API 为 Web 应用打开了一扇通往硬件世界的大门。虽然它还不够成熟，但已经展现出了巨大的潜力。相信随着技术的不断发展，Web USB API 将会在更多的领域发挥作用。

好了，今天的讲座就到这里。希望大家有所收获，能用 Web USB API 玩出一些有趣的东西！各位，下次再见！

发表回复 取消回复

发表回复取消回复