选择合适的 API 以与您选择的硬件设备进行通信。
本指南的目标是帮助您选择最佳 API,以便在 Web 上与硬件设备(例如,网络摄像头、麦克风等)进行通信。我所说的“最佳”是指它以最少的工作量为您提供所需的一切。换句话说,您知道要解决的一般用例(例如,访问视频),但您不知道要使用哪个 API,或者想知道是否有其他方法可以实现它。
我常见 Web 开发者犯的一个错误是,在不了解更易于实现且提供更好用户体验的更高级别 API 的情况下,就直接使用低级别 API。因此,本指南首先推荐更高级别的 API,但也提及了低级别 API,以防您确定更高级别的 API 不符合您的需求。
🕹 接收来自此设备的输入事件
尝试监听 Keyboard 和 Pointer 事件。如果此设备是游戏控制器,请使用 Gamepad API 来了解正在按下哪些按钮以及移动了哪些轴。
如果这些选项都不适合您,则低级别 API 可能是解决方案。请查看 了解如何与您的设备通信,开始您的旅程。
📸 访问来自此设备的音频和视频
使用 MediaDevices.getUserMedia() 从此设备获取实时音频和视频流,并了解 捕获音频和视频。您还可以 控制摄像头的平移、倾斜和变焦,以及其他摄像头设置,例如 亮度与对比度,甚至可以 拍摄静止图像。Web Audio 可用于为音频添加效果、创建音频可视化效果或应用空间效果(例如,声像)。另请查看 如何在 Chrome 中分析 Web Audio 应用的性能。
如果这些选项都不适合您,则低级别 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 通过访问适当的端点从此设备获取一些数据。虽然 TCP 和 UDP 套接字在 Web 上不可用,但请查看 WebTransport 以处理交互式、双向和多路复用网络连接。请注意,WebRTC 也可用于使用对等协议与其他浏览器实时通信数据。
🧱 了解如何与您的设备通信
您应使用哪种低级别 API 的决定取决于您与设备的物理连接性质。如果是无线连接,请查看 Web NFC 以获得超短程无线连接,以及 Web 蓝牙或 Web Serial 以获得附近的无线设备。
通过 Web NFC,当此设备靠近用户设备(通常为 5–10 厘米,2–4 英寸)时,可以读取和写入此设备。诸如 NXP 提供的 NFC TagInfo 之类的工具允许您浏览此设备的内容以进行逆向工程。
通过 Web 蓝牙,通过低功耗蓝牙连接连接到此设备。当它使用标准化的蓝牙 GATT 服务(例如电池服务)时,应该很容易与之通信,因为它们的行为已 得到充分记录。如果不是这种情况,那么此时,您要么必须找到此设备的一些硬件文档,要么对其进行逆向工程。您可以使用诸如 nRF Connect for Mobile 之类的外部工具和内置浏览器工具(例如,基于 Chromium 的浏览器中的内部页面
about://bluetooth-internals
)来执行此操作。请查看 Uri Shaked 的 蓝牙灯泡逆向工程。请注意,蓝牙设备也可能使用 HID 或串行协议。通过 蓝牙串行,与配对的经典蓝牙设备(如标准化的串行端口配置文件 (SPP))上的 RFCOMM 服务进行通信。但是,对于自定义的基于 RFCOMM 的服务,您需要查阅设备的供应商文档以获取服务 UUID,以便传递给
requestPort()
。
如果是 wired,请按以下特定顺序查看这些 API
通过 WebHID,通过 集合 了解 HID 报告和报告描述符是您理解此设备的关键。如果没有此设备的供应商文档,这可能具有挑战性。诸如 Wireshark 之类的工具可以帮助您对其进行逆向工程。您还可以使用 HID Explorer Web 应用 将 HID 设备信息转储为人类可读的格式。
通过 Web Serial,如果没有此设备的供应商文档以及此设备支持的命令,则很难但仍然可以通过幸运的猜测来实现。可以通过使用诸如 Wireshark 之类的工具捕获原始 USB 流量来对此设备进行逆向工程。如果此设备使用人类可读的协议,您还可以使用 Serial Terminal Web 应用 来试验此设备。
通过 WebUSB,如果没有此设备的清晰文档以及此设备支持的 USB 命令,则很难但仍然可以通过幸运的猜测来实现。观看 Suz Hinton 的 探索 WebUSB 及其激动人心的潜力。您还可以通过捕获原始 USB 流量并使用诸如 Wireshark 之类的外部工具和内置浏览器工具(例如,基于 Chromium 的浏览器中的内部页面
about://usb-internals
)检查 USB 描述符 来对此设备进行逆向工程。
致谢
感谢 Reilly Grant、Thomas Steiner 和 Kayce Basques 审阅了本文。
照片由 Darya Tryfanava 在 Unsplash 上拍摄。