在網路上存取硬體裝置

選擇適當的 API,與您選擇的硬體裝置通訊。

法蘭索瓦博福特
François Beaufort

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

我常看到網頁程式開發人員遇到一個問題,就是進入低階 API,卻不知道這些 API 更容易實作並提供更優質的使用者體驗。因此,本指南會先建議較高層級的 API,但如果您判定較高層級的 API 不符合需求,也會提及較低層級的 API。

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

請嘗試監聽鍵盤遊標事件。如果這部裝置是遊戲控制器,請使用 Gamepad API,瞭解正在按下哪些按鈕和移動的軸。

如果這些方法都不適合您,不妨使用低階 API。 請參閱這篇文章,瞭解如何與裝置通訊,展開冒險旅程。

❌ 透過這部裝置存取音訊和影片

請使用 MediaDevices.getUserMedia() 從此裝置取得即時音訊和視訊串流,並瞭解如何擷取音訊和影片。您也可以控制相機的平移、傾斜和縮放和其他相機設定 (例如亮度和對比),甚至拍攝靜態影像網路音訊可用來為音訊增添效果、建立音訊視覺化,或套用空間效果 (例如平移)。您也可以參閱這篇文章,瞭解如何在 Chrome 中分析網路音訊應用程式的效能。

如果這些方法都不適合您,不妨使用低階 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 傳輸線連接的次要螢幕或以無線方式連接智慧型電視)。

如果這部裝置會公開網路伺服器,請使用 Fetch API 和/或 WebSockets,透過按下適當的端點從這部裝置擷取部分資料。雖然 TCP 和 UDP 通訊端無法在網路上使用,但請查看 WebTransport,以便處理互動式、雙向和多工處理網路連線。請注意,WebRTC 也可用於使用點對點通訊協定,即時與其他瀏覽器通訊資料。

ↁ 探索如何與裝置溝通

您應使用哪種低階 API,取決於您與裝置的實體連線性質。如果是無線連線,請使用 Web NFC 測試附近的無線裝置 (無線連線速度非常短) 和網路藍牙。

  • 使用網路 NFC 功能,即可在裝置靠近使用者的裝置時 (通常是 5 到 10 公分、2 到 4 吋) 讀取及寫入裝置。NFC TagInfo by NXP 等工具可讓您瀏覽這部裝置的內容,進行反向工程。

  • 使用網路藍牙功能,透過藍牙低功耗連線連線至這部裝置。當裝置使用標準化藍牙 GATT 服務 (例如電池服務) 時,由於其行為已妥善記錄,因此應該要能輕鬆與人通訊。如果沒有,此時您必須尋找這部裝置的一些硬體說明文件,或是進行反向工程。您可以使用外部工具 (例如 nRF Connect for Mobile) 和內建瀏覽器工具,例如以 Chromium 為基礎的瀏覽器中的內部網頁 about://bluetooth-internals。請參閱 Uri Shaked 的 Reverse-Engineering a Bluetooth Light 燈泡。請注意,藍牙裝置可能也會讀出 HID 或序列通訊協定。

如果使用的是有線版,請按照以下特定順序查看下列 API:

  1. 藉由 WebHID,瞭解 HID 報告和透過集合回報描述元是瞭解此裝置的關鍵。沒有適用於這部裝置的廠商說明文件,可能會發生這種情況。Wireshark 等工具可協助您進行反向工程。您也可以使用 HID Explorer 網頁應用程式,將 HID 裝置資訊轉儲為人類可讀的格式。

  2. 使用 Web Serial 時,不提供這部裝置的廠商說明文件和這部裝置支援的指令,這並不容易,但幸運輸入還是非常有用。您可以使用 Wireshark 等工具擷取原始 USB 流量,對這部裝置進行反向工程。如果這部裝置採用人類可讀的通訊協定,您也可以使用序列終端機網頁應用程式進行實驗。

  3. 使用 WebUSB 時,即使沒有關於這部裝置的說明文件和這部裝置支援的 USB 指令,要操作仍然困難,但幸運輸入還是非常有用。觀看由 Suz Hinton 提供的「探索 WebUSB 及其令人驚奇的發展」影片。您也可以透過 Wireshark 等外部工具和內建瀏覽器工具 (例如 Chromium 內部頁面 about://usb-internals) 擷取原始 USB 流量,並檢查 USB 描述元,對這部裝置進行反向工程。

特別銘謝

感謝 Reilly GrantThomas SteinerKayce Basques 的閱讀這篇文章。

攝影者:Darya tryfanava 分享在 Unsplash 上。