Using light sensors

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.
Editor's Draft Initial specification

Browser Supports

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

References:

 

Document Tags and Contributors

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