Wiimote on the web using the WebHID API
I was able to get the Wiimote work on the web! Quite cool right ?!
How it started:
How it ended:
You can also try the demo: https://picchikevin.github.io/wiimote-webhid/
Where did the project come from?
Well more than just being a cool “party trick” ( please don’t judge me nor my parties 🙏).
I actually want to show you the real use case and the story behind the Wiimote library.
It started as part of my work in the 5G Tours project (Horizon 2020) which is a European funded project where I overview 3 projects.
Among theses 3 projects, one of the use case is a multiplayer experience.
The goal is to give the players the ability to experience the artistic process of Nicola De Maria who is known for his abstract figurative works.
Here is one of Nicola de Maria art work named:
Kingdom of musical flowers. Bomb-free universe
The players would be standing in front of a projected screen and would be able to paint different shapes and figues according to the artistic style of Nicola.
But how?!
This involves having a remote controller that allow us to capture gesture, movement and some way to know where the player is pointing on the wall (screen projected).
But after some research I wasn’t able to find any new cool new trendy high tech blockchain and AI powered controller.
Instead I’ve food something even better…
drumroll 🥁🥁🥁
The Wiimote
Yes the Wiimote, fits all the requirement, and it’s just an awesome piece of hardware, it’s composed of:
- 11 Buttons
- An accelerometer
- An IR Camera (monochrome with built-in image processing)
- Some models also have a gyroscope (Wii MotionPlus)
More than just having a camera, there is a built-in image processing!
It’s really nice and make the development of such libraries easier.
Although I would agree that getting raw data from the sensor would be useful for some use cases.
How did I create this library?
It wouln’t have been possible without the awesome work of WiiBrew.
Their reverse engineering wiki is very well done and easy to understand.
I’d recommend checking it out if you’re intrested about how things happen at a low level:
Here is the wiki about the Wiimote: https://wiibrew.org/wiki/Wiimote
The Wiimote library is using the WebHID API (WICG).
Basically the API allows you to communicate with any device that support the Human Interface Device (HID) protocol.
The HID protocol was originally developed for USB devices but has since been implemented over many other protocols, including Bluetooth.
You can find the whole spec here:
As the WebHID API is still in an experimental status it is only available behind a flag from Chrome 85. You can enable it by going to chrome://flags and enabling the flag #enable-experimental-web-platform-features
Once this is done you can enjoy all the cool feature of the api.
How does the library communicate with the Wiimote?
It utilises the sendreport method of WebHID along with the oninputreport method to receive the response of the device.
The responses are then parsed depending on the reportId and decoded through the dedicated function if needed. Afterwards the data is updated and events are sent.
Here is an example of a raw communication to enable the remote rumbling:0x16 0x01
And to turn it of:0x16 0x00
And here is another raw communication, this one turns the camera on:
You can find the details, and explanation of the raw communication on http://wiibrew.org/wiki/Wiimote
Where can you find the library?
The library is completely open source, feel free to contribute to it, there is a lot of work to be done. I am counting on you!
Got any question about it? Feel free to reach out!
Thanks for reading!
-Kevin (@KevinPicchi)
