93
abusing phones DomCode 14 November 2015 to make the internet of things @janjongboom

DomCode 2015 - Abusing phones to make the internet of things

Embed Size (px)

Citation preview

Page 1: DomCode 2015 - Abusing phones to make the internet of things

abusing phones

DomCode 14 November 2015

to make the internet of things

@janjongboom

Page 2: DomCode 2015 - Abusing phones to make the internet of things

abusing phones

DomCode 14 November 2015

to make the internet of things

@janjongboom

Page 3: DomCode 2015 - Abusing phones to make the internet of things
Page 4: DomCode 2015 - Abusing phones to make the internet of things

@janjongboom

Telenor R&D

Developer Evangelist IoT

Page 5: DomCode 2015 - Abusing phones to make the internet of things
Page 6: DomCode 2015 - Abusing phones to make the internet of things

Before mobile revolution…Limited input methods

Page 7: DomCode 2015 - Abusing phones to make the internet of things

Vibration sensor?

Page 8: DomCode 2015 - Abusing phones to make the internet of things

Accelerometer?

Page 9: DomCode 2015 - Abusing phones to make the internet of things

Accelerometer?

Page 10: DomCode 2015 - Abusing phones to make the internet of things

Proximity Accelerometer Ambient Light Magnetometer Gyroscope Humidity Ambient Temperature Pressure Battery Cameras

Page 11: DomCode 2015 - Abusing phones to make the internet of things

Bend sensor

Page 12: DomCode 2015 - Abusing phones to make the internet of things

Internet of Things

Page 13: DomCode 2015 - Abusing phones to make the internet of things

Moves IHR SleepCycle

Page 14: DomCode 2015 - Abusing phones to make the internet of things

BORING!

Page 15: DomCode 2015 - Abusing phones to make the internet of things
Page 16: DomCode 2015 - Abusing phones to make the internet of things
Page 17: DomCode 2015 - Abusing phones to make the internet of things
Page 18: DomCode 2015 - Abusing phones to make the internet of things

Device LightReal purpose: adjust brightness

Page 19: DomCode 2015 - Abusing phones to make the internet of things

MusicTheremin is instrument

Use device light as tone frequency

Wave your hands and magic!

Page 20: DomCode 2015 - Abusing phones to make the internet of things

MusicTheremin is instrument

Use device light as tone frequency

Wave your hands and magic!

Page 21: DomCode 2015 - Abusing phones to make the internet of things

1 var context = new AudioContext(); 2 var oscillator = context.createOscillator(); 3 oscillator.connect(context.destination); 4 oscillator.start(0); 5 6 window.addEventListener('devicelight', function(e) { 7 oscillator.frequency.value = e.value * 10; 8 });

Music

Page 22: DomCode 2015 - Abusing phones to make the internet of things

AccelerometerReal purpose: Turn to mute

Page 23: DomCode 2015 - Abusing phones to make the internet of things

Juggling visualizerMeasure z-forces on device

Plot it in graph over time

Juggle with multiple devices

Page 24: DomCode 2015 - Abusing phones to make the internet of things

Juggling visualizer

1 window.addEventListener('devicemotion', function(e) { 2 var serie = getGraphSerieForDevice(e.data.deviceId); 3 serie.addPoint([ e.data.timestamp, Math.abs(e.data.z) ]); 4 });

Page 25: DomCode 2015 - Abusing phones to make the internet of things

Weight scale

Page 26: DomCode 2015 - Abusing phones to make the internet of things

GyroscopeReal purpose: rotate screen

Page 27: DomCode 2015 - Abusing phones to make the internet of things

GyroscopeReal purpose: rotate screen

Page 28: DomCode 2015 - Abusing phones to make the internet of things

Movement AnalyzerRead raw gyro data

Feed into machine learning

Live classify movement

Page 29: DomCode 2015 - Abusing phones to make the internet of things

http://blog.telenor.io/2015/10/26/machine-learning.html

Page 30: DomCode 2015 - Abusing phones to make the internet of things

Computer generated

music

Page 31: DomCode 2015 - Abusing phones to make the internet of things
Page 32: DomCode 2015 - Abusing phones to make the internet of things

http://gibber.mat.ucsb.edu/

Page 33: DomCode 2015 - Abusing phones to make the internet of things

1 a = Drums('x*o*x*o-')

Gibber

Page 34: DomCode 2015 - Abusing phones to make the internet of things

1 a = Drums('x*o*x*o-')

Gibber

Page 35: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5

Page 36: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5

Page 37: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'], 6 [1/2, 1/2, 1/4, 1/4, 1/2] 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Page 38: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'], 6 [1/2, 1/2, 1/4, 1/4, 1/2] 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Page 39: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Page 40: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Page 41: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Page 42: DomCode 2015 - Abusing phones to make the internet of things

So much phones!

Page 43: DomCode 2015 - Abusing phones to make the internet of things
Page 44: DomCode 2015 - Abusing phones to make the internet of things

