Using Light Events

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

주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.

빛 이벤트

기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 DeviceLightEvent 이벤트를 발생시킵니다.

이 이벤트는 addEventListener 메서드 (devicelight 이벤트 이름 사용)를 사용하거나 window.ondevicelight 속성에 이벤트 핸들러를 사용함으로서 window 객체 수준에서 캡춰됩니다.

캡춰가 되면 이벤트 객체의 DeviceLightEvent.value 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.

예제

window.addEventListener('devicelight', function(event) {
  var html = document.getElementsByTagName('html')[0];

  if (event.value < 50) {
    html.classList.add('darklight');
    html.classList.remove('brightlight');
  } else {
    html.classList.add('brightlight');
    html.classList.remove('darklight');
  }
});

명세

Specification Status Comment
Ambient Light Sensor
The definition of 'Ambient Light Events' in that specification.
Candidate Recommendation Initial specification

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DeviceLightEvent
ExperimentalNon-standard
Chrome No support NoEdge Full support YesFirefox Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 22 — 61
Notes
Notes Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 15 — 61
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
value
ExperimentalNon-standard
Chrome No support NoEdge Full support 13Firefox Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 22 — 61
Notes
Notes Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 15 — 61
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기