Connecting hardware devices to the web

(lighthearted music) - This short video is about brand new capabilities your web app can use to communicate with hardware devices over a Bluetooth, USB, NFC, Serial, and HID. This is opening up so many opportunities, but if your current thinking is what or why, I bet you’re going to learn some stuff today. I’m Francois Beaufort, and in this video, I want to show you what you can do with those device APIs, how they work, and what developers have delivered so far. But first, why are we building these APIs in Chrome? We want to make it safe and easy for you to connect to real-world devices. From affordable NFC tags to specialized HID devices, flashing a new OS to your phone, or even programming a microcontroller, but ultimately by bringing those APIs to the web platform, more users will be able to interact safely with existing and upcoming devices.

01:02 - I believe we should not have to install sketchy binaries to control hardware devices. And here’s how Chrome protects us: First, a web app can’t access a device without user permission. The user has to specifically select the device, then grant to web app device access. Unlike native apps, web apps are not allowed to list all connected devices. Cross-origin iframes can’t, by default, prompt users. And of course, HTTPS is required for integrity reasons. In 2015, we added the Web Bluetooth API, so that web apps could connect to nearby Bluetooth Low Energy devices and interact with them through the GATT protocol. Think of heart rate monitors, toys, sensors, bulbs, and many more. In short, you could read and write some characteristic on the device and get notified of changes. This code, for instance, is all you need to read the battery level of a user-selected Bluetooth device.

02:03 - Gordon Williams, the lead developer of Espruino, an open-source JavaScript interpreter for microcontrollers, took advantage of Web Bluetooth to build the web IDE. - We want to allow users to get started really quickly. They can get one of our devices, go to a website, and start writing code in seconds, without having to install anything. And that’s only possible because of Web Bluetooth and web Serial. Going to a website is faster and safer for users than installing an app.

02:29 - But even if you wanted to make an app, there’s no universal API that works on Windows, Mac, Linux, ChromeOS, Android, and iOS, that we can use for Bluetooth and Serial. With Chrome’s device APIs, we can have one JavaScript code base that will be used by all platforms. And the API is used by so many people that they’re well-tested, reliable, and stable. We don’t have to maintain builds for each different platform we support either. And software updates can be done by changing the website, rather than having to manage app store submissions for every platform.

03:02 - - You can learn more about Web Bluetooth by checking out links in the description. Web USB is one secure way of accessing user-selected USB devices from a web app, without having to install drivers via privileged executables. Think of easier firmware updates, mobile device screen recorders, ledgers, oscilloscopes, and so on. My personal favorite is the official Android Flash Tool that allows you to flash a new OS to your Android device entirely from the browser. You can learn more about Web USB by checking out links in the description.

03:40 - More recently, web apps on Android devices can now experiment with reading and writing to NFC tags when they are in close proximity to the user’s device. I’m thinking museums and art galleries could show some additional information about a display when the user touches their device to an NFC tag. Or an inventory management web app could read or write data to an NFC tag on a container to update information on its content. Web NFC is currently limited to a binary message format called NDEF, which works great across different tech formats. First, prompt the user to allow your web app to scan NFC tags, then handle incoming NDEF messages by subscribing to reading events.

04:25 - I built a Web NFC card demo game last year. It was a lot of fun, and the code was really simple. I was only using serial numbers to identify NFC cards. Writing to NFC targets is similar to reading. This time, call the write method with a string to write some text, or pass a dictionary with an NDEF message to write some UART, for instance. You can find everything about Web NFC at web.dev/nfc. Oh, and I want to say thank you to the folks at Intel for their work. They are doing an amazing job. The Serial API is one of those device APIs that reminds you that the world we’re living in today still relies on legacy devices that are critical to our lives. And Henrik Joreteg will tell us why. - I want you to pretend for a second, that you are an anesthesiologist, which means you put people to sleep, and it’s your job to make sure that they stay alive during this process. And you do so by hooking up a patient to something like this, a patient vitals monitor.

05:28 - Now, in addition to actually putting the patient to sleep, it’s your job to track everything, so every five minutes, you have to take a reading off of this device and put it into something called a sedation record. And a lot of people these days are doing that with pen and paper. So naturally, we built a progressive web app at anesthesiacharting.com, that does this for you. It not only helps you produce the record, but we can actually use Web Serial to pull the vitals data directly off of these monitors and put it into the record. It’s really simple. We get instant cross-platform distribution without having to ask these doctors to go install some software.

06:05 - They can just go to a webpage, plug in their device, and they’re off and running. It’s beautifully simple. It turns out there are thousands of these devices out there that costs thousands of dollars and were completely fine, but we can give them new life by just being able to control it and being able to pull the data off of them. Currently, most of them aren’t even hooked up to anything. So this is really awesome, being able to take advantage of the investments that they’ve already made and really bring it back to life. - In other words, the Serial API bridges the web and the physical world by allowing web apps to communicate with Serial devices, such as patient monitors but also microcontrollers, 3D printers, Arduinos, Raspberries, and the list goes on.

06:52 - To listen to the data coming from a Serial device, first, prompt the user to select to select a Serial port. Then, wait for the Serial connection to open at a specific baud rate. And finally, within a simple while(true) loop, call the read method from the ReadableStream reader object. And that’s all. How to write to a Serial port and all details about the Serial API are available at web.dev/serial. There is a long tail of human interface devices, also known as HID, such as alternative auxiliary keyboards or exotic gamepads, that are just too new, too old, or even too uncommon to be accessible by a system’s device drivers.

07:33 - Lucky for us, the Web HID API provides a safe way to access those. Olivier Gay from Logitech will share why it matters. - At Logitech, being able to connect our devices with most systems and OSs, including the web, is important. Technologies like Bluetooth, HID, or USB, are the core for Logitech mice and keyboards. We have done some nice demo web apps and tracking with our devices. For example, we have done a demo where a device will update instantly from the web. And it works great. We have been contributing to these web hardware APIs since the beginning, participating in forums, and submitting patches. With Web HID, we also quickly built a web app to pair the devices through our unifying Nano. It’s easy to communicate with devices using Web HID API by writing just a few lines of code. We originally brought this web up for Chrome browser.

08:24 - Last year, the first beta of S Ledger was released. When we tried our web app on Edge, we had the nice surprise it was immediately working. That’s the cross-platform nature of the web. You can have just one code base, and it works on different systems. - Now, let’s have a look at what it takes to make your Apple keyboard backlight blink. Yeah, just like this. Prompt the user to select the keyboard backlight HID device. Then, wait for the connection to open, and finally, send some feature reports with bytes that contain instructions to turn on and off the backlight. This is a simple example, but it shows you how quick and easy you can get started with Web HID. Have a look at web.dev/hid to learn more about the API, and play with samples. And here we are. I deeply believe the web platform is getting better for everyone with hardware devices support.

09:17 - It gets better for kids who love hacking devices with friends, it gets better for developers, as the barrier to entry is lower, and they can now provide a solution that works cross-platform. It gets better for users, as they don’t have to install drivers via privileged executables. And most of all, it gets better because it allows old and new devices to coexist in an open platform. Thanks for watching. (lighthearted music) .