Gibber

Page 45: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = Phone.X

https://github.com/janjongboom/jsconf-us/blob/master/gibber/gibber-phone.js

Page 46: DomCode 2015 - Abusing phones to make the internet of things

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = Phone.X

https://github.com/janjongboom/jsconf-us/blob/master/gibber/gibber-phone.js

Page 47: DomCode 2015 - Abusing phones to make the internet of things

Getting data out of thereal world

Page 48: DomCode 2015 - Abusing phones to make the internet of things

Bluetooth beaconsBroadcasting their existence

Page 49: DomCode 2015 - Abusing phones to make the internet of things

Bluetooth beaconsLong battery life

Cheap URLs, sensor values, etc.

Page 50: DomCode 2015 - Abusing phones to make the internet of things

JavaScript baby monitorTag your baby with a phone

Get three beacons Some math

Page 51: DomCode 2015 - Abusing phones to make the internet of things

JavaScript baby monitorTag your baby with a phone

Get three beacons Some math

Page 52: DomCode 2015 - Abusing phones to make the internet of things
Page 53: DomCode 2015 - Abusing phones to make the internet of things
Page 54: DomCode 2015 - Abusing phones to make the internet of things
Page 55: DomCode 2015 - Abusing phones to make the internet of things
Page 56: DomCode 2015 - Abusing phones to make the internet of things
Page 57: DomCode 2015 - Abusing phones to make the internet of things
Page 58: DomCode 2015 - Abusing phones to make the internet of things
Page 59: DomCode 2015 - Abusing phones to make the internet of things
Page 60: DomCode 2015 - Abusing phones to make the internet of things
Page 61: DomCode 2015 - Abusing phones to make the internet of things
Page 62: DomCode 2015 - Abusing phones to make the internet of things
Page 63: DomCode 2015 - Abusing phones to make the internet of things

Coming to a web browser near youhttps://bugzilla.mozilla.org/show_bug.cgi?id=1063444

Page 64: DomCode 2015 - Abusing phones to make the internet of things

Coming to a web browser near youhttps://bugzilla.mozilla.org/show_bug.cgi?id=1063444

Page 65: DomCode 2015 - Abusing phones to make the internet of things

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

Page 66: DomCode 2015 - Abusing phones to make the internet of things

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

Page 67: DomCode 2015 - Abusing phones to make the internet of things

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

Page 68: DomCode 2015 - Abusing phones to make the internet of things

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

Page 69: DomCode 2015 - Abusing phones to make the internet of things

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

Page 70: DomCode 2015 - Abusing phones to make the internet of things

Physical WebWalk up and use anything

Page 71: DomCode 2015 - Abusing phones to make the internet of things

Physical Web beacon

Page 72: DomCode 2015 - Abusing phones to make the internet of things

Physical Web beacon

Page 73: DomCode 2015 - Abusing phones to make the internet of things

Physical Web beacon

http://goo.gl/a1b4cd

Page 74: DomCode 2015 - Abusing phones to make the internet of things

Physical Web beacon

http://goo.gl/a1b4cd

Page 75: DomCode 2015 - Abusing phones to make the internet of things
Page 76: DomCode 2015 - Abusing phones to make the internet of things

Everything got a URL

Page 77: DomCode 2015 - Abusing phones to make the internet of things

http://janjongboom.com

Page 78: DomCode 2015 - Abusing phones to make the internet of things

nRF51-DK

Page 79: DomCode 2015 - Abusing phones to make the internet of things
Page 80: DomCode 2015 - Abusing phones to make the internet of things

http://rollingspider.xyz/aa73bc21

Page 81: DomCode 2015 - Abusing phones to make the internet of things

Drone Web AppPhysical Web to discover

Web App gets reference to device Connect using WebBluetooth

Fly!

Page 82: DomCode 2015 - Abusing phones to make the internet of things

Drone Web AppPhysical Web to discover

Web App gets reference to device Connect using WebBluetooth

Fly!

Page 83: DomCode 2015 - Abusing phones to make the internet of things

10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });

Page 84: DomCode 2015 - Abusing phones to make the internet of things

10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });

Page 85: DomCode 2015 - Abusing phones to make the internet of things

10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });

Page 86: DomCode 2015 - Abusing phones to make the internet of things

10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });

Page 87: DomCode 2015 - Abusing phones to make the internet of things

-

Page 88: DomCode 2015 - Abusing phones to make the internet of things

-

Page 89: DomCode 2015 - Abusing phones to make the internet of things
Page 90: DomCode 2015 - Abusing phones to make the internet of things
Page 91: DomCode 2015 - Abusing phones to make the internet of things

-

Get hacking!

Page 92: DomCode 2015 - Abusing phones to make the internet of things

-

Get hacking!

Page 93: DomCode 2015 - Abusing phones to make the internet of things

Thank you!http://janjongboom.com

github.com/janjongboom/(jsconf-asia|jsconf-us)