在網路上存取硬體裝置

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

François Beaufort
François Beaufort
GitHub

本指南旨在協助您挑選最適合用來與 硬體裝置 (例如網路攝影機、麥克風等)依據「最佳」我是說真的 以最省時省力的方式滿足您的一切需求。也就是 您知道想要解決的常見用途 (例如存取影片)，但 不知道該使用哪個 API，或不知道有沒有其他方法可以完成。

網頁開發人員常遇到一個問題 不瞭解較易使用的高階 API 並提供更優質的使用者體驗。因此，本指南會先介紹 並優先提及較低層級的 API 判斷高階 API 不符合您的需求。

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

嘗試監聽鍵盤和指標事件。如果這部裝置是遊戲 遊戲控制器中，您可以使用 Gamepad API 確認正在按下哪些按鈕，以及 以及移動的軸

如果這些方法都不適合，則建議使用低階 API 來解決問題。 請參閱探索如何與裝置通訊一文，開始您的旅程。

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

使用 MediaDevices.getUserMedia() 從此取得即時音訊和視訊串流 瞭解如何擷取音訊和影片。您也可以控制 攝影機的平移、傾斜和縮放功能，以及其他相機設定 (例如亮度和 對比度，甚至是拍攝靜態圖片。網路音訊可用來新增特效 製作音訊、製作音訊視覺化內容，或套用空間效果 (例如 平移)。瞭解如何在 Chrome 中分析網路音訊應用程式的效能

如果這些方法都不適合，則建議使用低階 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 廣播音訊和/或 ，或是使用遠端播放裝置 (如智慧型電視或無線揚聲器) 上的影片，或是使用 簡報 API：在第二個畫面 (例如次要畫面) 轉譯網頁 螢幕)。

如果這部裝置會公開網路伺服器，請使用 Fetch API 和/或 WebSockets 透過連上適當的端點，從這部裝置中擷取部分資料。而 TCP 和 網路不支援 UDP 通訊端。如要處理 UDP 通訊端，請參閱 WebTransport 互動、雙向和多工網路連線請注意， WebRTC 也能用來與其他瀏覽器即時通訊資料 提供連線服務

🗓? 探索如何與裝置通訊

決定該使用哪個低階 API 取決於 您與裝置之間的實體連線。如果是無線通訊，請參考網路 NFC 極短的無線連線以及附近的無線網絡藍牙 裝置。

  • 使用 Web NFC 時，只要這部裝置就在附近，即可讀取及寫入資料 使用者的裝置 (通常是 5 到 10 公分，2 到 4 英寸)。像 NFC TagInfo by NXP 可讓你瀏覽這部裝置的內容，進行反向工程 用途。

  • 透過網路藍牙，透過藍牙低功耗連線至這部裝置 以獲得最佳效能和最安全的連線您在使用 標準化藍牙 GATT 服務 (例如電池服務) 行為是否妥善記錄。如果沒有，您現在必須找到 部分硬體說明文件，或對裝置進行反向工程。你可以 使用外部工具，例如 nRF Connect for Mobile 和內建瀏覽器工具 例如以 Chromium 為基礎的內部網頁 about://bluetooth-internals 其實有別於一般瀏覽器請參考 Reverse-Engineering a Bluetooth 燈泡： Uri Shaked。請注意，藍牙裝置也可能會朗讀 HID 或序號 通訊協定

如果是有線網路，請依下列順序查看這些 API：

  1. 透過 WebHID，您可以透過下列方式瞭解 HID 報表和報告描述元 「集合」是您對此裝置掌握度的關鍵。可用的值包括 ，則沒有本裝置的相關廠商文件。這些工具例如 Wireshark 可協助您進行反向工程。您也可以使用 HID Explorer 網頁應用程式，可將 HID 裝置資訊轉儲為使用者可理解的格式。

  2. 透過 Web Serial 取得這部裝置的供應商說明文件，以及功用 即使沒有裝置支援的指令，也雖然困難 不必費心猜測如要對這部裝置進行反向工程，只要擷取原始 USB 即可 提供 Wireshark 等工具帶來的流量。您也可以使用序列終端機 網頁應用程式，利用使用者可理解的通訊協定對這部裝置進行實驗。

  3. 使用 WebUSB 時，未清楚說明這部裝置和哪種 USB 的說明文件 即使沒有裝置支援的指令，也雖然困難 不必費心猜測觀看來自 Suz 的 Exploring WebUSB 和其驚人潛力 印度文你也可以擷取原始 USB 裝置，對這部裝置執行反向工程 使用 Wireshark 等外部工具檢查 USB 描述元 以及內建的瀏覽器工具，例如內部網頁的 about://usb-internals 。

特別銘謝

感謝 Reilly Grant、Thomas Steiner 和 Kayce Basques 詳閱這篇文章。

攝影者：Darya tryfanava，攝於 Unsplash 網站上。