Using light sensors

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 Sensor
The definition of 'Ambient Light Events' in that specification.
Candidate Recommendation Initial specification

Browser compatibility

BCD tables only load in the browser

References: