选择适当的 API 与您选择的硬件设备通信。
本指南旨在帮助您选择最适合的 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 或串行协议。借助蓝牙串行通讯,您可以与配对的蓝牙经典设备(例如标准化的串行端口配置文件 [SPP])上的 RFCOMM 服务进行通信。不过,对于基于 RFCOMM 的自定义服务,您需要参阅设备的供应商文档,了解要传递给
requestPort()
的服务 UUID。
如果是有线连接,请按以下特定顺序查看这些 API:
使用 WebHID 时,了解通过集合获取的 HID 报告和报告描述符是了解此设备的关键。如果没有此设备的供应商文档,这可能会很困难。Wireshark 等工具可帮助您对其进行逆向工程。您还可以使用 HID Explorer Web 应用将 HID 设备信息转换为人类可读的格式。
使用 Web Serial 时,如果没有此设备的供应商文档以及此设备支持的命令,很难猜出,但如果运气好的话,还是有可能猜出。您可以使用 Wireshark 等工具捕获原始 USB 流量,以便对此设备进行逆向工程。如果此设备使用的是人类可读的协议,您还可以使用串行终端 Web 应用对其进行实验。
使用 WebUSB 时,如果没有关于此设备以及此设备支持哪些 USB 命令的明确文档,则很难,但如果运气好的话,还是有可能的。观看 Suz Hinton 的 Exploring WebUSB and its exciting potential(探索 WebUSB 及其令人兴奋的潜力)。您还可以使用 Wireshark 等外部工具和基于 Chromium 的浏览器中的内部页面
about://usb-internals
等内置浏览器工具,捕获原始 USB 流量并检查 USB 描述符,以对此设备进行逆向工程。
致谢
感谢 Reilly Grant、Thomas Steiner 和 Kayce Basques 审核本文。
照片由 Unsplash 用户 Darya Tryfanava 拍摄。