通过 Web 访问硬件设备

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

弗朗索瓦·博福
François Beaufort

本指南的目标是帮助您选择最适合在网络上与硬件设备(例如摄像头、麦克风等)进行通信的 API。“最好”的意思是它能以最少的工作量 为您提供所需的一切换言之,您知道想要解决的一般用例(例如访问视频),但不知道要使用什么 API,或者不知道是否有其他方法来实现它。

据我所知,Web 开发者经常会遇到一个问题,那就是直接使用低级 API,而没有了解那些更易于实现且能提供更好的用户体验的更高级别 API。因此,本指南首先会推荐较高级别的 API,但是如果您确定较高级别的 API 无法满足您的需求,也会提及较低级别的 API。

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

尝试监听 KeyboardPointer 事件。如果此设备是游戏控制器,请使用 Gamepad API 了解按下了哪些按钮以及移动了哪些轴。

如果这些方法全都不适合您,低级别 API 可能是解决方案。 请查看了解如何与设备通信,开启您的旅程。

😝? 访问此设备中的音频和视频

使用 MediaDevices.getUserMedia() 从此设备获取实时音频和视频流,并了解如何捕获音频和视频。您还可以控制相机的平移、倾斜和缩放以及其他相机设置(例如亮度和对比度,甚至拍摄静态图片)。网页音频可用于向音频添加效果、创建音频可视化效果或应用空间效果(例如平移)。另请查看如何分析网络音频应用的性能

如果这些方法全都不适合您,低级别 API 可能是解决方案。 请查看了解如何与设备通信,开启您的旅程。

🖨? 将内容保存到此设备

使用 window.print() 打开一个浏览器对话框,允许用户选择此设备作为打印当前文档的目的地。

如果这样做并不适合您,低级别 API 可能是解决方案。请查看了解如何与设备通信,开启您的旅程。

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

使用 WebAuthn 使用此硬件安全设备创建经过认证且源头限定的强公钥凭据,以便对用户进行身份验证。它支持使用蓝牙、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 通过命中适当的端点从此设备中提取一些数据。虽然 Web 上没有 TCP 和 UDP 套接字,但可以查看 WebTransport 以处理交互式、双向和多路复用网络连接。请注意,也可使用 WebRTC 通过点对点协议与其他浏览器实时传输数据。

💌?了解如何与你的设备通信

您应使用哪个低级别 API 取决于设备物理连接的性质。如果是无线设备,请参阅网络 NFC (适用于非常短距离的无线连接)和网络蓝牙(适用于附近的无线设备)。

  • 借助 Web NFC,当此设备靠近用户设备时(通常为 5-10 厘米、2-4 英寸),可对此设备执行读写操作。借助 NXP 提供的 NFC TagInfo 等工具,您可以浏览此设备中的内容以进行逆向工程。

  • 使用网络蓝牙,通过蓝牙低功耗连接此设备。当它使用标准化蓝牙 GATT 服务(如电池服务)时,应该很容易与其通信,因为其行为有详尽记录。如果不是,此时您必须查找该设备的一些硬件文档,或对其进行逆向工程。为此,您可以使用 nRF Connect for Mobile 等外部工具以及内置浏览器工具(例如基于 Chromium 的浏览器中的内部页面 about://bluetooth-internals)。查看 Uri Shaked 中的对蓝牙灯泡进行反向工程。请注意,蓝牙设备也可以说出 HID 或串行协议。

如果采用有线连接,请按如下特定顺序查看这些 API:

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

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

  3. 使用 WebUSB 时,如果没有关于此设备及其支持的 USB 命令的明确文档,很难做到这一点,但还是可以通过幸运猜测实现。观看 Suz Hinton 的探索 WebUSB 及其激动人心的潜力视频。您也可以对此设备进行逆向工程,即捕获原始 USB 流量,并使用 Wireshark 等外部工具以及基于 Chromium 的浏览器中的内部页面 about://usb-internals 等内置浏览器工具检查 USB 描述符

致谢

感谢 Reilly GrantThomas SteinerKayce Basques 审核本文。

照片由 Darya Tryfanava 拍摄,来自 Unsplash 用户。