Using light sensors

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Ambient Light Events give a web application access to a device's ambient light sensor to detect changes in light intensity. 

How Does it Work?

When the light sensor of the device detects a change in light intensity, the browser is notified of the change and fires a DeviceLightEvent event.  The event gives information about the light intensity of the device's environment.

The DeviceLightEvent provides a value attribute with light intensity in lux which is generally treated as shown below.

10 ~ 50 lux : Dim Environment

100 ~ 1000 lux : Normal

> 10000 lux : Bright

It uses the addEventListener method of the window object.

window.addEventListener("devicelight", function (event) {

// Read out the lux value

var luminosity = event.value;

alert(luminosity);

});

Example:

window.addEventListener('devicelight', function(event) {

var bodyBg= document.body.style;

//event.value is the lux value returned by the sensor on the device
if (event.value < 100) {

alert('Hey, you! You are working in a dark environment');

bodyBg.backgroundColor="lightgrey";

} else {

bodyBg.backgroundColor="#fff";

}

});

This example shows how the API can actually be used in the wild. If your app contains a lot of white in the UI, it is usually beneficial to the user to change the UI to a darker color in a darker environment. The code alerts the user that they are working in a dark environment and then changes the page's background to a darker color. 

Specifications

Specification Status Comment
Ambient Light Events
The definition of 'Ambient Light Events' in that specification.
Working Draft Initial specification

Browser Supports

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 22.0 (22.0) (Mac OS X only) Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported Not supported 15.0 (15.0) Not supported Not supported Not supported

References:

 

Document Tags and Contributors

Tags: 
 Contributors to this page: wblock, jgw96, wrakky, teoli, scaledrop
 Last updated by: wblock,