Your SlideShare is downloading. ×
0
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
Device APIs: what is already, and what is not yet
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

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

906

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 …

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
906
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
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. Mobile Tea #7 DEVICE APIs what is already and what is not yet Francesco Iovine @franciov 8 Nov 2013
  • 2. I live in Rome ...
  • 3. ... with my girlfriend
  • 4. This was my first presentation ...
  • 5. ... and this my first mobile device
  • 6. I like attending tech conferences across Europe ...
  • 7. ... and playing table football
  • 8. Device APIs Resource status Sensors User information Device actions
  • 9. Device APIs Resource status Sensors User information Device actions
  • 10. NETWORK
  • 11. Network Information API W3C Working Draft 29 November 2012 W3C Working Draft 7 June 2011 http://www.w3.org/TR/netinfo-api/
  • 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. Network Information API W3C Working Draft 7 June 2011 navigator.connection.type // unknown, ethernet, wifi, 2g, 3g, 4g, none
  • 14. Network Information API W3C Working Draft 29 November 2012 W3C Working Draft 7 June 2011 navigator.connection.type
  • 15. BATTERY
  • 16. Battery Status API W3C Candidate Recommendation 8 May 2012 http://www.w3.org/TR/battery-status/
  • 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. Battery Status API
  • 19. Device APIs Resource status Sensors User information Device actions
  • 20. TOUCH
  • 21. Touch Events W3C Recommendation 10 October 2013 http://www.w3.org/TR/touch-events/
  • 22. Touch Events touchstart touchmove touchend touchcancel
  • 23. Touch Events mini
  • 24. MOTION
  • 25. DeviceOrientation Events W3C Working Draft 1 December 2011 http://www.w3.org/TR/orientation-event/
  • 26. DeviceOrientation Events window.onorientationchange window.ondeviceorientation window.ondevicemotion window.oncompassneedscalibration
  • 27. DeviceOrientation Events 12
  • 28. GPS
  • 29. Geolocation API W3C Recommendation 24 October 2013 http://www.w3.org/TR/geolocation-API/
  • 30. Geolocation API navigator.geolocation.getCurrentPosition(showMap) function showMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // ... }
  • 31. Geolocation API mini
  • 32. MEDIA CAPTURE
  • 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. 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. 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. HTML Media Capture W3C Candidate Recommendation W3C Working Draft 12 July 2012 Only accept hinting, as per HTML5 File Input 12
  • 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. Media Capture and Streams navigator.getUserMedia( { audio: true, video: true }, successCallback, errorCallback );
  • 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. Mediastream Image Capture W3C First Public Working Draft 09 July 2013 http://www.w3.org/TR/image-capture/
  • 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. Mediastream Image Capture
  • 43. MEDIA RECORDING
  • 44. Mediastream Recording W3C Working Draft 5 February 2013 http://www.w3.org/TR/mediastream-recording/
  • 45. Mediastream Recording W3C Working Draft 5 February 2013 var mediaRecorder = new MediaRecorder(mediaStream); mediaRecorder.ondataavailable = function() { mediaRecorder.start(); }
  • 46. Mediastream Recording Firefox Nightly
  • 47. PROXIMITY
  • 48. Proximity Events W3C Candidate Recommendation 1 October 2013 http://www.w3.org/TR/proximity/
  • 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. Proximity Events
  • 51. AMBIENT
  • 52. Ambient Light Events W3C Candidate Recommendation 1 October 2013 http://www.w3.org/TR/ambient-light/
  • 53. Ambient Light Events window.ondevicelight = function(event) { event.value // lux units }); window.onlightlevel = function(event) { event.value }); // “dim”, “normal” or “bright”
  • 54. Ambient Light Events
  • 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. Ambient Temperature window.ontemperature = function(event) { event.f event.c event.k }); // farenheith // celsius // kelvin
  • 57. Ambient Humidity window.onhumidity = function(event) { event.value }); // value between 0 and 1
  • 58. Ambient Pressure window.onatmpressure = function(event) { event.value }); // millibar
  • 59. Device APIs Resource status Sensors User information Device actions
  • 60. CONTACTS
  • 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. CALENDAR
  • 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. Device APIs Resource status Sensors User information Device actions
  • 65. VIBRATION
  • 66. Vibration API W3C Candidate Recommendation 23 July 2013 http://www.w3.org/TR/html-media-capture/
  • 67. Vibration API navigator.vibrate(1000); // or alternatively navigator.vibrate([1000]); navigator.vibrate([50, 100, 150]); navigator.vibrate(0); // or alternatively navigator.vibrate([]);
  • 68. Vibration API 12
  • 69. Device APIs Resource status Sensors User information Device actions
  • 70. Device APIs Network Media Recording Battery Proximity Touch Ambient Motion Contacts GPS Calendar Media Capture Vibration
  • 71. References
  • 72. www.w3.org/2009/dap/ www.w3.org/2009/dap/wiki/ImplementationStatus
  • 73. http://docs.webplatform.org/wiki/apis/
  • 74. mobilehtml5.org
  • 75. dev.opera.com/articles/view/media-capture-in-mobile-browsers (...stay tuned...)
  • 76. github.com/franciov/device-apis (...coming soon...)
  • 77. Thanks :)
  • 78. www.francesco.iovine.name Credits: Cinzia Querques f.iovine@gmail.com Chris Mills @franciov Andreas Bovens
  • 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

×