Fun with the Web Bluetooth API and React
WHERE TO START?
The Web Bluetooth API is some relatively new, experimental tech that allows a user to connect to a Bluetooth Low Energy (BLE) device straight from your web browser. It doesn’t yet have broad support from all browsers, but has compatibility with Google Chrome. In order to utilize the API, you must enable-experimental-web-platform-features in your Chrome preferences by visiting ://flags.
After that, it’s just a matter of writing some good, plain-old-Javascript asynchronous functions. I started playing with this tech by watching a video demonstration of the API by the very entertaining Niels Leenheer and following some of the examples in this web.dev article.
I first got interested in the idea of playing around with Bluetooth technology when I stumbled on this article about hacking a BLE lightbulb. As much fun as hacking a lightbulb sounded, ultimately, I used this information to build a project called Voice2Vibes that connects to a Bluetooth Vibrator called the Moxie by We-Vibe and also utilizes the Web Speech API to allow a user to use voice commands to control the vibrator.
What is BLE?
BLE (or Bluetooth Low Energy) is the modern bluetooth technology that we’ve all come to know and love. It’s better, faster, stronger than traditional bluetooth, and uses lower energy, so BLE devices can run on smaller batteries for longer periods of time.
Central devices are devices, like your computer or cell phone, that can talk to and connect with peripheral BLE devices. Peripheral devices, like a lightbulb or speaker, can only connect to one central device and can’t talk to other peripherals. Central devices can be connected to many peripherals at a time.
BLE devices use Generic Attribute Profile (GATT) protocol to connect and talk to each other. Central devices are known as the “client” and peripheral devices are known as the “server.”
Sticking with our Javascript, the server is like and array of objects. Each server has many services (which are the objects in the array) which include things like device information, battery information, and controllers. A characteristic is like a property of that object and each service may have many characteristics. Finally, each characteristic has a value. Some characteristics are read only, meaning they send information to the client. Others are read and write, meaning you can send information from the client to this characteristic, which may change something (like turning a device on or off) about the server you are talking to. You can also get notifications if a characteristic’s value changes.
WORK YOUR SPY SKILLS
The first place I started with my project was with learning how to spy on BLE devices. I downloaded an app for my phone called LightBlue that allows you to see all of the peripheral BLE devices near you. I was able to find the Moxie by name, and connect to it. I noticed that the vibrator had two services. One was very clearly device information, so I figured the other might be the controller. I connected the Moxie to the app already created by We-Vibe called We-Connect. I found the only characteristic in the other service that was read/write and started turning the vibrator on and off using the We-Connect app. As a changed the signals, I would re-read the values on the characteristic and was soon able to discern the hex value pattern being sent back and forth.
I was then able to set up a basic Web Bluetooth API app with some Javascript and a few buttons in an HTML file to learn how to connect to the device and turn it on and off. I later applied these basics to a React Project (code below).
SECURITY?
Does this all seem surprisingly easy so far? That’s because it is. BLE technology in general has been known to have lax security. This gets even worse when you consider devices in the sex-tech (sex technology aka Teledildonics) industry where virtually no company producing these devices meet industry standards for security. Additionally, We-Vibe has already paid out a settlement to users claiming they collected user data on how the device was used (like vibration speed and body temperature) without customer knowledge. This definitely raises some interesting questions about BLE tech and concerns about the sex-tech industry.
It’s one thing if someone hacks your BLE lightbulb or speaker in your house, but it’s another issue entirely if someone hacks your sex toy.
CREATING A BLUETOOTH COMPONENT FOR REACT
My project used React as a front end, so I ended up building a Bluetooth Component for my site. This component consisted of a simple “Connect” button and some magic Web Bluetooth API code in the background. You need to have some sort of button or user input because the API will only initiate a search for BLE devices on a user action.
I used an async function to set a variable called “device” to the result of navigator.bluetoooth (from the WebBluetooth API) .requestDevice.
I then stored the device, server, service, and characteristic that I was writing to in the state of my app class.
I also added a function that alerts a user when the device connection is lost via an addEventListener.
WRITING VALUES TO A CHARACTERISTIC
Once you’ve connected to the device and set a variable equal to the characteristic you want to write to, sending a value is as easy as:
new Uint8Array creates a typed array of 8-bit unsigned integers, which is the information you are sending to the device. As I mentioned earlier, I used the LightBlue app to read the information being sent to the vibrator via the existing app, and just copied down the Hex Values. There’s more sophisticated ways read the signals between your central and peripheral devices as well.
That’s it! You’ve connected to a device and are writing to a characteristic. Those are the basics! No go forth and explore all the fun ways to interact with the BLE devices around you!
A NOTE ON INCLUSIVE TECHNOLOGY
While admittedly, hacking a BLE vibrator was just a super fun learning experience, I also designed my Voice2Vibes project with inclusivity in mind. A voice activated app may allow a user with limited mobility or motor function to better interact with their vibrator. Additionally, it extends the ways partners in Long Distance Relationships (LDRs) or those quarantining during COVID may interact with each other. Finally, this app avoids using gender language, such as saying the MOXIE is a vibrator for “women” and instead using “people with vulvas” (reminder- not all women have vulvas, and not all people who have vulvas are women!).
