選擇適當的 API 與所選硬體裝置通訊。
本指南旨在協助您選擇最適合的 API,以便與網路上的硬體裝置 (例如網路攝影機、麥克風等) 通訊。所謂「最佳」,是指它能以最少的工作量,提供您所需的一切。換句話說,您知道要解決的一般用途 (例如存取影片),但不知道要使用哪個 API,或是想知道是否有其他方法可達成目標。
我經常看到網路開發人員犯下的問題,就是直接使用低階 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 傳輸線連接的次要螢幕,或是透過無線方式連接的智慧型電視)。
如果這個裝置公開網路伺服器,請使用 Fetch API 和/或 WebSockets,透過觸及適當的端點,從這個裝置擷取部分資料。雖然 TCP 和 UDP 網路連線在網路上不可用,但您可以使用 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:
使用 WebHID 時,如要瞭解這類裝置,關鍵在於透過集合瞭解 HID 報表和報表描述詞。但如果沒有供應商的裝置說明文件,這麼做可能會很困難。Wireshark 等工具可協助您進行逆向工程。您也可以使用 HID Explorer 網路應用程式,將 HID 裝置資訊轉儲為人類可讀的格式。
使用 Web Serial 時,如果沒有供應商的裝置說明文件,以及裝置支援的指令,要猜測裝置的行為很難,但仍有可能。您可以使用 Wireshark 等工具擷取原始 USB 流量,藉此對此裝置進行逆向工程。如果裝置使用人類可讀的通訊協定,您也可以使用序列終端機網頁應用程式來實驗這部裝置。
在 WebUSB 中,如果沒有針對裝置和裝置支援的 USB 指令提供明確的說明文件,雖然很難,但仍有可能透過猜測來取得這些資訊。請觀看 Suz Hinton 的探索 WebUSB 及其令人興奮的潛力。您也可以透過擷取原始 USB 流量,並使用 Wireshark 等外部工具和內建瀏覽器工具 (例如以 Chromium 為基礎的瀏覽器中的內部頁面
about://usb-internals
) 檢查 USB 描述符,對這部裝置進行逆向工程。
特別銘謝
感謝 Reilly Grant、Thomas Steiner 和 Kayce Basques 審查本文。
相片來源:Darya Tryfanava 在 Unsplash 上提供。