GoogleIO @ Java Meetup Ahmedabad
Build next generation apps with eyes and ears using Google Chrome
Treat your users as human!
lUX - 101
lTools should fit human not the other way around!
Now we have books on UX!
lWith computers, we lost 'human touch' in interaction
lTouch screens brought it back, but frankly...
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 differen...
Enter the new era!
lNow browsers can speak to you.
lAnd browsers can hear you too!
http://updates.html5rocks.com/2013/01/V...
Demo time!
https://www.google.com/intl/en/chrome/demos/speech.html
Do it yourself!
You talk too much...
lIt's time to listen..
lYes! That's all we need!
https://translate.google.co.in/#auto/hi/Welcome%20to...
Off-line mode too!
http://syl22-00.github.io/pocketsphinx.js/
This is how translation should work!
http://www.moreawesomeweb.com/demos/speech_translate.html
Command mode!
lI am married.... ammm.. Can I command my computer to do things?
https://www.talater.com/annyang/ https://gi...
But can you see me?
http://wolframhempel.github.io/photobooth-js/
Ok but how its useful?
http://revealjs.herokuapp.com/
Time to demo!, again.! :-)
https://github.com/willy-vvu/reveal.js
What was that?
lMagic of 'Motion detection algorithms'
lOver simplified How To:
Capture video [getUserMedia()]
Draw frames...
More!
lhttps://github.com/foo123/HAAR.js#live-examples
Interactive Face Detection
Many Faces Detection
Interactive Mouth D...
But Why chrome?
http://caniuse.com/#feat=web-speech
Its time to...
WebSpeech API fundametals
lAudio capture
lRequest authorization
lAudio processing pip line
Nodes (FFT , Gain, Filter...)
h...
GetUserMedia API fundamentals
lAudio + Video capture
lRequest authorization
lCapture
lDraw (Hidden)
lAnalyze + Process
lRe...
And finally...
लगता हैं बर्फ गगर रही हैं!
https://github.com/IonicaBizau/WebcamSnowhttp://ionicabizau.net/WebcamSnow/
Keep hacking!
http://topheman.github.io/parallax/
Thanks!
Upcoming SlideShare
Loading in …5
×

Apps with Ears And Eyes! Build next generation apps with eyes and ears using Google Chrome

871 views

Published on

Build next generation apps with eyes and ears using Google Chrome

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
871
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Apps with Ears And Eyes! Build next generation apps with eyes and ears using Google Chrome

  1. 1. GoogleIO @ Java Meetup Ahmedabad Build next generation apps with eyes and ears using Google Chrome
  2. 2. Treat your users as human! lUX - 101 lTools should fit human not the other way around!
  3. 3. 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'
  4. 4. 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?!
  5. 5. 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
  6. 6. Demo time! https://www.google.com/intl/en/chrome/demos/speech.html
  7. 7. Do it yourself!
  8. 8. 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
  9. 9. Off-line mode too! http://syl22-00.github.io/pocketsphinx.js/
  10. 10. This is how translation should work! http://www.moreawesomeweb.com/demos/speech_translate.html
  11. 11. Command mode! lI am married.... ammm.. Can I command my computer to do things? https://www.talater.com/annyang/ https://github.com/TalAter/annyang
  12. 12. But can you see me? http://wolframhempel.github.io/photobooth-js/
  13. 13. Ok but how its useful? http://revealjs.herokuapp.com/ Time to demo!, again.! :-) https://github.com/willy-vvu/reveal.js
  14. 14. 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
  15. 15. 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
  16. 16. But Why chrome? http://caniuse.com/#feat=web-speech
  17. 17. Its time to...
  18. 18. 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
  19. 19. GetUserMedia API fundamentals lAudio + Video capture lRequest authorization lCapture lDraw (Hidden) lAnalyze + Process lRe-Draw
  20. 20. And finally... लगता हैं बर्फ गगर रही हैं! https://github.com/IonicaBizau/WebcamSnowhttp://ionicabizau.net/WebcamSnow/
  21. 21. Keep hacking! http://topheman.github.io/parallax/ Thanks!

×