웹상의 휴먼 인터페이스 장치: 몇 가지 간단한 예

앱에서 일반적이지 않은 기기에 연결합니다.

Joe Medley
Joe Medley
Matt Reynolds
Matt Reynolds

WebHID API란 무엇인가요?

많은 인간 인터페이스 기기 (HID)가 너무 새롭거나, 너무 오래되었거나, 너무 일반적이지 않아 시스템의 기기 드라이버에서 액세스할 수 없습니다. WebHID API는 JavaScript에서 기기별 로직을 구현하는 방법을 제공하여 이 문제를 해결합니다.

WebHID API의 권장 사용 사례

HID는 인간으로부터 입력을 받거나 인간에게 출력을 제공합니다. 기기의 예로는 키보드, 포인팅 기기 (마우스, 터치스크린 등), 게임패드가 있습니다. HID 프로토콜을 사용하면 운영체제 드라이버를 사용하여 데스크톱 컴퓨터에서 이러한 기기에 액세스할 수 있습니다. 웹 플랫폼은 이러한 드라이버를 사용하여 HID를 지원합니다.

일반적이지 않은 HID 기기에 액세스할 수 없는 것은 게임패드 지원과 관련하여 특히 문제가 됩니다. PC용으로 설계된 게임패드는 게임패드 입력 (버튼, 조이스틱, 트리거) 및 출력 (LED, 진동)에 HID를 사용하는 경우가 많습니다. 그러나 게임패드 입력 및 출력은 잘 표준화되어 있지 않으며 웹브라우저에는 특정 기기에 맞춤 로직이 필요한 경우가 많습니다. 이는 지속 가능하지 않으며 오래되고 일반적이지 않은 기기의 롱테일 지원이 부족합니다. 또한 브라우저가 특정 기기의 동작에 있는 특이점에 의존하게 됩니다.

데모, 데모, 데모

이러한 샘플이 어떻게 작동하는지 궁금하다면 모든 샘플의 소스 코드를 GitHub에서 확인할 수 있습니다. 설명자에는 기본적인 코드 예가 있습니다.

MacBook Pro 키보드 백라이트

이러한 데모를 사용해 보는 데 가장 큰 장벽은 기기에 액세스할 수 없다는 것입니다. 다행히 TouchBar가 있는 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 공룡 WebHID (데모 소스, 드라이버 소스)

BlinkStick 스트립

BlinkStick 스트립은 8개의 RGB LED가 있는 HID 호환 조명 스트립입니다. 이 데모를 사용하면 사용자가 추격, 깜박임, Larson 스캐너 (일명 Cylon)를 비롯한 여러 깜박임 패턴 중에서 선택할 수 있습니다.

작성자: Robat Williams
데모: blinkstick-strip (소스)

이 데모는 무엇을 하나요? (기다리세요.) 깜박입니다. 실제로 blink(1) USB 알림 표시등을 사용하는 세 가지 데모입니다.

blink(1)은 간단하고 문서화가 잘 되어 있어 HID를 시작하기에 좋은 옵션입니다.

작성자: Tod E. Kurt
데모: blink(1) (소스)

감사의 말씀

Pete LePageKayce Basques에게 감사드립니다.