WebUSB：在浏览器中释放直接 USB 设备访问能力

WebUSB 是一个革命性的 API，它使 Web 应用程序能够直接与 USB 设备通信。想象一下，您的浏览器可以与您的 3D 打印机、微控制器、科学仪器或任何其他支持 USB 的设备无缝交互。WebUSB 使这成为现实，为基于 Web 的硬件控制和数据采集开辟了广阔的可能性。

什么是 WebUSB？

传统的 Web 应用程序通常仅限于与服务器交互和显示信息。WebUSB 打破了这一障碍，提供了一种安全且标准化的方式，供网站直接访问 USB 设备。在许多情况下，这消除了对本机应用程序或浏览器扩展的需求，从而简化了用户体验并提高了安全性。

WebUSB 的主要优势包括：

• 简化的用户体验： 用户只需单击一下即可连接到 USB 设备，而无需安装驱动程序或本机应用程序。
• 提高的安全性： WebUSB 在浏览器的安全沙箱中运行，从而保护用户免受恶意代码的侵害。权限是按站点授予的，使用户可以控制哪些网站可以访问其 USB 设备。
• 跨平台兼容性： 主要浏览器在各种操作系统上都支持 WebUSB，从而确保了广泛的兼容性。
• 降低的开发开销： Web 开发人员可以利用现有的 Web 技术（HTML、CSS、JavaScript）来构建与硬件连接的应用程序，而无需学习特定于平台的本机开发。

WebUSB 的工作原理

WebUSB API 提供了 JavaScript 接口，用于请求访问 USB 设备、声明接口、发送和接收数据以及管理设备配置。基本工作流程包括以下步骤：

1. 请求设备访问： Web 应用程序使用 `navigator.usb.requestDevice()` 提示用户选择 USB 设备。可以使用筛选器根据供应商 ID、产品 ID 或其他条件缩小选择范围。
2. 打开设备： 一旦用户授予权限，应用程序就会调用 `device.open()` 以建立连接。
3. 声明接口： USB 设备通常会公开多个接口，每个接口代表一个特定功能。应用程序必须使用 `device.claimInterface()` 声明所需的接口。
4. 传输数据： 使用 `device.transferIn()` 和 `device.transferOut()` 方法与设备交换数据。这些方法允许控制传输、批量传输和中断传输，具体取决于设备的功能。
5. 关闭设备： 完成应用程序后，应使用 `device.releaseInterface()` 释放接口，并使用 `device.close()` 关闭设备。

示例：连接到 USB 串行设备

让我们用一个实际的例子来说明 WebUSB：连接到 USB 串行设备（例如，带有 USB 转串行适配器的微控制器）。

            
async function connectToSerial() {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [{
        vendorId: 0x2341, // Arduino's vendor ID
      }],
    });

    await device.open();
    await device.selectConfiguration(1); // Assuming configuration 1 is the desired one
    await device.claimInterface(0); // Assuming interface 0 is the serial interface

    console.log("Connected to serial device!");

    // Now you can use device.transferIn() and device.transferOut() to send and receive data.

  } catch (error) {
    console.error("Error connecting to serial device:", error);
  }
}

            

              
                Copy
              
            
          

此代码片段演示了如何请求访问具有 Arduino 供应商 ID 的 USB 设备、打开设备、选择配置和声明接口。声明接口后，您可以使用 `transferIn()` 和 `transferOut()` 方法与串行设备交换数据。

WebUSB 的用例

WebUSB 在各个行业中解锁了广泛的应用：

• 3D 打印： 直接从 Web 浏览器控制 3D 打印机，允许用户上传模型、监控进度和调整设置，而无需安装桌面软件。想象一下，基于云的切片服务直接向打印机发送指令。
• 科学仪器： 直接从 Web 界面访问和控制科学仪器，如示波器、分光计和数据记录器。这有助于远程数据收集、分析和协作。全球的大学都从基于 Web 的实验室设置中受益。
• 工业自动化： 将基于 Web 的仪表板与工业设备集成，以进行远程监控、控制和诊断。这可以实现预测性维护并提高运营效率。
• 医疗设备： 开发基于 Web 的医疗设备界面，如血压监测仪、血糖仪和心电图机，从而实现远程患者监控和远程医疗应用。确保遵守该领域严格的安全和隐私标准。
• 游戏外围设备： 直接从 Web 浏览器自定义游戏外围设备，如鼠标、键盘和耳机，允许用户调整灯光效果、重新映射按钮和配置配置文件。
• 微控制器编程： 直接从 Web 浏览器编程和调试微控制器，简化开发过程并使其更易于初学者使用。Arduino 等平台受益匪浅。
• Web 串行终端： 创建基于 Web 的串行终端，用于与嵌入式系统、IoT 设备和其他支持串行的硬件进行通信。这消除了对特定于平台的终端仿真器的依赖。
• 固件更新： 直接通过 Web 浏览器在 USB 设备上执行固件更新，从而简化更新过程并降低出错的风险。考虑制造商使用 WebUSB 进行简单的产品更新。

