next generation apps with google chrome-by dhruv gohil
DESCRIPTION
Next generation applications with eyes and voice control.Originally presented by Dhruv Gohil.TRANSCRIPT
![Page 1: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/1.jpg)
GoogleIO @ Java Meetup Ahmedabad
Build next generation apps with eyes and ears using Google Chrome
![Page 2: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/2.jpg)
Treat your users as human!
lUX - 101
lTools should fit human not the other way around!
![Page 3: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/3.jpg)
Now we have books on UX!
lWith computers, we lost 'human touch' in interaction
lTouch screens brought it back, but frankly its not the natural way to do 'things'
![Page 4: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/4.jpg)
Let's get back to basics..
lI have to tell you something.. I will speak and you will listen.
lSo why it has to be different for computers?!
![Page 5: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/5.jpg)
Enter the new era!
lNow browsers can speak to you.
lAnd browsers can hear you too!
http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API
![Page 6: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/6.jpg)
Demo time!
https://www.google.com/intl/en/chrome/demos/speech.html
![Page 7: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/7.jpg)
Do it yourself!
![Page 8: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/8.jpg)
You talk too much...
lIt's time to listen..
lYes! That's all we need!
https://translate.google.co.in/#auto/hi/Welcome%20to%20Ishi%20Systems
![Page 9: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/9.jpg)
Off-line mode too!
http://syl22-00.github.io/pocketsphinx.js/
![Page 10: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/10.jpg)
This is how translation should work!
http://www.moreawesomeweb.com/demos/speech_translate.html
![Page 11: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/11.jpg)
Command mode!
lI am married.... ammm.. Can I command my computer to do things?
https://www.talater.com/annyang/ https://github.com/TalAter/annyang
![Page 12: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/12.jpg)
But can you see me?
http://wolframhempel.github.io/photobooth-js/
![Page 13: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/13.jpg)
Ok but how its useful?
http://revealjs.herokuapp.com/
Time to demo!, again.! :-)
https://github.com/willy-vvu/reveal.js
![Page 14: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/14.jpg)
What was that?
lMagic of 'Motion detection algorithms'
lOver simplified How To:
Capture video [getUserMedia()]
Draw frames [ html5 <canvas> ]
Run Algorithm to detect change between frames [ .js]
lIf you are deeply interested
Read : http://labs.littlemissrobot.com/behind-the-mirror/
http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html
![Page 15: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/15.jpg)
More!
lhttps://github.com/foo123/HAAR.js#live-examples
Interactive Face Detection
Many Faces Detection
Interactive Mouth Detection
l
lhttp://www.soundstep.com/blog/experiments/jstracking/
Motion tracking
lhttp://www.soundstep.com/blog/experiments/jsdetection/
The Magical Xylophone
![Page 17: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/17.jpg)
Its time to...
![Page 18: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/18.jpg)
WebSpeech API fundametals
lAudio capture
lRequest authorization
lAudio processing pip line
Nodes (FFT , Gain, Filter...)
http://chimera.labs.oreilly.com/books/1234000001552/
lJoin to destination (Speakers)
l+ Visualizations
![Page 19: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/19.jpg)
GetUserMedia API fundamentals
lAudio + Video capture
lRequest authorization
lCapture
lDraw (Hidden)
lAnalyze + Process
lRe-Draw
![Page 20: Next Generation Apps with Google Chrome-By Dhruv Gohil](https://reader034.vdocuments.us/reader034/viewer/2022052301/559e21651a28ab253c8b4739/html5/thumbnails/20.jpg)
And finally...
लगता हैं बर्फ गगर रही हैं!
https://github.com/IonicaBizau/WebcamSnowhttp://ionicabizau.net/WebcamSnow/