Fun with sensors and browser apis

Mandy Michael @mandymichael @mandy_kerr

Jello the little fluffy fellow @adognamedjello

Web Speech APIs

“ The Web Speech API enables you to incorporate voice data into web apps. ” @mandy_kerr

Demo

new SpeechRecognition(); //constructor for SpeechRecognition object instance

recognition.start(); // method to start speech recognition service recognition.stop(); !// stops the speech recognition service from listening to audio returns a result

recognition.onresult = function(event) {} // event handler when a word or phrase has been recognised

recognition.onspeechend = function(event) {} // will run when the speech recognition service has stopped being detected

@mandy_kerr

Demo - Marshmallow

Demo - Rello the good boy

Demo - Voice and Text

Andre Natal Speech & AI engineer Mozilla @andrenatalbr wiki.mozilla.org/Web_Speech_API_-_Speech_Recognition @mandy_kerr

How Speech works in Firefox

“ Audio & speech allow for more interactive and more accessible experiences. ” @mandy_kerr

Orientation Sensors

“ The accelerometer detects a change to the orientation of the device. ” @mandy_kerr

Demo: Orientation Woops

Demo: Orientation Moon

Demo

Demo

@mandy_kerr

“ We can move on from static, predetermined interactions and allow the user to shape the experience. ” @mandy_kerr

Ambient Light Sensor

“ A photodetector that is used to sense the amount of ambient light present. ” @mandy_kerr

Rijubrata Bhaumik Tech lead, Intel web platform @rijubrata @mandy_kerr

A second attempt at the ambient light sensor.

Addressing the security concerns of light sensors in the browser

Demo: Sun and Moon

Demo: Light it up

Demo: Bloom

Font: BloomGX by Typearture (Arthur Reinders Folmer)

“ Don’t be limited by what we can already do, the web is still young and there is so much for us to create. ” @mandy_kerr

Demo: Secret Message

Demo: A Grumpy Wizard

Demo: UFO Cat Abduction

@mandy_kerr @mandymichael developer.mozilla.org/docs/Web/API developer.mozilla.org/docs/Web/API/Sensor_APIs developer.mozilla.org/docs/Web/API/SpeechRecognition developer.mozilla.org/docs/Web/API/AmbientLightSensor developer.mozilla.org/docs/Web/API/DeviceOrientationEvent @mandy_kerr