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
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
La Web Física (Physical Web) es una especificación abierta para permitir interacciones rápidas a objetos físicos y ubicaciones.
2- La Web Física
- Broadcast URL en lugares físicos - Estandar abierto - Cualquier cosa puede enviar una URL
Una Progressive Web App es un modelo para crear experiencias tipo app usando las últimas tecnologías web progresivamente
DEVICE SENSORS
1- Útiles en dispositivos mobile 2- Usa hardware y sensores 3- Diferentes Niveles
a- APIs Maduras b- APIs Experimentales c- APIs Futuras
a- APIs Maduras
Geolocation (GPS & WiFi) Accelerometer y Magnetometer Brújula Camera (imagen estática)
Get User MediaObtener el video stream video desde la cámara Reconocer objetos, caras, QR codes Realidad Auemntada
<code>
navigator.getUserMedia( {video:true,audio:true}, function(stream){ var videoSource = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } );
JAVASCRIPT
<code>
navigator.getUserMedia( {video:true,audio:true}, function(stream){ var source = URL.createObjectURL(stream); }, function(){ alert("Error getting video feed"); } );
JAVASCRIPT
Web Midi
Conectarse a dispositivos musicales: sintetizadores, teclados, guitarras, máquinas de sonidos, sistemas de iluminación
Enviar y recibir mensajes MIDI
<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
<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
<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
<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
<code>
window.addEventListener('devicelight', function(event) { var lux = event.value; });
JAVASCRIPT
<code>
window.addEventListener('devicelight', function(event) { var lux = event.value; });
JAVASCRIPT
Speech Synthesis y RecognitionNos permite interactuar con el usuario con la voz
Synthesis: permite que la Web hable Recognition: permite que la Web escuche
<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
<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
<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
<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
<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
<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
<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
<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
Geofencing
Podemos hacer que una web o una PWA se active cuando un usuario entra o sale una zona geográfica
WEB AUDIO
1- Generar audio dinámico 2- Escuchar audio bajo nivel 3- Se puede usar para comunicación por ultrasonido entre dispositivos!
<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
<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
<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
<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
<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
WEB BLUETOOTH
1- Escanear dispositivos 2- Escanear servicios 3- Conectarse a servicios 4- Enviar y recibir datos
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
4- Web APIs
- Device Sensor APIs: maduras, experimentales, futuras - Web Audio - Web Bluetooth - TV Streaming
VR y la Web
Samsung Internet Browser for Gear VR Google Chrome Oculus “Carmel” Browser Third party browsers
WebVR
Acceso a dispositivos VR (Oculus, Cardboard, DayDream, Vive)
Soporte experimental Disponible como polypill
MR y la Web
Estamos en etapas muy tempranas Necesitamos que le contenido salga de la pantalla WebVR llegará a Edge
- Estamos en etapas tempranas - Necesitamos nuevas APIs y conceptos - VR y MR mezclados con Web Bluetooth
5- VR|MR y la Web
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
Top Related