LearnExploring the JavaScript Device APIs

   
Avatar

Matt West
writes on March 19, 2014

Photograph by Jeremy Keith (adactio)

The mobile revolution has completely changed how people access the web. It’s only natural then that the web should evolve to better suit the plethora of devices on which it’s now accessed.

When the web was first created 25 years ago, it was the child of the “workstation” computer. Over those 25 years, we’ve seen the web proliferate to desktop PCs, laptops, mobile phones, tablets, and now even fashion accessories like watches. There’s no questioning that the web is here to stay. But what will the future look like?

In this blog post, I want to take you on a journey through some of the JavaScript device APIs that are extending the functionality of the web to better match the capabilities of modern devices.


Note: Some of the technologies you’ll learn about in this post are already implemented in browsers, but others are not. I’ve included examples of how to use each of the APIs, and done my best to provide up-to-date browser support information.


Geolocation

The Geolocation API allows you to pinpoint the user’s location using the positioning capabilities of their device. Most of the time this will be done using GPS, but less accurate methods, such as WiFi-based positioning, may also be used.

// Get the location.
navigator.geolocation.getCurrentPosition(function(position) {
    // Get the positioning coordinates.
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    // Do something interesting...
});

W3C Specification Learn about the Geolocation API

Specification Status: W3C Recommendation

Browser Support For The Geolocation API

The geolocation specification has been around for quite a while now. All modern web browsers include support for the API (including on mobile).

IE Firefox Chrome Safari Opera
9+ 3.5+ 4.0+ 5.0+ 10.6+
Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
2.1 7 33 26 10 3.2 11

Source: http://caniuse.com/#feat=geolocation

Device Orientation

The DeviceOrientation and DeviceMotion events provide a way to create applications that are aware of the physical positioning of a device. This is especially useful when building HTML5 games.

// Check to make sure the browser supprots DeviceOrientationEvents
if (window.DeviceOrientationEvent) {
  // Create an event listener
  window.addEventListener('deviceorientation', function(event) {
      // Get the left-to-right tilt (in degrees).
    var tiltLR = event.gamma;

    // Get the front-to-back tilt (in degrees).
    var titleFB = event.beta;

      // Get the direction of the device (in degrees).
    var direction = event.alpha;
  });
}

W3C Specification Learn about the Device Orientation API

Specification Status: Working Draft

Browser Support For The DeviceOrientation API

Browser support for the DeviceOrientation and DeviceMotion events is pretty good. Safari is the only desktop browser that doesn’t currently include support.

IE Firefox Chrome Safari Opera
11 6+ 7+ 15+

IE is the only mobile browser without support for the DeviceOrientation and DeviceMotion events.

Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
3+ 10+ 33+ 26+ 4.2+ 12+

Source: http://caniuse.com/#feat=deviceorientation

Media Capture and Streams

Almost everything seems to have a camera on it these days: phones, tablets, glasses, and more. With the Media Capture and Streams API you can get access to the device camera using JavaScript.

Coupled with the power of WebRTC, this enables some pretty cool applications like real-time video conferencing without the need for third-party plugins.

// Request the camera.
navigator.getUserMedia(
    // Constraints
    {
        video: true
    },
    // Success Callback
    function(localMediaStream) {
          // Get a reference to the video element on the page.
        var vid = document.getElementById('camera-stream');

        // Create an object URL for the video stream and use this 
        // to set the video source.
        vid.src = window.URL.createObjectURL(localMediaStream);
    },
    // Error Callback
    function(err) {
        // Log the error to the console.
        console.log('The following error occurred when trying to use getUserMedia: ' + err);
    }
);

W3C Specification Learn about the Media Capture

Specification Status: Working Draft

Browser Support For Media Capture

Browser support for the Media Capture and Streams API is growing. Firefox, Chrome, and Opera currently include support in their desktop browsers.

IE Firefox Chrome Safari Opera
17+ 21+ 12.0-12.1 / 18.0+

On mobile, the Media Capture and Streams API is supported in the Blackberry browser, Chrome for Android, Firefox for Android, and Opera Mobile.

Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
10+ 33+ 26+ 12+

Source: http://caniuse.com/#feat=stream

Vibration

The Vibration API allows developers to provide non-audible feedback to the user by harnessing the devices vibration motor.

// Vibrate for 1 second (1000 milliseconds).
navigator.vibrate(1000);

// Vibrate in sequence.
navigator.vibrate([500, 250, 500]);

This API is useful when building HTML5 games, or for making applications accessible to users with hearing impairments.

W3C Specification Learn about the Vibration API

Specification Status: Last Call Working Draft

Browser Support for The Vibration API

The Vibration API is supported in Firefox, Chrome, and Opera on the desktop. (Although the device will, of course, need to have a vibration motor for this to work.)

IE Firefox Chrome Safari Opera
11+ 30+ 17+

