当前位置：文江博客知识库 en-US 文档 Web API DeviceLightEvent Using_light_sensors

Using light sensors - Web APIs 编辑

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.