an introduction to web usb

1. WebUSB
a gentle introduction

2. WebUSB
how do you send a SIGINT in
the browser?
🤔

3. Suz Hinton
Work on open source IoT libraries
Developer relations @ Microsoft
@noopkat

4. the world’s largest egg

5. two Tobias hawks

6. 📚 a history of the web + devices
🤔🤔♀️ what is webUSB
⌨️ how to use webUSB
👻 FuTuReS
topics we’re covering

7. history of ‘web usb’

8. 2007-2009
Flash Communication
Server + Serproxy

12. 2013-2017
Chrome Serial
⚰️

14. C.H.I.P. computer

17. 💀 was not an official web spec
💀 only worked in Chrome Apps
☠️ Chrome Apps were sunset in ’17
Chrome Serial sadness

18. today
Browser + websockets📞

22. what is webUSB?

23. “The WebUSB API provides a
way to safely expose USB
device services to the web.”
- webUSB spec

24. “It provides an API familiar to
developers who have used
existing native USB libraries and
exposes the device interfaces
defined by existing specifications.”
- webUSB spec

25. webUSB !== serial

26. why is webUSB better?

30. hardware interfaces should be:
🤔 fast to make
📦 cross platform
💅🤔 look good
♿️ be accessible

31. browsers are a commonly
installed application on
many computers

32. browser based interfaces:
🤔 rapidly prototyped
📦 hot patched easily
💅🤔 CSS is powerful
♿️ consistent a11y tree

33. “With this API hardware
manufacturers will have the
ability to build cross-platform
JavaScript SDKs for their devices.”
- webUSB spec

34. webUSB use

35. user event (eg. click)
browser asks access permission
user confirms permission
browser looks for devices
returns device matches
open device connection
select configuration
claim interface
✨ begin transfers ✨

38. 🤓❤️

39. I’m back on my 💩

40. Demos 😬🤔🤔

41. disclaimer
webUSB is not super stable right now
and so stuff keeps randomly breaking.
everything I’ve made with webUSB is
‘duct tape city’ at the moment.
😬

42. 😳

46. Demo 1 made with
+ webUSB Serial – github.com/monteslu/webusb-serial
+ Johnny Five –github.com/rwaldron/johnny-five
+ oled-js – github.com/noopkat/oled-js
+ png-to-lcd – github.com/noopkat/png-to-lcd
+ oledjs-designer – github.com/hxlnt/oledjs-designer
+ webpack – github.com/webpack/webpack

47. Demo 2 made with
+ avrgirl-stk500v2 – github.com/noopkat/avrgirl-stk500v2
+ avrgirl-ispmkii – github.com/noopkat/avrgirl-ispmkii
+ webpack – github.com/webpack/webpack
+ lots of bad code written on a plane

48. Futures ✨

49. Current support

51. Why support this?

52. “This will be good for the web
because, instead of waiting for a
new kind of device to be popular
enough for browsers to provide a
specific API, new and innovative
hardware can be built for the web
from day one.”
- webUSB spec

53. Resources
+ webUSB spec – wicg.github.io/webusb
+ Arduino example –github.com/webusb/arduino
+ my demo – github.com/noopkat/webusb-fun

54. thanks