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

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

喬梅利
Joe Medley
麥特雷諾茲
Matt Reynolds

什麼是 WebHID API?

許多人為介面裝置 (HID) 太新、太舊,或太罕見,無法供系統裝置驅動程式存取。WebHID API 可以在 JavaScript 中導入裝置專用的邏輯,藉此解決這個問題。

WebHID API 的建議用途

HID 可接收輸入內容或向人類提供輸出內容。例如鍵盤、指標裝置 (滑鼠、觸控螢幕等) 和遊戲手把。HID 通訊協定能讓使用者透過作業系統驅動程式在桌上型電腦上存取這些裝置。網路平台仰賴這些驅動程式以支援 HID。

無法存取不常見的 HID 裝置會特別難以支援遊戲搖桿。專為電腦設計的遊戲搖桿通常會使用 HID 做為遊戲手把輸入項目 (按鈕、搖桿、觸發條件) 和輸出 (LED 和 rum)。不過,遊戲手把的輸入和輸出內容並非完善的標準化,網路瀏覽器通常需要特定裝置的自訂邏輯。這種做法無法維護,並會導致較舊與不常見裝置的長尾裝置支援較差。這也會導致瀏覽器依賴特定裝置行為中出現的漏洞。

示範、示範、示範

如要瞭解這些範例的運作方式,您可以在 GitHub 上取得所有範例的原始碼。說明器中有裸機程式碼範例

MacBook Pro 鍵盤背光

要嘗試上述任何示範,最大的障礙就是無法存取裝置。幸好,如果您的 MacBook Pro 搭配 TouchBar 使用,就不需要購買任何產品。在這個示範影片中,你可以直接在筆電上使用 API。同時說明如何透過 WebHID 開啟內建裝置的功能,而不僅僅是周邊裝置。

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

遊戲控制器

PlayStation 4 無線控制器

接下來,大家應用起來可能會比較少。Sony 的 DualShock 4 是 PlayStation 4 遊戲主機的無線控制器。

DualShock 4 示範使用 WebHID 接收來自 DualShock 4 的原始輸入報告,並提供高階 API 來存取控制器的陀螺儀、加速計、觸控板、按鈕和拇指輸入來源。同時也支援浮動式動畫及設定控制器內的 RGB LED 顏色。

作者:BITLINK
示範: DualShock 4 Demo (來源)

Nintendo Switch Joy-Con 控制器

用 Nintendo Switch Joy-Con 控制器實際跳動,在褲子裡跳起來,輕鬆暢玩 Chrome 恐龍 🦖?。本示範採用 Joy-Con WebHID,這是 Nintendo Switch Joy-Con 控制器的 WebHID 驅動程式。

作者: Thomas Steiner
示範: Chrome Dino WebHID (示範來源驅動程式來源)

反彈手條

BlinkStick Strip 與 HID 相容的淺色條紋,有 8 個 RGB LED。這項示範可讓使用者選取多種閃爍模式,包括追逐、眨眼和拉森掃描器 (又稱 Cylon)。

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

這個示範模式的用途為何?(請稍待片刻。)它會閃爍。其實這三個示範用了閃爍的 USB 通知燈號(1)。

blink(1) 簡單且記載,是開始使用 HID 的絕佳選擇。

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

特別銘謝

感謝 Pete LePageKayce Basques 針對這篇文章的評論。

相片來源:Ugur AkdemirUnsplash 網站上