gamepad-poc

Proof of concept for reading gamepad input using the browser Gamepad API.

Usage

Live demo

https://electrovir.github.io/gamepad-poc/

Local dev

git clone https://github.com/electrovir/gamepad-poc.git
cd gamepad-poc
npm install
npm start

Open your browser to http://localhost:61016, or whatever URL is printed on your terminal after Local: .

Results

tl;dr: Chrome or Chromium in Electron is the most consistent experience, even if it does not follow the expected specs. (For example, Chrome has a hard max of 4 controllers.)

Empty spots will be filled in over time. Feel free to contribute!

1. This controller never shows up.
2. The Wired Xbox 360 Controller on macOS Big Sur can only be connected to one browser at a time. To change that browser, close the connected browser, refresh the new browser and disconnect and reconnect the controller.
3. The Switch Pro Controller on macOS Big Sur shows up as two controllers. Each controller has a different name and different button counts. Often one of the controllers doesn't respond to all inputs, while the other responds perfectly. One has the vibrationActuator nulled out in Chromium browsers. (This is really bad for Chromium because it means only 2-3 players can connect.)
4. The Wireless Xbox 360 Controller receiver has no drivers for macOS Big Sur. The receiver does not even turn on.
5. Pressure sensitive triggers are each mapped as an axis instead of a button with a percentile value (which is how every other browser does it).
6. Chromium instantly crashes on Ubuntu whenever I try to connect any controller.
7. The Chrome rumble API does not follow the current MDN (here) documentation. Chrome documentation is here. Here's some example code:

   navigator.getGamepads()[0].vibrationActuator.playEffect('dual-rumble', {duration: 1000, strongMagnitude: 1, weakMagnitude: 1}).then(result => console.log(result)).catch(error => console.error(error))
   

8. If you play around with multiple browsers accessing the same controller, Safari often loses the ability to read axis values (buttons still work). Disconnecting controller, quitting Safari, reopening Safari, and reconnecting the controller fixes this.
9. In Safari, the Switch Pro controller's - button is super laggy and the screenshot button does not get picked up at all. (Sometimes these buttons try to trigger Safari screen recording.)
10. No haptic support.
11. Safari will stop reading inputs (I'm guessing it pauses requestAnimationFrame) when it's not the focused app (in the background). Other browsers will continue to update.
12. Chromium browsers restrict controller connections to a max of 4.
13. Sometimes this controller will connect to Firefox but it fails to read any input. Might be my code, but it works in all other browsers so far.
14. Firefox on Windows is not rendering this repo at 60fps.

Naming

Each controller is named something slightly different in each situation.