Your SlideShare is downloading. ×
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action

1,423

Published on

Talk by Shwetank. …

Talk by Shwetank.
Using getUserMedia you can now access the camera and microphone using just plain old JavaScript! In this talk, we'll take a look at the various use cases for it and what all possibilities it opens up for web applications in the future.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,423
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mic, Camera, Action! Shwetank Dixit Opera Software
  • 2. about me Web Evangelist, Web Standards Team Member, W3C Mobile Web for Social Development Group Twitter: @shwetank Email: shwetankd@opera.com
  • 3. The web is awesome!
  • 4. but Native apps sometimes have an edge But that edge is getting smaller
  • 5. We’re adding more ways to get input from the user
  • 6. We’re making existing ways easier Like web forms
  • 7. We want to Stop Writing boring JS
  • 8. We want to Start Writing exciting JS
  • 9. Mic
  • 10. Mic DEMO
  • 11. Mic Web Audio API + getUserMedia
  • 12. getUserMedia if (navigator.getUserMedia){ navigator.getUserMedia({audio: true}, a_success, a_error); }
  • 13. getUserMedia Mic returns raw audio samples Cannot be played natively by the audio player Need Web Audio API to process it and then play it
  • 14. getUserMedia Create audio context and media stream source
  • 15. getUserMedia //Create audio context and media stream source var audioContext = new AudioContext(); // Prefix it for various browsers // Create an AudioNode from the stream. var mediaStreamSource = audioContext.createMediaStreamSource( stream );
  • 16. getUserMedia //Create audio context and media stream source var audioContext = new AudioContext(); // Prefix it for various browsers // Create an AudioNode from the stream. var mediaStreamSource = audioContext.createMediaStreamSource( stream ); // Connect audio loop to hear your own voice mediaStreamSource.connect(context.destination);
  • 17. Recorder.js Great library to help you record mic input using getusermedia
  • 18. Recorder.js buffers the raw audio samples. converts it to format which can be played by an <audio> control
  • 19. Camera
  • 20. Use camera with getusermedia var options = {audio: false, video: true};
  • 21. Use camera with getusermedia var options = {audio: false, video: true}; navigator.getUserMedia(options, v_success, v_error);
  • 22. Use camera with getusermedia // In the HTML var video = document.querySelector('video'); .... ..... // In the JS Code function v_success(stream){ video.src = window.URL.createObjectURL(stream) || stream; }
  • 23. Use camera + Video + Canvas for new tricks var button = document.querySelector('#button'); button.addEventListener('click',snapshot, false); ... ... function snapshot(){ var c = document.querySelector('canvas'); var ctx = c.getContext('2d'); var cw = c.clientWidth; var ch = c.clientHeight; ctx.drawImage(video_element, 0, 0, cw, ch); }
  • 24. Demo Notice you can click on a polaroid and save that image. You can create data URIs of canvases
  • 25. Manipulating the image from the webcam
  • 26. Once you get the snapshot of the webcam into canvas you can go crazy with it
  • 27. DEMO Warholiser
  • 28. Action!
  • 29. Tracking user actions Motion detection gesture recognition
  • 30. headtrackr.js https://github.com/auduno/headtrackr/
  • 31. headtrackr.js http://auduno.tumblr.com/post/25125149521/head-tracking-with- webrtc
  • 32. Face Detection X, Y position of face Width, Height of face relative to canvas headtrackr.js
  • 33. Demo
  • 34. Voice driven apps Voice modulation apps Native photo capture in web apps Live image manipulation and effects Video conferencing (using WebRTC) Accessibility enhancements to apps Possible use cases
  • 35. Cheers! More questions? Ask me now or contact me at: shwetankd@opera.com or on twitter - @shwetank

×