網路上的人機介面:幾個簡單範例

從應用程式連線至不常見的裝置。

Joe Medley
Joe Medley
Matt Reynolds
Matt Reynolds

什麼是 WebHID API?

許多人機介面裝置 (HID) 太新、太舊或太罕見,系統的裝置驅動程式無法存取。WebHID API 提供在 JavaScript 中實作裝置專屬邏輯的方法,解決了這個問題。

WebHID API 的建議用途

HID 會接收人類的輸入內容或提供輸出內容。裝置範例包括鍵盤、指標裝置 (滑鼠、觸控螢幕等) 和遊戲手把。HID 通訊協定可讓您使用作業系統驅動程式,在桌上型電腦上存取這些裝置。網頁平台會依賴這些驅動程式來支援 HID。

如果無法存取非標準 HID 裝置,遊戲手把支援功能就會受到影響。專為電腦設計的遊戲手把通常會使用 HID,處理遊戲手把的輸入 (按鈕、搖桿、觸發鍵) 和輸出 (LED、震動)。不過,遊戲手把的輸入和輸出並未妥善標準化,網頁瀏覽器通常需要針對特定裝置採用自訂邏輯。這並非長久之計,而且會導致舊型和不常見裝置的支援品質不佳。這也會導致瀏覽器依賴特定裝置行為中的特殊情況。

示範、示範、示範

如要瞭解這些範例的運作方式,請前往 GitHub 查看所有範例的原始碼。說明文件中有最基本的程式碼範例

MacBook Pro 鍵盤背光

試用這些展示內容的最大障礙,就是無法存取裝置。幸好,如果你有配備 Touch Bar 的 MacBook Pro,就不必購買任何東西。您可以在筆電上直接使用這個 API 進行測試。此外,本文也會說明如何使用 WebHID 解鎖內建裝置的功能,而不只是周邊裝置。

作者:FWeinb
示範/來源: 鍵盤背光

遊戲控制器

PlayStation 4 無線控制器

接下來要介紹的產品,可能只有少數人擁有。Sony 的 DualShock 4 是 PlayStation 4 遊戲主機的無線控制器。

DualShock 4 試用版使用 WebHID 接收 DualShock 4 的原始輸入報告,並提供高階 API,用來存取控制器的陀螺儀、加速計、觸控板、按鈕和搖桿輸入。此外,這項 API 也支援震動功能,以及設定控制器內 RGB LED 的顏色。

作者:TheBITLINK
示範: DualShock 4 示範 (來源)

Nintendo Switch Joy-Con 控制器

將 Nintendo Switch Joy-Con 控制器放在褲子口袋,然後跳躍,即可暢玩 Chrome 恐龍離線遊戲 🦖。這項示範是由 Joy-Con WebHID 提供技術支援,這是 Nintendo Switch Joy-Con 控制器的 WebHID 驅動程式。

作者: Thomas Steiner
示範: Chrome 恐龍遊戲 WebHID (示範來源驅動程式來源)

BlinkStick Strip

BlinkStick Strip 是符合 HID 標準的燈條,內含 8 個 RGB LED。使用者可以在這個範例中選取多種閃爍模式,包括追逐、閃爍和 Larson 掃描器 (又稱 Cylon)。

作者:Robat Williams
範例: blinkstick-strip (來源)

這項示範會執行哪些作業?(請稍候。)並眨了眼睛。其實是三個示範,都使用 blink(1) USB 通知燈。

blink(1) 簡單易懂且有詳盡的文件,是開始使用 HID 的絕佳選擇。

作者:Tod E. Kurt
Demos: blink(1) (來源)

特別銘謝

感謝 Pete LePageKayce Basques