O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

The Physical World meets the Web

563 visualizações

Publicada em

Presentation at Devoxx Poland 2016 - 22/06/2016 at Krakow by Maximiliano Firtman

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

The Physical World meets the Web

  1. 1. Maximiliano Firtman @firt the Physical World meets the Web
  2. 2. mobile+web developer & trainer
  3. 3. Slides, links and tests firt.mobi/talks/physical
  4. 4. questions yes, please QA at the end
  5. 5. Let’s Start!
  6. 6. Agenda 1- Mobile and IoT 2- The Physical Web 3- Progressive Web Apps 4- Connecting through Web APIs 5- VR|MR Worlds and the Web
  7. 7. 1- Mobile and IoT
  8. 8. The web comes to save us
  9. 9. 1- Mobile and IoT - Every gadget, sensor, device will have mobile support - We don’t want to install apps - We don’t want to make everything public
  10. 10. 2- The Physical Web
  11. 11. The Physical Web is an open approach to enable quick and seamless interactions with physical objects and locations.
  12. 12. 1- Open Spec 2- Beacons BLE 3- Also mDNS over WiFi Goal: broadcast URLs
  13. 13. image from physical web website Eddystone protocol
  14. 14. 1- Buy beacons 2- Install “Beacon Toy” for Android 3- Also mDNS over WiFi Start broadcasting URLs!
  15. 15. Chrome on Android (49+) Chrome on iOS Current support
  16. 16. Live demo
  17. 17. 2- The Physical Web - Broadcast URL in physical places - Open standard - Anything can broadcast a URL
  18. 18. 3- Progressive Web Apps
  19. 19. Progressive Web Apps 1- Open Definition 2- Embraced by Google 3- Followed by Firefox, Opera, Samsung and Microsoft
  20. 20. A Progressive Web App is a model for creating app-like experiences using latest Web technologies progressively
  21. 21. Features 1- Instant Loading 2- Discoverable 3- Network independent 4- Responsive 5- Installable 6- Secure 7- Linkable 8- Re-engageable 9- Works everywhere 10- Fast
  22. 22. progressive enhancement progressive enhancement
  23. 23. Progressive Web Apps 1- It’s a website! 2- Adds native installation 3- Adds Web Push Notifications 4- Adds hardware & platform access
  24. 24. Progressive Web Apps FUTUREPARTIAL But they work anyway, anywhere!
  25. 25. Live demo
  26. 26. Progressive Web Apps 1- HTML5 2- Service Workers 3- Web App Manifest 4- Web Push Notifications 5- (optionally) Hardware APIs
  27. 27. 3- Progressive Web Apps - Best of native and web worlds - We can serve app-like experiences - The user can use it from the browser, or install it - Push messages for re-engagement
  28. 28. 4- Web APIs
  29. 29. Device Sensors Web Audio Web Bluetooth web apis
  30. 30. DEVICE SENSORS 1- Mostly useful on mobile devices 2- Use device’s hardware & sensors 3- Different Levels a- Mature APIs b- Experimental APIs c- Future APIs
  31. 31. a- Mature APIs Geolocation (GPS & WiFi) Accelerometer and Magnetometer Compass Camera (still picture)
  32. 32. Know more about these APIs… Thursday 14.30 Breaking the Limits of the Web
  33. 33. b- Experimental APIs Get User Media Ambient Light Speech Recognition and Synthesis WebMIDI
  34. 34. Get User Media Get the stream video from the camera Recognize objects, faces, QR codes Augmented reality
  35. 35. <code> 
 navigator.getUserMedia( {video:true,audio:true}, function(stream){ var videoSource = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } ); JAVASCRIPT
  36. 36. <code> 
 navigator.getUserMedia( {video:true,audio:true}, function(stream){ var source = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } ); JAVASCRIPT
  37. 37. Get User Media
  38. 38. Live demo
  39. 39. Web Midi Connect to music devices: 
 synthesizers, keyboards, guitars, drum machines, lightning systems Send and receive MIDI messages
  40. 40. <code> 
 navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } } JAVASCRIPT
  41. 41. <code> 
 navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } } JAVASCRIPT
  42. 42. <code> 
 navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } } JAVASCRIPT
  43. 43. <code> 
 navigator.requestMIDIAccess({sysex: false}) .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midi) { var inputs = midi.inputs.values(); for (var input=…) { input.value.addEventListener(“midimessage”, function(event) { // event.data has the bytes }); } } JAVASCRIPT
  44. 44. Web Midi
  45. 45. Ambient Light Get info about current light conditions Measures in lux
  46. 46. <code> 
 window.addEventListener('devicelight', function(event) { var lux = event.value; }); JAVASCRIPT
  47. 47. <code> 
 window.addEventListener('devicelight', function(event) { var lux = event.value; }); JAVASCRIPT
  48. 48. Live demo
  49. 49. Ambient Light FLAG FUTURE
  50. 50. Speech Synthesis and Recognition Let us interact with the user with voice Synthesis: let the Web speak Recognition: let the Web listen to user
  51. 51. <code> 
 var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”; speechSynthesis.speak(u); JAVASCRIPT
  52. 52. <code> 
 var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”; speechSynthesis.speak(u); JAVASCRIPT
  53. 53. <code> 
 var u = new SpeechSynthesisUtterance(); u.rate = 1; u.volume = 1; u.pitch = 1; u.text = “Hello World”; u.lang = “en-GB”; speechSynthesis.speak(u); JAVASCRIPT
  54. 54. <code> 
 recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } }; JAVASCRIPT
  55. 55. <code> 
 recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } }; JAVASCRIPT
  56. 56. <code> 
 recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } }; JAVASCRIPT
  57. 57. <code> 
 recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } }; JAVASCRIPT
  58. 58. <code> 
 recognition = new SpeechRecognition() recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener(“result”, function(e) { if (e.type==“result") { for (…) { var result = e.results[i][0]; var confidence = result.confidence*100); var text = result.transcript; } } }; JAVASCRIPT
  59. 59. Live demo
  60. 60. Speech Synthesis FLAG FUTURE
  61. 61. Speech Recognition
  62. 62. c- Future APIs Geofencing WebUSB WebNFC
  63. 63. Geofencing Get a web or PWA activation when user enters or leaves a geo area
  64. 64. WebUSB Let us connect with any USB hardware connected to the device
  65. 65. WebNFC Near Field Communication Access to Tap to Pay, Tap to Share, etc.
  66. 66. WEB AUDIO 1- Generate dynamic audio 2- Listens to low level audio 3- Useful for ultrasound communication with devices!
  67. 67. <code> // Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415'); // Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start() JAVASCRIPT Using Sonicnet.js library
  68. 68. <code> // Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415'); // Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start() JAVASCRIPT Using Sonicnet.js library
  69. 69. <code> // Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415'); // Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start() JAVASCRIPT Using Sonicnet.js library
  70. 70. <code> // Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415'); // Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start() JAVASCRIPT Using Sonicnet.js library
  71. 71. <code> // Sending ssocket = new SonicSocket({alphabet: '0123456789'}); ssocket.send(‘31415'); // Receiving sserver = new SonicServer({alphabet: '0123456789'}); sserver.on('message', function(message) { // Expect message to be '31415'. console.log(message); }); sserver.start() JAVASCRIPT Using Sonicnet.js library
  72. 72. Live demo
  73. 73. WEB AUDIO
  74. 74. WEB BLUETOOTH 1- Scan BLE devices 2- Scan services available 3- Connect to these services 4- Send and receive data
  75. 75. WEB BLUETOOTH Huge access for IoT Mixed with the Physical Web Better with Bluetooth 5.0
  76. 76. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  77. 77. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  78. 78. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  79. 79. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  80. 80. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  81. 81. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  82. 82. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  83. 83. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  84. 84. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }).then(function (device) { return device.gatt.connect(); }).then(function (server) { return server.getPrimaryService(“heart_rate”); }).then(function (service) { return service.getCharacteristic( “heart_rate_control_measurement”); }).then(function (ch) { return ch.startNotifications().then(function() { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); });; JAVASCRIPT
  85. 85. <code> 
 navigator.bluetooth.requestDevice({ filters: [‘services’: ‘heart_rate’] }) .then(device => { device.gatt.connect() }) .then(server => server.getPrimaryService(“heart_rate”); }) .then(service => service.getCharacteristic( “heart_rate_control_measurement”);}) .then(ch => return ch.startNotifications().then(() => { ch.addEventListener('characteristicvaluechanged', function() { event.target.value }); }); }); JAVASCRIPT
  86. 86. Heart Rate Sensor Demo
  87. 87. BB8 Controller
  88. 88. Drone controller
  89. 89. Live demo
  90. 90. WEB BLUETOOTH FLAG
  91. 91. 4- Web APIs - Device Sensor APIs: 
 mature, experimental, future - Web Audio - Web Bluetooth - TV Streaming
  92. 92. 5- VR|MR World 
 and the Web
  93. 93. Virtual Reality Mixed Reality new worlds
  94. 94. VR and the Web Samsung Internet Browser for Gear VR Oculus Web Browser Third party browsers
  95. 95. Live demo
  96. 96. WebVR Access to VR devices in your browser (Oculus, Cardboard, Vive) Experimental support Available as a polypill
  97. 97. WebVR BUILD DEV FLAG
  98. 98. WebVR DEVPOLYFILL POLYFILL
  99. 99. MR and the Web Mixed Reality with Windows Holographic Hololens
  100. 100. Live demo
  101. 101. MR and the Web We are in very early stages We need content to get out of the flat hologram
  102. 102. - We are in early stages - We will need new APIs and concepts - VR and MR mixed with Physical Web and Web Bluetooth 5- VR|MR World 
 and the Web
  103. 103. the physical world meets the web 1- Mobile and IoT 2- The Physical Web 3- Progressive Web Apps 4- Connecting through Web APIs 5- VR|MR World and the Web
  104. 104. Foto de freefoto.com firtman@gmail.com @firt firt.mobi/hpmwfirt.mobi/mh5

×