• Save
Media capture in mobile browsers
Upcoming SlideShare
Loading in...5
×
 

Media capture in mobile browsers

on

  • 1,624 views

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 ...

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/

Statistics

Views

Total Views
1,624
Views on SlideShare
1,611
Embed Views
13

Actions

Likes
1
Downloads
2
Comments
1

3 Embeds 13

https://twitter.com 5
http://lanyrd.com 5
http://www.linkedin.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Links to code examples doesn't look to work properly if clicked on the slides. Here are the right links (please copy and paste :)
    HTML Media Capture: goo.gl/kUvdn6
    CSS trick on HTML Media Capture: goo.gl/NzbwQm
    getUserMedia: goo.gl/n9VzzO
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Media capture in mobile browsers Media capture in mobile browsers Presentation Transcript

  • HTML5 CodeShow Roma #4 MEDIA CAPTURE in mobile browsers Francesco Iovine @franciov
  • www.francesco.iovine.name f.iovine@gmail.com @franciov
  • Device APIs
  • Device APIs Device Orientation Proximity Geolocation Ambient Network Information Contacts Battery Calendar Vibration ... Media Capture Media Recording
  • MEDIA CAPTURE
  • HTML Media Capture
  • HTML Media Capture
  • HTML Media Capture W3C Candidate Recommendation 9 May 2013 W3C Working Draft 12 July 2012 http://www.w3.org/TR/html-media-capture/
  • http://goo.gl/kUvdn6
  • HTML Media Capture W3C Candidate Recommendation <input type="file" accept="image/*" capture> <input type="file" accept="audio/*" capture> <input type="file" accept="video/*" capture>
  • 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">
  • HTML Media Capture W3C Candidate Recommendation W3C Working Draft 12 July 2012 Only accept hinting, as per HTML5 File Input 12
  • Native forms
  • http://goo.gl/NzbwQm
  • Styled forms
  • Media Capture and Streams W3C Working Draft 3 September 2013 W3C Editor’s Draft 17 October 2013 http://www.w3.org/TR/mediacapture-streams/
  • http://goo.gl/n9VzzO
  • Media Capture and Streams navigator.getUserMedia( { audio: true, video: true }, successCallback, errorCallback );
  • Media Capture and Streams Let users choose which camera to use (back-facing or front-facing)
  • 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
  • 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/
  • 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();
  • Mediastream Image Capture
  • Device APIs Device Orientation Proximity Geolocation Ambient Network Information Contacts Battery Calendar Vibration ... Media Capture Media Recording
  • References
  • www.w3.org/2009/dap/ www.w3.org/2009/dap/wiki/ImplementationStatus
  • docs.webplatform.org/wiki/html/attributes/capture docs.webplatform.org/wiki/apis/media_capture_and_streams docs.webplatform.org/wiki/apis/image_capture/ImageCapture
  • dev.opera.com/articles/view/media-capture-in-mobile-browsers
  • mobilehtml5.org
  • github.com/franciov/device-apis (...coming soon...)
  • Thanks!
  • www.francesco.iovine.name Credits: Cinzia Querques f.iovine@gmail.com Chris Mills @franciov Andreas Bovens Maximiliano Fick
  • 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