Ambient Light Events

인간의 눈은 주변 빛의 양에 따라 한번에 들어올 수 있는 빛의 양을 조절합니다.
어두운 곳에 있으면 동공은 축소되고 그만큼 한번에 받아들이는 빛의 양이 많아집니다.
그런 경우 휴대폰의 밝기가 최대로 되어있으면 한꺼번에 많은 빛을 받아들이게 되어 눈이 아파집니다.
반대로 밝은 곳에 있으면 동공은 확대되고 그만큼 한번에 받아들이는 빛의 양은 적어집니다.
하지만 휴대폰의 밝기가 낮다면 그만큼의 빛을 인식을 못하고 휴대폰 화면을 인식하기 어려워집니다.
많은 휴대폰 제조사에서는 자동밝기조정 기능을 제공하여,
주변 환경의 밝은 정도에 따라서 휴대폰의 밝기를 자동으로 조절해줍니다.
아래는 넥서스7에서 Ambient Light Events를 활용한 동영상 예제입니다.

이런 동작을 웹에서는 Ambient Light Event를 활용하여 구현할 수 있습니다.

Tech!

// Window 인터페이스의 속성으로 ondevicelight 이벤트가 정의됩니다.
// 기기의 빛 센서가 빛의 변화를 감지하면 deviceLightEvent를 발생시킵니다.
partial interface Window {
                attribute EventHandler ondevicelight;
};
// 기기의 빛 센서가 빛의 변화를 캡쳐하면 DeviceLightEvent객체를 생성합니다.
dictionary DeviceLightEventInit : EventInit {
    unrestricted double value;
};
// DeviceLightEvent.value 속성을 사용해 럭스(lux) 단위로 빛의 강도를 사용할 수 있습니다.
// DeviceLightEvent.value 속성은 readonly로 변경이 불가능합니다.
[Constructor (DOMString type, optional DeviceLightEventInit eventInitDict)]
interface DeviceLightEvent : Event {
    readonly    attribute unrestricted double value;
};

이를 응용해 빛의 세기에 따른 활용이 가능합니다.

window.addEventListener('devicelight', function(event) {
  var html = document.getElementsByTagName('html')[0];
  if (event.value < 50) { // 기기 주변의 밝기가 50 lux 미만일 경우
    html.classList.add('darklight');
    html.classList.remove('brightlight');
  } else {
    html.classList.add('brightlight');
    html.classList.remove('darklight');
  }
});

Compatibility

PC

Mobile

현재는 파이어폭스에서만 Ambient Light Events를 지원하며 이후 권고안으로 등록되면 더 많은 브라우저들이 지원할 것으로 예상됩니다.
감사합니다.

참고문서

• https://developer.mozilla.org/ko/docs/WebAPI/Using_Light_Events
• Ambient Light Events