Media capture in mobile browsers

2,603 views
2,274 views

Published on

In my live coding session I'm going to show you how to use the Media Capture APIs, their compatibility across mobile browsers and the current state of the W3C specifications that define them. Bring your devices for testing!

HTML5 CodeShow Roma #4: http://www.meetup.com/HTML5-CodeShow-Roma/events/143439472/

Published in: Technology, Art & Photos
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,603
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
2
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Media capture in mobile browsers

  1. 1. HTML5 CodeShow Roma #4 MEDIA CAPTURE in mobile browsers Francesco Iovine @franciov
  2. 2. www.francesco.iovine.name f.iovine@gmail.com @franciov
  3. 3. Device APIs
  4. 4. Device APIs Device Orientation Proximity Geolocation Ambient Network Information Contacts Battery Calendar Vibration ... Media Capture Media Recording
  5. 5. MEDIA CAPTURE
  6. 6. HTML Media Capture
  7. 7. HTML Media Capture
  8. 8. HTML Media Capture W3C Candidate Recommendation 9 May 2013 W3C Working Draft 12 July 2012 http://www.w3.org/TR/html-media-capture/
  9. 9. http://goo.gl/kUvdn6
  10. 10. HTML Media Capture W3C Candidate Recommendation <input type="file" accept="image/*" capture> <input type="file" accept="audio/*" capture> <input type="file" accept="video/*" capture>
  11. 11. HTML Media Capture W3C Working draft 12 July 2012 <input type="file" accept="image/*" capture="camera"> <input type="file" accept="audio/*" capture="microphone"> <input type="file" accept="video/*" capture="camcorder">
  12. 12. HTML Media Capture W3C Candidate Recommendation W3C Working Draft 12 July 2012 Only accept hinting, as per HTML5 File Input 12
  13. 13. Native forms
  14. 14. http://goo.gl/NzbwQm
  15. 15. Styled forms
  16. 16. Media Capture and Streams W3C Working Draft 3 September 2013 W3C Editor’s Draft 17 October 2013 http://www.w3.org/TR/mediacapture-streams/
  17. 17. http://goo.gl/n9VzzO
  18. 18. Media Capture and Streams navigator.getUserMedia( { audio: true, video: true }, successCallback, errorCallback );
  19. 19. Media Capture and Streams Let users choose which camera to use (back-facing or front-facing)
  20. 20. Media Capture and Streams Let users choose which camera to use (back-facing or front-facing) Front-facing camera as default Opera Classic 12 only 12
  21. 21. Mediastream Image Capture W3C First Public Working Draft 09 July 2013 W3C Editor’s Draft 21 October 2013 http://www.w3.org/TR/image-capture/
  22. 22. Mediastream Image Capture var pictureDevice = new ImageCapture(videoDevice); pictureDevice.setOptions(photoSettings); pictureDevice.onphotosettingschange = doSomething; pictureDevice.onframegrab = applyFilter; pictureDevice.getFrame(); pictureDevice.onphoto = showImage; pictureDevice.onphotoerror = photoError; pictureDevice.takePhoto();
  23. 23. Mediastream Image Capture
  24. 24. Device APIs Device Orientation Proximity Geolocation Ambient Network Information Contacts Battery Calendar Vibration ... Media Capture Media Recording
  25. 25. References
  26. 26. www.w3.org/2009/dap/ www.w3.org/2009/dap/wiki/ImplementationStatus
  27. 27. docs.webplatform.org/wiki/html/attributes/capture docs.webplatform.org/wiki/apis/media_capture_and_streams docs.webplatform.org/wiki/apis/image_capture/ImageCapture
  28. 28. dev.opera.com/articles/view/media-capture-in-mobile-browsers
  29. 29. mobilehtml5.org
  30. 30. github.com/franciov/device-apis (...coming soon...)
  31. 31. Thanks!
  32. 32. www.francesco.iovine.name Credits: Cinzia Querques f.iovine@gmail.com Chris Mills @franciov Andreas Bovens Maximiliano Fick
  33. 33. Photos http://www.flickr.com/photos/ederfortunato/7998206930 http://www.flickr.com/photos/vox_efx/2386482660 http://www.flickr.com/photos/thomashawk/2864703113 http://www.flickr.com/photos/question_everything/2855113823

×