이 글은 Ambient Light Events and JavaScript detection에 대한 번역 및 편집본입니다.

생각하기에 우리가 작업하고 있는 모든 WebAPI들과 함께 가장 흥미로운 것들 중 하나는 JavaScript를 통해서 하드웨어와 직접적으로 상호작용 할 수 있고 또한 그에 확장해서 우리 주변 환경과도 상호작용 할 수 있다는 것입니다. Ambient Light Events 에 들어가보세요.

Ambient light(조도)을 위한 API는 device 주변의 빛을 세기를 감지할 수 있게 할 것입니다. – 특히 햇빛아래 바깥활동시와 어두운 거실에서 앉아 있을 때는 큰 차이가 있으므로- 그리고 그에 기반한 사용자 경험을 개선시킬 수 있습니다.

한 사용 예는 약한 빛 조건아래에서 더 나은 독서 경험을 제공하는 페이지를 위해서 배경에 흰색의 강도를 낮추고 밝은 주변 색과 더 낫게 대비되는 색으로 CSS file/values 를 변경하도록 할 수 있습니다. 또다른 사용 예로 빛의 유무에 따라서 어떤 음악을 재생하도록 할 수 있습니다.

Device light에 접근하기

주변 빛을 이용한 작업은 매우 간단합니다. 당신이 해야할 것 devicelight event를 위한 listener를 등록하고 밝기 값을 읽어오는 것입니다.

lux 개체로 return값이 옵니다. lux 값은 낮고 높은 값들 사이의 범위를 가지지만 레퍼런스에서 말하는 좋은 포인트는 어두운 값들은 30lux이하, 반면에 정말 밝은 값은 10,000 lux 이상입니다.

window.addEventListener("devicelight", function (event) {
    // Read out the lux value
    var lux = event.value;
    console.log(lux);
    
});

Web browser 지원

Ambient Light Events 는 현재는 모바일폰과 태블릿용 Android에서 지원되고, Firefox OS에서도 지원됩니다. Android 장치(제가 테스트한 장치에서는)에서는 Ambient light(조도) 센서는 사용자쪽 카메라의 바로 오른쪽에 위치해 있습니다.

이는 또한 devicemotion처럼 다른 유사한 events type을 따르는W3C Working Draft이고, 우리는 곧 이것이 더 구현 된 것을 보기를 희망하고 있습니다.

Demo

Dmitry Dragilev 와 Tim Wright는 최근에 blog post about the Ambient Light API 라는 글을 멋진 demo영상과 함께 작성했습니다. :

또한 직접 demo example에 접근할 수 있고, 낮은 빛 조건에서 테스트하면 작은 음악을 얻을 수 있을겁니다. 지원되는 device나 web browser에서 시도해야하는 함을 기억하세요.