安全注意事项

在处理直接硬件访问时，安全性至关重要。WebUSB 结合了多种安全机制来保护用户：

• 用户同意： 未经明确的用户许可，网站无法访问 USB 设备。`navigator.usb.requestDevice()` 方法始终显示权限提示，允许用户选择要共享的设备。
• HTTPS 要求： WebUSB 仅适用于通过 HTTPS 提供的网站，从而确保浏览器和服务器之间的通信已加密。
• 基于来源的访问： USB 设备与特定来源（域）关联。未经用户明确许可，其他网站无法访问该设备。
• 沙箱： WebUSB 在浏览器的安全沙箱中运行，从而限制了恶意代码的潜在影响。
• 定期安全审核： 浏览器供应商会定期进行安全审核，以识别和解决 WebUSB API 中的潜在漏洞。

尽管有这些安全措施，但在授予网站 USB 访问权限时，务必谨慎。仅授予受信任的网站权限，并警惕那些要求访问 USB 设备但未明确解释原因的网站。

浏览器支持

以下浏览器目前支持 WebUSB：

• Google Chrome： 自 61 版起完全支持。
• Microsoft Edge： 自 79 版（基于 Chromium 的 Edge）起完全支持。
• Opera： 完全支持。

对其他浏览器的支持正在考虑中。请查看浏览器的文档以获取最新信息。

WebUSB 与其他 USB 通信方法

从历史上看，从 Web 应用程序与 USB 设备交互是一个复杂且通常不安全的过程，通常需要：

• 本机应用程序： 这些应用程序提供了对系统硬件的完全访问权限，但需要用户下载并安装特定于平台的软件。这带来了安全风险，并为用户设置了进入障碍。
• 浏览器扩展： 扩展可以访问 USB 设备，但它们通常需要提升的权限，并且可能会引入安全漏洞。
• NPAPI 插件： NPAPI（Netscape 插件 API）是一项已弃用的技术，允许 Web 浏览器运行用本机代码编写的插件。NPAPI 插件是安全漏洞的主要来源，最终从大多数浏览器中删除。

WebUSB 提供了一种优于这些方法的替代方案，提供了一种安全、标准化和跨平台的方式来从浏览器与 USB 设备交互。它消除了对本机应用程序、浏览器扩展或 NPAPI 插件的需求，从而简化了开发过程并提高了安全性。

使用 WebUSB 进行开发：最佳实践

在开发 WebUSB 应用程序时，请记住以下最佳实践：

• 提供明确的解释： 在请求访问 USB 设备时，向用户解释应用程序为何需要访问以及它将用于什么用途。透明度建立信任并鼓励用户授予权限。
• 优雅地处理错误： 实施强大的错误处理来处理潜在问题，如设备断开连接、权限拒绝和通信错误。向用户提供信息丰富的错误消息。
• 使用功能检测： 在尝试使用 WebUSB API 之前，检查浏览器是否支持该 API。为不支持 WebUSB 的浏览器提供回退机制。
• 优化数据传输： 使用高效的数据传输方法来最大限度地减少延迟并最大限度地提高吞吐量。考虑使用批量传输进行大数据传输。
• 遵循 USB 标准： 遵守 USB 标准和规范，以确保与各种设备的兼容性。
• 优先考虑安全性： 实施安全最佳实践，以保护用户数据并防止未经授权访问 USB 设备。
• 考虑国际化： 设计您的应用程序以支持多种语言和区域。使用 Unicode 进行文本编码。
• 彻底测试： 使用各种 USB 设备和浏览器测试您的应用程序，以确保兼容性和稳定性。

WebUSB 的未来

WebUSB 有可能彻底改变我们从 Web 与硬件交互的方式。随着浏览器支持的不断增长以及 API 的成熟，我们可以期望看到更多创新的应用程序涌现。未来的发展可能包括：

• 改进的安全功能： 增强的安全机制，以防止新的威胁。
• 扩展的设备支持： 支持更广泛的 USB 设备类别。
• 与 WebAssembly 集成： 将 WebUSB 与 WebAssembly 相结合，以创建高性能的硬件连接应用程序。
• 标准化的设备描述符： 标准化的设备描述符，以简化设备发现和配置。
• 增强的用户界面： 更方便用户使用的界面，用于授予和管理 USB 权限。

结论

WebUSB 是一项改变游戏规则的技术，它使 Web 应用程序能够直接与 USB 设备通信。它简化了用户体验，提高了安全性，并为基于 Web 的硬件控制和数据采集开辟了广阔的可能性。随着浏览器支持的扩展和 API 的发展，WebUSB 有望成为 Web 未来的一块基石。无论您是 Web 开发人员、硬件爱好者还是企业家，WebUSB 都提供了令人兴奋的新机会来创建创新和引人入胜的基于 Web 的体验。

探索可能性，尝试使用 API，并为不断增长的 WebUSB 生态系统做出贡献。硬件连接的 Web 应用程序的未来就在这里。