Mobile web development – Device sensors

Mobile web development – Device sensors

Device Sensors

The mobile typically has far more sensors than a desktop or a laptop – camera for stills & video, GPS, audio input & output, compass & accelerometer making it a very powerful device.

Camera – can be used not only to capture an image or video, but for e.g a profile photo, a QR code link to transfer a business card or a map.

The following screen provides a simple way to capture input from the camera or the audio on a mobile – use the ‘capture’ extension on the ‘accept’ attribute.

Capture input from camera / audio

This gives a button which will open up the camera or the audio on the mobile.

There are some issues though with this approach

  • this does not work on desktop, where u can only upload files saved on the local drive.
  • It is hard to style the button.
  • If the button leads to a different app, it can break the flow.

It is also possible to get live audio / video input directly into our app by using the ‘getUserMedia’.

To make a choice between using the front camera vs the rear camera, use the MediaStreamTrack.getSources API.

front or rear camera?

One of the early challenges of using these sensors on the mobile web was the distracting security dialogs which keep popping up to take confirmation from the user that he wishes to use the sensor. One of the methods to limit such pop ups is to use the https: instead of http: – this typically limits the dialog box to popping up only once post which the browser remembers the permission.

While we talked of the camera above, the audio input is also a powerful feature. One thing to note is that the mobile web blocks audio from playing automatically and needs a user input.

GPS is another key feature of mobile. While GPS is widely used for navigation, there are other uses too. For e.g

  • A business can use the geo-location to quickly bring up location relevant information to the user like nearest store location and its opening hours.
  • Maps
  • Augmented reality
  • Geocaching
  • Nearby features.

Mobile devices also often have an accelerometer that tells the device which way it is tilted as also a compass which helps determine its direction. There are two APIs for these

  • Device orientation – for tilt and direction
  • Device motion – for motion and acceleration.

These typically find use in gaming scenarios like for a joystick or a game controller or when you want to send feedback from a ‘shake’.

Making use of all these sensors should be however, done after careful thinking. For e.g the GPS sensor is very power hungry and will quickly deplete the user’s battery.

Do read the other related posts which cover the notes for the other chapters of this course.

ps: to find all posts related to this post, searching for ‘mobile web development’ should help.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.