On mobile, the Vibration API is supported in the Android and Blackberry browsers, as well as in Chrome and Firefox for Android, and Opera Mobile.

Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
4.4+ 10+ 33+ 26+ 16+

Source: http://caniuse.com/#feat=vibration

Ambient Light

The Ambient Light API allows developers to access the light sensor on the device.

With the increasing popularity of bright, minimalist designs, many developers have added a “night mode” to their apps to make them easier to use in dark surroundings. You could use the data from the Ambient Light API to automatically switch between “day” and “night” modes.

window.addEventListener('devicelight', function(event) {
    // Get the ambient light level in lux.
    var lightLevel = event.value;
});

W3C Specification Learn about the Ambient Light API

Specification Status: Candidate Recommendation

Browser Support for The Ambient Light API

The Ambient Light API is currently only supported in Firefox 22+ on the Mac.

IE Firefox Chrome Safari Opera
22.0 (Mac only)

Only Firefox for Android includes support on mobile.

Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
15

Source: https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent

Proximity Events

Many devices have proximity sensors that can feed back data about objects that are close to the device. Proximity events gives developers access to this data for use in their web applications.

There are two different types of proximity events, DeviceProximityEvent and UserProximityEvent. DeviceProximityEvent is the more accurate of the two, providing data about the distance an object is from the device as well as the sensors field of view. The UserProximityEvent only provides a boolean attribute (near) to indicate if an object is close to the device or not.

// An event listener for a DeviceProximityEvent.
window.addEventListener('deviceproximity', function(event) {
    // The maximum distance the sensor covers (in cm).
    var max = event.max;

    // The minimum distance the sensor covers (in cm).
    var min = event.min;

    // The device proximity (in cm).
    var proximity = event.value;
});

// An event listener for a UserProximityEvent.
window.addEventListener('userproximity', function(event) {
    if (event.near) {
        // Do something.
    } else {
        // Do something else.
    }
});

W3C Specification Learn about Proximity Events

Specification Status: Candidate Recommendation

Browser Support for Proximity Events

Proximity events are currently only supported in Firefox (desktop) and Firefox for Android.

IE Firefox Chrome Safari Opera
Yes
Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
15

Source: https://developer.mozilla.org/en-US/docs/WebAPI/Proximity

Battery Status

The Battery Status API gives developers information about the device’s current power status. The BatteryManager object offers information about the current charge level, whether the device is charging, and how much time is left until the device runs out of juice and powers down.

// Get the current power level.
navigator.battery.level;

// Get the charging status (boolean).
navigator.battery.charging;

// Find out how long until the battery is charged.
navigator.battery.chargingTime;

// Find out how long until the battery is empty.
navigator.battery.dischargingTime;

W3C Specification Learn about the Battery API

Browser Support for The Battery Status API

Currently the Battery Status API is only supported in Firefox (desktop) and Firefox for Android. Work is being done to add this functionality to blink, but there’s no indication of exactly when this will make it into Chrome or Opera.

IE Firefox Chrome Safari Opera
10+
Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
10

Source: https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status

Other Specifications in the Works

So far in this post we’ve looked at a number of different APIs that help to further the capabilities of web applications. In addition to the APIs I’ve already mentioned, there are also a number of specifications that are being worked on for other exciting technologies. I’ve listed some of these below.

It’s worth noting that these specifications are all classed as working drafts and therefore are very early in development and likely to change. There’s no guarantee that these technologies will ever make it into browsers, or even through the spec development process. Nevertheless, I think they’re worth mentioning purely as a look into what the future may hold.

Final Thoughts

In this blog post you’ve explored some of the JavaScript device APIs that are helping to further the capabilities of web applications. I’m incredibly excited about the direction the web is going. Browsers are invading device hardware and offering up the loot through new APIs — data that web developers have been eager to get their hands on for years.

The capabilities gap that has existed between native and web applications is closing fast, and that shows no signs of slowing down. The future looks ever brighter for web developers.

Useful Links

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

6 Responses to “Exploring the JavaScript Device APIs”

  1. And* I write to try to make some difference, a better world in my ‘own little way’.
    Most directories maintain a high page rank which tends to
    ‘boost’ the rankings of your site as a result.
    Admission requirements are a two-year SAIT diploma in technology
    or engineering, or a graduate degree in math, physics,
    chemistry, geology or geophysics or engineering.

  2. 各種のブランドの服、靴、、財布、腕時計の複製品をかばん|ROLEXスーパーコピー|ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品
    エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.newkakaku.net/ch.htm

  3. Hi Mat, awesome post there, first thing I thought about when I got to know javascript is how do u make or access camera on devices with js n you just solved that. Anyways do you provide consultation services of any sorts online?

  4. I agree with you mobile web is very good techonology for use the net for any where and more over mobile and mobile web techonologies use to any person.

  5. Great blog! Quite insightful and very informative

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop