通过 Web 访问硬件设备

选择合适的 API 与您选择的硬件设备进行通信。

François Beaufort
François Beaufort
GitHub

本指南旨在帮助您选择最佳 API，以便在 Web 上与硬件设备（例如摄像头、麦克风等）进行通信。我所说的“最佳”是指它能以最少的工作量为您提供所需的一切。换句话说，您知道自己想要解决的一般用例（例如访问视频），但不知道要使用哪个 API，或者想知道是否有其他方法可以实现。

我经常看到 Web 开发者陷入的一个问题是，在不了解更易于实现且提供更好用户体验的高级 API 的情况下，直接使用低级 API。因此，本指南首先会推荐更高级别的 API，但也会提及较低级别的 API，以防您确定更高级别的 API 无法满足您的需求。

🕹 接收来自此设备的输入事件

尝试监听键盘和指针事件。如果此设备是游戏控制器，请使用 Gamepad API 了解哪些按钮被按下以及哪些轴被移动。

如果这些选项都不适合您，那么低级 API 可能是解决方案。 请参阅了解如何与设备通信，开始您的探索之旅。

📸 访问此设备上的音频和视频

使用 MediaDevices.getUserMedia() 从此设备获取实时音频和视频流，并了解如何捕获音频和视频。您还可以控制摄像头的平移、倾斜和缩放，以及其他摄像头设置（例如亮度和对比度），甚至可以拍摄静态图片。Web Audio 可用于为音频添加效果、创建音频可视化效果或应用空间效果（例如平移）。此外，您还可以了解如何在 Chrome 中分析 Web Audio 应用的性能。

如果这些选项都不适合您，那么低级 API 可能是解决方案。 请参阅了解如何与设备通信，开始您的探索之旅。

🖨 打印到此设备

使用 window.print() 打开浏览器对话框，让用户选择此设备作为打印当前文档的目标设备。

如果这不适合您，低级 API 可能是解决方案。请参阅了解如何与设备通信，开始您的旅程。

🔐 使用此设备进行身份验证

使用 WebAuthn 通过此硬件安全设备创建经过认证且限定了来源的公钥凭据，以验证用户身份。该 API 支持使用蓝牙、NFC 和 USB 漫游 U2F 或 FIDO2 身份验证器（也称为安全密钥）以及平台身份验证器，让用户能够使用指纹或屏幕锁定进行身份验证。请参阅构建您的首个 WebAuthn 应用。

如果此设备是其他类型的硬件安全设备（例如加密货币钱包），则低级 API 可能是解决方案。请参阅了解如何与设备通信，开始您的旅程。

🗄 访问此设备上的文件

使用 File System Access API 直接读取用户设备上的文件和文件夹，并将更改保存到其中。如果不可用，请使用 File API 要求用户从浏览器对话框中选择本地文件，然后读取这些文件的内容。

如果这些选项都不适合您，那么低级 API 可能是解决方案。 请参阅了解如何与设备通信，开始您的探索之旅。

🧲 访问此设备上的传感器

使用 Generic Sensor API 读取移动传感器（例如加速度计或陀螺仪）和环境传感器（例如氛围灯、磁力计）的原始传感器值。如果不可用，请使用 DeviceMotion 和 DeviceOrientation 事件访问移动设备中的内置加速度计、陀螺仪和指南针。

如果它不适合您，低级 API 可能是解决方案。请参阅了解如何与设备通信，开始您的旅程。

🛰 访问此设备上的 GPS 坐标

使用 Geolocation API 获取用户在此设备上的当前位置的纬度和经度。

如果它不适合您，低级 API 可能是解决方案。请参阅了解如何与设备通信，开始您的旅程。

🔋 检查此设备的电池

使用 Battery API 获取有关电池电量的主机信息，并在电池电量或充电状态发生变化时收到通知。

如果它不适合您，低级 API 可能是解决方案。请参阅了解如何与设备通信，开始您的旅程。

📞 通过网络与此设备通信

在本地网络中，使用 Remote Playback API 在远程播放设备（例如智能电视或无线扬声器）上播放音频和/或视频，或使用 Presentation API 在第二屏幕（例如通过 HDMI 线连接的辅助显示屏或通过无线方式连接的智能电视）上呈现网页。

如果此设备公开了 Web 服务器，请使用 Fetch API 和/或 WebSockets，通过访问适当的端点从此设备提取一些数据。虽然 TCP 和 UDP 套接字在 Web 上不可用，但您可以查看 WebTransport，了解如何处理交互式、双向和多路复用网络连接。请注意，WebRTC 还可用于通过点对点协议与其他浏览器实时通信。

🧱 了解如何与设备通信

您应使用哪种低级 API 取决于您与设备的物理连接的性质。如果是无线连接，请查看 Web NFC（适用于极短距离无线连接）和 Web Bluetooth 或 Web Serial（适用于附近的无线设备）。

  • 借助 Web NFC，当此设备靠近用户设备（通常为 5-10 厘米，2-4 英寸）时，可对其进行读写。NXP 的 NFC TagInfo 等工具可让您浏览此设备的内容，以便进行逆向工程。

  • 借助 Web Bluetooth，您可以通过低功耗蓝牙连接到此设备。如果设备使用标准化的蓝牙 GATT 服务（例如电池服务），则应该很容易与之通信，因为其行为有据可查。如果没有，此时您必须找到此设备的某些硬件文档或对其进行逆向工程。为此，您可以使用 nRF Connect for Mobile 等外部工具，以及基于 Chromium 的浏览器中的内部页面 about://bluetooth-internals 等内置浏览器工具。请参阅 Uri Shaked 撰写的对蓝牙灯泡进行逆向工程。请注意，蓝牙设备也可能使用 HID 或串行协议。

  • 借助蓝牙串行，您可以与配对的传统蓝牙设备上的 RFCOMM 服务（例如标准化的串行端口配置文件 [SPP]）进行通信。不过，对于基于 RFCOMM 的自定义服务，您需要查阅设备供应商文档，了解要传递给 requestPort() 的服务 UUID。

如果是有线连接，请按以下特定顺序检查这些 API：

  1. 借助 WebHID，通过集合了解 HID 报告和报告描述符是您理解此设备的关键。如果没有此设备的供应商文档，这可能会具有挑战性。Wireshark 等工具可以帮助您对其进行逆向工程。您还可以使用 HID Explorer Web 应用将 HID 设备信息转储为人类可读的格式。

  2. 使用 Web Serial 时，如果没有此设备的供应商文档以及此设备支持的命令，则很难实现，但通过幸运猜测仍有可能实现。您可以使用 Wireshark 等工具捕获原始 USB 流量，从而对该设备进行逆向工程。如果此设备使用人类可读的协议，您还可以使用串行终端 Web 应用来试用此设备。

  3. 使用 WebUSB 时，如果没有关于此设备以及此设备支持哪些 USB 命令的清晰文档，则很难做到这一点，但通过幸运猜测仍有可能做到。观看 Suz Hinton 的探索 WebUSB 及其令人兴奋的潜力。您还可以通过捕获原始 USB 流量并使用 Wireshark 等外部工具和内置浏览器工具（例如基于 Chromium 的浏览器中的内部页面 about://usb-internals）检查 USB 描述符，对该设备进行逆向工程。

致谢

感谢 Reilly Grant、Thomas Steiner 和 Kayce Basques 审阅本文。