Slides of my talk at DevFest 2016 in Cochabamba, Bolivia (en español - in spanish) about Web APIs for hardware access, the Physical Web, WebVR and other technologies.

1. Maximiliano Firtman
@firt
la Web salta al Mundo Físico

2. mobile+web desarrollador & profesor

4. cursos dictados

6. Libros que
escribí

7. Traducciones

9. preguntas
si! por favor!
al final

10. Empecemos!

11. Agenda
1- Mobile y IoT
2- La Web Física
3- Progressive Web Apps
4- Conexión vía Web APIs
5- Mundos VR|MR y la Web

12. 1- Mobile y IoT

19. La web viene a salvarnos

20. 1- Mobile y IoT
- Cada gadget, sensor, dispositivo va a
tener soporte de uso desde dispositivos
- No queremos instalar apps todo el tiempo
- No queremos hacer todo público

21. 2- La Web Física

22. La Web Física (Physical Web) es una
especificación abierta para permitir
interacciones rápidas a objetos físicos
y ubicaciones.

23. 1- Especificación abierta
2- Beacons BLE
3- También mDNS sobre WiFi
Objetivo: broadcast URLs

24. image from physical web website
Protocolo: Eddystone

25. 1- Comprar beacons
2- Instalar “Beacon Toy” en Android
Empezar a hacer broadcast URLs!

28. Chrome en Android (49+)
Chrome en iOS
Google Play Services
Soporte actual

30. 2- La Web Física
- Broadcast URL en lugares físicos
- Estandar abierto
- Cualquier cosa puede enviar una URL

31. 3- Progressive Web Apps

32. Para saber más del tema….
Hoy!
Después del horario de almuerzo

33. Hay que esperar a luego del
almuerzo!

34. Una Progressive Web App es un
modelo para crear experiencias tipo
app usando las últimas tecnologías
web progresivamente

35. 4- Web APIs

36. Device Sensors
Web Audio
Web Bluetooth
web apis

37. DEVICE SENSORS
1- Útiles en dispositivos mobile
2- Usa hardware y sensores
3- Diferentes Niveles
a- APIs Maduras
b- APIs Experimentales
c- APIs Futuras

38. a- APIs Maduras
Geolocation (GPS & WiFi)
Accelerometer y Magnetometer
Brújula
Camera (imagen estática)

39. b- APIs Experimentales
Get User Media
Ambient Light
Speech Recognition and Synthesis
WebMIDI

40. Get User Media
Obtener el video stream video desde la
cámara
Reconocer objetos, caras, QR codes
Realidad Auemntada

41. <code>
navigator.getUserMedia(
{video:true,audio:true},
function(stream){
var videoSource =
URL.createObjectURL(stream);
},
function(){
alert("Error getting video feed");
}
);
JAVASCRIPT

42. <code>
navigator.getUserMedia(
{video:true,audio:true},
function(stream){
var source = URL.createObjectURL(stream);
},
function(){
alert("Error getting video feed");
}
);
JAVASCRIPT

43. Get User Media

44. Live demo

45. Web Midi
Conectarse a dispositivos musicales:
sintetizadores, teclados, guitarras, máquinas de
sonidos, sistemas de iluminación
Enviar y recibir mensajes MIDI

46. <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

47. <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

48. <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

49. <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

50. Web Midi

51. Ambient Light
Obtiene información acerca de
actuales condiciones de luz
Se mide en lux

52. <code>
window.addEventListener('devicelight',
function(event) {
var lux = event.value;
});
JAVASCRIPT

53. <code>
window.addEventListener('devicelight',
function(event) {
var lux = event.value;
});
JAVASCRIPT

54. Live demo

55. Ambient Light
FLAG FUTURE

56. Speech Synthesis y Recognition
Nos permite interactuar con el usuario
con la voz
Synthesis: permite que la Web hable
Recognition: permite que la Web
escuche

57. <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

58. <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

59. <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

60. <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

61. <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

62. <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

63. <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

64. <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

65. Live demo

66. Speech Synthesis
FLAG FUTURE

67. Speech Recognition

68. c- APIs Futuras
Geofencing
WebUSB
WebNFC
TV Streaming

69. Geofencing
Podemos hacer que una web o una
PWA se active cuando un usuario entra
o sale una zona geográfica

70. WebUSB
Nos permite conectarnos a cualquier
dispositivo USB

71. WebNFC
Near Field Communication
Acceso a Tap to Pay, Tap to Share, etc.

72. WEB AUDIO
1- Generar audio dinámico
2- Escuchar audio bajo nivel
3- Se puede usar para comunicación
por ultrasonido entre dispositivos!

73. <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

74. <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

75. <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

76. <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

77. <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

78. Live demo

79. WEB AUDIO

80. WEB BLUETOOTH
1- Escanear dispositivos
2- Escanear servicios
3- Conectarse a servicios
4- Enviar y recibir datos

81. WEB BLUETOOTH
Excelente para IoT
Se puede mezclar con Physical Web
Mejor con Bluetooth 5.0

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. <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. <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. <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

86. <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

87. <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

88. <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

89. <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

90. <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

91. <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

92. Heart Rate Sensor Demo

93. BB8 Controller

94. Drone controller

95. WEB BLUETOOTH
BETA

96. 4- Web APIs
- Device Sensor APIs:
maduras, experimentales, futuras
- Web Audio
- Web Bluetooth
- TV Streaming

97. 5- Los Mundos VR|MR
y la Web

98. Realidad Virtual (VR)
Realidad Mixta (MR)
nuevos mundos

99. VR y la Web
Samsung Internet Browser for Gear VR
Google Chrome
Oculus “Carmel” Browser
Third party browsers

100. Live demo

102. WebVR
Acceso a dispositivos VR (Oculus,
Cardboard, DayDream, Vive)
Soporte experimental
Disponible como polypill

103. WebVR
BETA DEV FLAGFUTURE

104. WebVR
DEVPOLYFILL POLYFILL FUTURE

105. MR y la Web
Mixed Reality con Windows Holographic
Hololens

106. Live demo

107. MR y la Web
Estamos en etapas muy tempranas
Necesitamos que le contenido salga de la
pantalla
WebVR llegará a Edge

108. - Estamos en etapas tempranas
- Necesitamos nuevas APIs y conceptos
- VR y MR mezclados con Web Bluetooth
5- VR|MR y la Web

109. la web salta al mundo físico
1- Mobile y IoT
2- La Web Física
3- Progressive Web Apps
4- Conexión con Web APIs
5- VR|MR y la Web

110. Foto de freefoto.com
firtman@gmail.com
@firt
firt.mobi/hpmwfirt.mobi/mh5