在網路上存取硬體裝置

選擇合適的 API，與您選擇的硬體裝置通訊。

François Beaufort
François Beaufort
GitHub

本指南旨在協助您挑選最適合的 API，以便與網路上的硬體裝置 (例如網路攝影機、麥克風等) 通訊。所謂「最佳」，是指能以最少的工作量提供所需的一切。換句話說，您知道要解決的一般用途 (例如存取影片)，但不知道要使用哪個 API，或想知道是否有其他方法可以達成。

我常看到網頁程式開發人員遇到一個問題，就是直接跳到低階 API，而沒有先瞭解高階 API，後者更容易實作，且能提供更好的使用者體驗。因此，本指南會先推薦較高階的 API，但也會提及較低階的 API，以防您認為較高階的 API 不符合需求。

🕹 接收這部裝置的輸入事件

嘗試監聽鍵盤和指標事件。如果裝置是遊戲控制器，請使用 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 或許是解決方案。請參閱「探索如何與裝置通訊」，開始您的歷程。

📞 透過網路與這部裝置通訊

在區域網路中，使用遠端播放 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 等工具可讓您瀏覽這部裝置的內容，以便進行反向工程。

  • 透過網路藍牙，使用藍牙低功耗連線連線至這部裝置。如果裝置使用標準化藍牙 GATT 服務 (例如電池服務)，則應可輕鬆與其通訊，因為其行為有詳盡記錄。如果沒有，此時就必須尋找這部裝置的硬體說明文件，或進行反向工程。您可以使用 nRF Connect for Mobile 等外部工具，以及內建瀏覽器工具，例如 Chromium 瀏覽器中的內部頁面 about://bluetooth-internals。請參閱 Uri Shaked 的對藍牙燈泡進行反向工程。請注意，藍牙裝置也可能使用 HID 或序列通訊協定。

  • 透過藍牙序列，與已配對經典藍牙裝置上的 RFCOMM 服務通訊，例如標準化序列埠設定檔 (SPP)。不過，如果是自訂 RFCOMM 服務，您必須參閱裝置供應商說明文件，瞭解要傳遞至 requestPort() 的服務 UUID。

如果是有線耳機，請依下列順序檢查 API：

  1. 使用 WebHID 時，透過集合瞭解 HID 報表和報表描述元，是瞭解這部裝置的關鍵。如果沒有這部裝置的供應商說明文件，這項工作可能相當困難。Wireshark 等工具可協助您進行反向工程。您也可以使用 HID Explorer 網頁應用程式，將 HID 裝置資訊轉儲為人類可讀的格式。

  2. 使用 Web Serial 時，如果沒有這部裝置的供應商說明文件，以及這部裝置支援的指令，雖然難度很高，但仍有可能幸運猜中。您可以使用 Wireshark 等工具擷取原始 USB 流量，對這部裝置進行反向工程。如果裝置使用人類可讀的通訊協定，您也可以透過序列終端機網頁應用程式進行實驗。

  3. 使用 WebUSB 時，如果沒有這部裝置的明確說明文件，以及這部裝置支援的 USB 指令，雖然難度很高，但仍有可能幸運猜中。觀看 Suz Hinton 的「探索 WebUSB 及其令人期待的潛力」。您也可以對這部裝置進行反向工程，方法是擷取原始 USB 流量，並使用 Wireshark 等外部工具和內建瀏覽器工具 (例如 Chromium 瀏覽器中的內部頁面 about://usb-internals) 檢查 USB 描述元。

特別銘謝

感謝 Reilly Grant、Thomas Steiner 和 Kayce Basques 審查本文。