QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • BlockClusterBuild Private Blockchains
  • Home
  • QIdea
  • QTrack
Home Home HTML5 Proximity API

HTML5 Proximity API

This post is a part 1 of Advanced JavaScript APIs post series.

Proximity API is available in mobile browsers only that’s because this API require sensors to measure distance which is available only on mobile phones.

Proximity API is used to detect if an object is nearby the device. For example: If you want to play music just by touching the phone then this is useful or if you want the device to make a call when you take the device near your ear. There can be many other use cases.

Using proximity API you can find the distance between the nearby object, ofcourse you cannot find what the object is?

Let’s have a look at the API:

if('ondeviceproximity' in window)
{
   // API supported.

   //this event is fired when an object is comes near or goes far away from the device.
   window.addEventListener('deviceproximity', function(event) {
        console.log("An object is " + event.value + " centimeters far away");
        console.log("Minimum distance sensor can detect is " + event.min + " centimeters");
        console.log("Maximum distance sensor can detect is " + event.max + " centimeters");
   });  

   //this event is fired when an object is comes near or goes far away from the device. Its same as deviceproximity but the callback gets a different arguement.
   window.addEventListener('userproximity', function(event) {
        if(event.near == true)
        {
            console.log("Object is nearer to the device");
        }
        else
        {
            console.log("Object is not nearer to the device");
        }
   });  
}
else
{
   // API not supported
   console.log("Device Proximity API");
}
Jan 28, 2015Narayan Prusty
Page Visibility API Tutorial with ExampleHTML5 Ambient Light API

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image4 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • HTML5 Ambient Light API
  • Page Visibility API Tutorial with Example
  • Web Alarms API Tutorial
  • Creating A Viewport Resizer
  • Speech Recognition and Synthesis Using JavaScript
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license