Hardware Access via JavaScript

Hardware access via web browsers is becoming integral of web technologies. Web technology platforms are used more to develop apps that live outside of the web. Faster browser release cycles has to helped bring hardware access to web browsers.

Portable devices now come with cameras, microphones, gyroscopes, GPS, light sensors and of course, the touch screen. Apps developed for the device have access to the device hardware.

But that hasn’t stopped the people creating web technologies to move forward to have access to the hardware. Now we can access hardware using JavaScript, HTML and CSS(somewhat)!

Below I will go over on some of the API’s that have access to your hardware.

GeoLocation

GeoLocation will read your location and return position coordinates, its longitude and latitude.

1
2
3
4
5
6
7
8
9
10
11

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

navigator.geolocation
navigator.geolocation.getCurrentPosition(success, error, options)
var latitude  = position.coords.latitude;
var longitude = position.coords.longitude;

id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);

Detect Device Orientation

The device orientation returns the values collected by the Gyroscope.

(orientation-1.js) download
1
2
3
4
5

// baseline example
// listen to events in deviceorientation
window.addEventListener('deviceorientation', function(event) {
  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});
(orientation-2.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// More useful example
if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function( event ) {
  //alpha: rotation around z-axis
  var rotateDegrees = event.alpha;
  //gamma: left to right
  var leftToRight = event.gamma;
  //beta: front back motion
  var frontToBack = event.beta;

  handleOrientationEvent( frontToBack, leftToRight, rotateDegrees );
    }, false);
}

var handleOrientationEvent = function( frontToBack, leftToRight, rotateDegrees ){
    //do something amazing
};

To explain:

  • alpha – rotation of z-axis – how far the device is rotated around a line perpendicular to the device.
  • beta – rotation of x-axis – how far the device has tipped forward to backward
  • gamma – rotation of y-axis – how far the device has tipped left or right

Read More:

deviceOrientation (Mozilla)

Camera or Microphone Access

getUserMedia prompts the user for access to the media device.

1

navigator.getUserMedia(constraints, successCallback, errorCallback);
(getUserMedia.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

navigator.getUserMedia(
  // constraints
  {
    video: true,
    audio: true
  },
  //successCallback
  function(localMediaStream) {
    // select the 'video' object on the DOM
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadedmetadata = function(e) {
      // let the video magic begin
    }
  },
  // error!
  function(err) {
    console.log("Oh noes, there was the following error:" + err);
  }
);

Read More

Battery API

The Battery API provides information about the systems battery. This can be used to measure the battery usage that your app is using. This can be used to manage your apps resources, what to trigger and what not.

(battery-api.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13

var battery = navigator.battery;

var updateBatteryStatus = function() {
  console.log("Battery status: " + battery.level *100 + " %");

  if(battery.charging) {
    console.log("Battery is charging.");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();

Read More:

BatteryManager

Vibrate

The method pulses the vibration hardware on the device. You can send a pattern for the vibration you want to trigger. The pattern alternates from the duration of the vibration and the pause.

1
2

// heartbeat pattern (short vibration (100), short pause(20), longer pause(500))
window.navigator.vibrate(100,20,100,500);

A fun way to implement it, is by synching it to transitions and animations on screen.

Read More:

Navigator.vibrate()

Ambient Light

Ambient light provides information from the phot sensors about the light levels near the device.

1
2
3

window.addEventListener('devicelight', function(event) {
  console.log(event.value);
});

A creative approach to the Ambient light, is to have a story adjust the mood depending on the amount of light in the room.

Touch Events

Touch Events are easy to overlook as hardware access since touch is the way we input on portable devices. Multi touch and gestures are exclusive input events to touch screens.

I’m not going expand here about touch devices, but you can read more about it: * W3 * Mozilla: Touch Events * hammer.js – JavaScript library with various touch events.

FileReader

A brief mention is being able to read the files on the device. Coremob Camera is an attempt to build a camera using web technologies.

More Reading