Device APIs: what is already, and what is not yet

1,247 views
1,103 views

Published on

One of the main weaknesses of mobile web apps is that mobile browsers can access a limited amount of the device’s native features and information (orientation and geolocation for example). In this talk I will tell you how the W3C and browser vendors are working to let mobile web apps access all of the device’s native features, such as camera, microphone, address book, calendar or system information, such as network connection and battery level, through a set of so-called Device APIs. I will also show you some javascript code and the compatibility across mobile browsers.

Mobile Tea #7: http://www.meetup.com/codeinvaders/events/145385632/

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

No Downloads
Views
Total views
1,247
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Device APIs: what is already, and what is not yet

  1. 1. Mobile Tea #7 DEVICE APIs what is already and what is not yet Francesco Iovine @franciov 8 Nov 2013
  2. 2. I live in Rome ...
  3. 3. ... with my girlfriend
  4. 4. This was my first presentation ...
  5. 5. ... and this my first mobile device
  6. 6. I like attending tech conferences across Europe ...
  7. 7. ... and playing table football
  8. 8. Device APIs Resource status Sensors User information Device actions
  9. 9. Device APIs Resource status Sensors User information Device actions
  10. 10. NETWORK
  11. 11. Network Information API W3C Working Draft 29 November 2012 W3C Working Draft 7 June 2011 http://www.w3.org/TR/netinfo-api/
  12. 12. Network Information API W3C Working Draft 29 November 2012 navigator.connection.bandwidth navigator.connection.metered // MB/s // true | false navigator.connection.onchange = function() { // navigator.connection.bandwidth };
  13. 13. Network Information API W3C Working Draft 7 June 2011 navigator.connection.type // unknown, ethernet, wifi, 2g, 3g, 4g, none
  14. 14. Network Information API W3C Working Draft 29 November 2012 W3C Working Draft 7 June 2011 navigator.connection.type
  15. 15. BATTERY
  16. 16. Battery Status API W3C Candidate Recommendation 8 May 2012 http://www.w3.org/TR/battery-status/
  17. 17. Battery Status API navigator.battery.charging // true or false navigator.battery.level // from 0 to 1.0 navigator.battery.chargingTime // seconds navigator.battery.dischargingTime // seconds navigator.battery.onchargingchange navigator.battery.onlevelchange navigator.battery.ondischargingtimechange
  18. 18. Battery Status API
  19. 19. Device APIs Resource status Sensors User information Device actions
  20. 20. TOUCH
  21. 21. Touch Events W3C Recommendation 10 October 2013 http://www.w3.org/TR/touch-events/
  22. 22. Touch Events touchstart touchmove touchend touchcancel
  23. 23. Touch Events mini
  24. 24. MOTION
  25. 25. DeviceOrientation Events W3C Working Draft 1 December 2011 http://www.w3.org/TR/orientation-event/
  26. 26. DeviceOrientation Events window.onorientationchange window.ondeviceorientation window.ondevicemotion window.oncompassneedscalibration
  27. 27. DeviceOrientation Events 12
  28. 28. GPS
  29. 29. Geolocation API W3C Recommendation 24 October 2013 http://www.w3.org/TR/geolocation-API/
  30. 30. Geolocation API navigator.geolocation.getCurrentPosition(showMap) function showMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // ... }
  31. 31. Geolocation API mini
  32. 32. MEDIA CAPTURE
  33. 33. HTML Media Capture W3C Candidate Recommendation 9 May 2013 W3C Working Draft 12 July 2012 http://www.w3.org/TR/html-media-capture/
  34. 34. HTML Media Capture W3C Candidate Recommendation 9 May 2013 <input type="file" accept="image/*" capture> <input type="file" accept="audio/*" capture> <input type="file" accept="video/*" capture>
  35. 35. 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">
  36. 36. HTML Media Capture W3C Candidate Recommendation W3C Working Draft 12 July 2012 Only accept hinting, as per HTML5 File Input 12
  37. 37. Media Capture and Streams W3C Working Draft 3 September 2013 W3C Editor’s Draft 17 October 2013 http://www.w3.org/TR/mediacapture-streams/
  38. 38. Media Capture and Streams navigator.getUserMedia( { audio: true, video: true }, successCallback, errorCallback );
  39. 39. 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
  40. 40. Mediastream Image Capture W3C First Public Working Draft 09 July 2013 http://www.w3.org/TR/image-capture/
  41. 41. Mediastream Image Capture var pictureDevice = new ImageCapture(videoDevice); pictureDevice.setOptions(photoSettings); pictureDevice.onphotosettingschange = ... pictureDevice.onframegrab = ... pictureDevice.getFrame(); pictureDevice.onphoto = ... pictureDevice.onphotoerror = ... pictureDevice.takePhoto();
  42. 42. Mediastream Image Capture
  43. 43. MEDIA RECORDING
  44. 44. Mediastream Recording W3C Working Draft 5 February 2013 http://www.w3.org/TR/mediastream-recording/
  45. 45. Mediastream Recording W3C Working Draft 5 February 2013 var mediaRecorder = new MediaRecorder(mediaStream); mediaRecorder.ondataavailable = function() { mediaRecorder.start(); }
  46. 46. Mediastream Recording Firefox Nightly
  47. 47. PROXIMITY
  48. 48. Proximity Events W3C Candidate Recommendation 1 October 2013 http://www.w3.org/TR/proximity/
  49. 49. Proximity Events window.ondeviceproximity event.value // current event.max // maximum event.min // minimum }); = function(event) { device proximity (cm) sensing distance (cm) sensing distance (cm) window.onuserproximity = function(event) { event.near // boolean, user-agent- and platform-specific approximation of the closeness of a physical object with the hosting device });
  50. 50. Proximity Events
  51. 51. AMBIENT
  52. 52. Ambient Light Events W3C Candidate Recommendation 1 October 2013 http://www.w3.org/TR/ambient-light/
  53. 53. Ambient Light Events window.ondevicelight = function(event) { event.value // lux units }); window.onlightlevel = function(event) { event.value }); // “dim”, “normal” or “bright”
  54. 54. Ambient Light Events
  55. 55. Exploratory work Ambient Temperature - Unofficial Draft https://dvcs.w3.org/hg/dap/raw-file/default/temperature/Overview.html Ambient Humidity - Unofficial Draft https://dvcs.w3.org/hg/dap/raw-file/default/humidity/Overview.html Atmosferic Pressure - Unofficial Draft https://dvcs.w3.org/hg/dap/raw-file/default/pressure/Overview.html
  56. 56. Ambient Temperature window.ontemperature = function(event) { event.f event.c event.k }); // farenheith // celsius // kelvin
  57. 57. Ambient Humidity window.onhumidity = function(event) { event.value }); // value between 0 and 1
  58. 58. Ambient Pressure window.onatmpressure = function(event) { event.value }); // millibar
  59. 59. Device APIs Resource status Sensors User information Device actions
  60. 60. CONTACTS
  61. 61. Pick Contacts Intent W3C Working Draft 12 July 2012 http://www.w3.org/TR/contacts-api/ SHELVED, waiting for a better overall approach to emerge
  62. 62. CALENDAR
  63. 63. Calendar API W3C Working Draft 19 April 2011 http://www.w3.org/TR/calendar-api/ SHELVED, waiting for a better overall approach to emerge
  64. 64. Device APIs Resource status Sensors User information Device actions
  65. 65. VIBRATION
  66. 66. Vibration API W3C Candidate Recommendation 23 July 2013 http://www.w3.org/TR/html-media-capture/
  67. 67. Vibration API navigator.vibrate(1000); // or alternatively navigator.vibrate([1000]); navigator.vibrate([50, 100, 150]); navigator.vibrate(0); // or alternatively navigator.vibrate([]);
  68. 68. Vibration API 12
  69. 69. Device APIs Resource status Sensors User information Device actions
  70. 70. Device APIs Network Media Recording Battery Proximity Touch Ambient Motion Contacts GPS Calendar Media Capture Vibration
  71. 71. References
  72. 72. www.w3.org/2009/dap/ www.w3.org/2009/dap/wiki/ImplementationStatus
  73. 73. http://docs.webplatform.org/wiki/apis/
  74. 74. mobilehtml5.org
  75. 75. dev.opera.com/articles/view/media-capture-in-mobile-browsers (...stay tuned...)
  76. 76. github.com/franciov/device-apis (...coming soon...)
  77. 77. Thanks :)
  78. 78. www.francesco.iovine.name Credits: Cinzia Querques f.iovine@gmail.com Chris Mills @franciov Andreas Bovens
  79. 79. Photos http://instagram.com/ar_krayon http://www.flickr.com/photos/kevandotorg/5837174879 http://www.flickr.com/photos/htakashi/9754012931 http://www.flickr.com/photos/linkey/3400532620 http://www.flickr.com/photos/26733538@N08/3029266745 http://www.flickr.com/photos/petereed/3256701422 http://www.flickr.com/photos/ederfortunato/7998206930 http://www.flickr.com/photos/mattimattila/3299901660 http://www.flickr.com/photos/shuttercat7/418349082 http://www.flickr.com/photos/pagedooley/7899921242 http://www.flickr.com/photos/andreanix/2577986521 http://www.flickr.com/photos/oschene/8334277572 http://www.flickr.com/photos/vividbreeze/480057824

×