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: