Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2019. Sebastian Golasch. The Universal Serial Web

25 views

Published on

As a web developer it´s easy to feel intimidated by the world of hardware hacking and the physical web, we have to leave our comfort zone and need to get familiar with a completely new development environment. But not anymore, thanks to wonderful possibilities that the WebUSB Api brings to our browsers.
In this talk I will give an intro to the endless wonders we can encounter in the hardware world through our browser windows. Aside from leaerning the basics of USB and serial port communication, we´ll paint on USB displays, live tweet to receipt printers, control an Arduino, steal data from Android phones and many more… The only limit is your imagination.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2019. Sebastian Golasch. The Universal Serial Web

  1. 1. The Universal Serial Web
  2. 2. <Me/>
  3. 3. I´ve Been Tinkering With Hardware Since 2011…
  4. 4. Universal Hardware Interface: Usb
  5. 5. Usb Basics 💻
  6. 6. History 1994 Usb Development Started
  7. 7. History 1994 1995 Usb Development Started Usb Became Available To The Public
  8. 8. History 1994 1995 1998 Usb Development Started Usb Became Available To The Public Apple Made Usb Popular With The Imac G3
  9. 9. History 1994 1995 1998 2000 Usb Development Started Usb Became Available To The Public Apple Made Usb Popular With The Imac G3 Usb 2.0 Was Released, As Well As The 1St Usb Flash Drive
  10. 10. History 1994 1995 1998 2000 2008 Usb Development Started Usb Became Available To The Public Apple Made Usb Popular With The Imac G3 Usb 2.0 Was Released, As Well As The 1St Usb Flash Drive Usb 3.0 Was Released (Super Speed)
  11. 11. Connector Layout
  12. 12. Connector LayoutD- Vbus GndD+ Vbus - Power 5V Gnd - Ground D+ - Data D- - Data
  13. 13. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  14. 14. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  15. 15. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  16. 16. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  17. 17. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  18. 18. The Usb Way™ OH, IS THAT SUPPORTED ON MY OS? INSTALL A NATIVE APPLICATION SEARCH THE INTERNET FOR A DRIVER SCARY OS POPUP TURNS UP CODE STICKS AROUND FOREVER MALFUNCTION KILLS EXISTING SETUP
  19. 19. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  20. 20. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  21. 21. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  22. 22. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  23. 23. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  24. 24. A Nicer Usb Way™ NOTIFICATION APPEARS PLUG IN BUY A DEVICE CLICK ON IT FUN! OPENS WEBSITE
  25. 25. Web Usb 💖
  26. 26. Webusb Facts Only Available Via Https * For Security Reasons, Like Done With All New Platform Features * No „Native Code“ Needed * No Need To Install Any Drivers Or Other 3Rd Party Software* Real Plug & Play * Plug In Device, Click Link, Use It*
  27. 27. Code, Now, Please… 👾
  28. 28. Device Descriptor
  29. 29. Device Descriptor
  30. 30. Device Descriptor
  31. 31. Device Descriptor Config Descriptor Config Descriptor
  32. 32. Device Descriptor Config Descriptor Interface Descriptor Interface Descriptor
  33. 33. Device Descriptor Config Descriptor Interface Descriptor Endpoint Descriptor Endpoint Descriptor
  34. 34. Device Descriptor Config Descriptor Interface Descriptor Endpoint Descriptor Endpoint Descriptor
  35. 35. ControlInterrupt Transfer Isochronous Out In * Interrupt transfers are typically non-periodic, small, device "initiated" communication That requirE A SpecIFIC latency *
  36. 36. ControlInterrupt Transfer Isochronous Out In * Interrupt transfers are typically non-periodic, small, device "initiated" communication That requirE A SpecIFIC latency *
  37. 37. ControlInterrupt Transfer Isochronous Out In * Interrupt transfers are typically non-periodic, small, device "initiated" communication That requirE A SpecIFIC latency *
  38. 38. ControlInterrupt Transfer Isochronous Out In * Interrupt transfers are typically non-periodic, small, device "initiated" communication That requirE A SpecIFIC latency *
  39. 39. Interrupt Control Transfer Isochronous Out In * Control transfers are especially nice for small configuration commands as they get bus priority and have a well defined structure *
  40. 40. Interrupt Control Transfer Isochronous Out In * Control transfers are especially nice for small configuration commands as they get bus priority and have a well defined structure *
  41. 41. Interrupt Isochronous TransferControl Out In * ISOCHRONOUS transfers are RARELY USED, Mostly for AUDIO AND VIDEO DEVICES that sent a persistent STREAM OF DATA *
  42. 42. Now Pray To The Demo Gods 🤞
  43. 43. Demos Create An Interactive Arduino Playground
  44. 44. Demo
  45. 45. Node -> Browser
  46. 46. Node -> Browser
  47. 47. Serialport Communication
  48. 48. Which?
  49. 49. Who?
  50. 50. What?
  51. 51. What? Pt.2
  52. 52. Whom Again?
  53. 53. Node -> Browser
  54. 54. Demos Connect To An Android Device & Download Some Data Create An Interactive Arduino Playground
  55. 55. Demo
  56. 56. Send Adb Commands
  57. 57. Easy Adb
  58. 58. Security ⚠
  59. 59. 01. 02. 03. 04. Security 03. No Cam/Microphone/Storage 04. Kill Switch 01. Only Via User Gesture 02.User Has To Grant Permission 🖱 📹 🖖 🆘
  60. 60. Demos Connect To An Android Device & Download Some Data Create An Interactive Arduino Playground The Lost Art Of The Gameboy Printer
  61. 61. Demo
  62. 62. Printer Code
  63. 63. Printer Code
  64. 64. Demos Connect To An Android Device & Download Some Data Create An Interactive Arduino Playground The Lost Art Of The Gameboy Printer Create A Public Library Using: Rfid Cards, A Barcode Scanner & A Receipt Printer
  65. 65. Demo
  66. 66. Hid ⌨
  67. 67. Data Polling
  68. 68. Hid Code
  69. 69. Hid Code Reality
  70. 70. That Worked Well 😅
  71. 71. 🤾 Playground
  72. 72. Play A Round Of Simon Says With Me & Talk About Web-Usb
  73. 73. Chrome://Device-Log/
  74. 74. Chrome://Usb-Internals/
  75. 75. 😞 😞 😞 🤓
  76. 76. Take Aways 👜
  77. 77. Webusb Lets Us Write Our Own Drivers For Devices
  78. 78. We Can Build Plug & Play Systems: Like A Checkout System For Shops
  79. 79. It Makes It Easy To Start Tinkering With Hardware (Think Schools), No Hard Setup Steps For Beginners
  80. 80. We Can Go Full Retro And Rebuild Forgotten Art
  81. 81. We´re Improving The Lives Of The End-User
  82. 82. We Can Have Lots Of Fun 🍾 And Built Shitty Robots 🤖
  83. 83. Дякую https://asciidisco.com / E-mail: public@asciidisco.com / Twitter: @asciidisco / Sebastian Golasch 2019
  84. 84. Useful Links: Https://Wicg.Github.Io/Webusb/ Https://Github.Com/Drffej/Webusb.Printer Https://Developers.Google.Com/Web/Updates/2016/03/Access-Usb-Devices-On- The-Web Https://Github.Com/Webadb/Webadb.Js Https://Github.Com/Asciidisco/Webusb-Workshop https://asciidisco.com / E-mail: public@asciidisco.com / Twitter: @asciidisco / Sebastian Golasch 2019

×