Using Nintendo Switch Joy-Con Controllers on the Web with the WebHID API

Thomas Steiner:

WebHID allows websites to access devices that use the human interface devices (HID) protocol via JavaScript. Here is a little Christmas present 🎄 to the community to celebrate the API approval: releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. If you have Joy-Cons, be sure to check out the demo to get a feel for what is possible.

Installation per NPM:

npm install joy-con-webhid

Once a Joy-Con has been paired, you can listen to hidinput events:

joyCon.addEventListener('hidinput', ({ detail }) => {
    // Careful, this fires at ~60fps.
    console.log(`Input report from ${joyCon.device.productName}:`, detail);
});

💡 The code does not use on the Gamepad API but the WebHID API as the former does not have support for orientation, a feature the Joy-Con controllers use extensively.

Releasing Joy-Con WebHID →
Joy-Con WebHID Repo (GitHub) →

Related: Jumping the Hurdles with the Gamepad API →

Why you’d want to hold off buying a Nintendo Switch just yet

Painful to watch:

Many Switch users are experiencing problems from day one. Reports are submitted everyday with new pictures and videos. Loud crashes, errors, bricked blue/orange screens, dead pixels, ingame artifacts, unrecognized cartridges, loose/woobly joycons, scratches and design flaws.

Nintendo Switch

This gets me excited:

In addition to providing single and multiplayer thrills at home, the Nintendo Switch system also enables gamers to play the same title wherever, whenever and with whomever they choose. The mobility of a handheld is now added to the power of a home gaming system to enable unprecedented new video game play styles.

Reminds me of Microsoft Continuum and that iPad-iMac concept by Tim Van Damme where one could slide the iPad into the iMac to upgrade it to a full blown Mac. Of course it will only be a matter of time before Apple actually copies and implements this (and then touts this, as being its New Big Unprecedented Invention (TM) ;))