Ambient light sensor | Frontend Practical Guide

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AmbientLightSensor` Experimental	67	79			67
HTML attribute
`allow (ambient-light-sensor)` Experimental	66	79			66
DOM API
`AmbientLightSensor` Experimental The AmbientLightSensor() constructor creates a new AmbientLightSensor object, which returns the current light level or illuminance of the ambient light around the hosting device.	67	79			67
`illuminance` Experimental The illuminance read-only property of the AmbientLightSensor interface returns the current light level in lux of the ambient light level around the hosting device.	67	79			67
`permission_ambient-light-sensor` Experimental `ambient-light-sensor` permission	62	79			62
Other
`ambient-light-sensor` Experimental The HTTP Permissions-Policy header ambient-light-sensor directive controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the AmbientLightSensor interface.	66	79			66

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("Current light level:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}

Use cases

Using Ambient light sensor

The AmbientLightSensor interface of the Sensor APIs returns the current light level or illuminance of the ambient light around the hosting device.

Cautions

Limited browser support. Check compatibility before use.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Browser support

Syntax

Use cases

Using Ambient light sensor

Cautions

Implementation notes

Related links