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

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

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 來存取控制器的陀螺儀、加速計、觸控板、按鈕和搖桿輸入。它也支援震動功能,並可設定控制器內的 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 Dino WebHID (示範來源驅動程式來源)

BlinkStick 燈條

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

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

這個示範影片有什麼功能?(請稍候)。並閃爍。其實是三個使用 blink(1) USB 通知燈的示範。

blink(1) 簡單且有完善的文件,因此是開始使用 HID 的絕佳選擇。

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

特別銘謝

感謝 Pete LePageKayce Basques 審查本文。

相片來源:Ugur AkdemirUnsplash 網站上提供