Pierwsze moje zetknięcie z tym API wywołało u mnie szok! Mogę korzystać z kamery w sposób niezauważalny dla użytkownika! Jak się później okazało nie korzystam z kamery, a jedynie z czujnika, który jest zamontowany obok kamery.
Kamień z serca. Odetchnąłem z ulgą i pozbierałem zęby z podłogi.
Film
Nie chce Ci się czytać? Spoko. Rozumiem to. Specjalnie dla Ciebie nagrałem film, na którym opowiadam przez niecałe 5 minut, jak dzisiejszy feature może pomóc Ci w tworzeniu lepszego User Experience w Twoich aplikacjach webowych!
Co to jest DeviceLightEvent?
Kilka lat temu pojawiła się specyfikacja - Ambient Light Events, która opisała jak może polegać komunikacja z czujnikiem natężenia światła, który znajduje się obok kamery w laptopach.
Pytanie do publiczności
Zastanawiam się, czy event będzie działał na komputerach PC (jednostki centralne). Jeśli czytelniku korzystasz z takiego sprzętu i posiadasz przeglądarkę wymienioną w sekcji wsparcie, to daj znać w komentarzu, czy Twoja zewnętrzna kamera posiada taki czujnik generując tym samym omawiany event.
Przykładowy kod
window.addEventListener('devicelight', (evt) => {
console.log(evt.value);
});
Komunikacja wygląda następująco.
- Zapisujesz się na event
devicelightna obiekciewindow. - Czekasz aż zmienić się poziom natężenie światła - warto zakryć kamerę palcem, albo poświecić w niego latarką z telefonu.
- W handlerze eventu dostaniesz payload będący obiektem zdarzenia
DeviceLightEvent, który będzie posiadał wartośćvalue, pod którym będzie kryła się liczba luksów.
Bracie, a co to jest ten lukx (lux)?
W układzie SI, czyli “Międzynarodowym Układzie Jednostek Miar”, znajduje się definicja luksa, który to jest jednostką natężenia oświetlenia.
Nazwa “luks” pochodzi od łacińskiego słowa “lux” oznaczającego “światło”.
Jak ja bym obsługiwał dane, które dostanę ze zdarzenia
- 0 (zero) lux - czarno - layout powinien być maksymalnie ciemny, aby nie psuć komfortu pracy bez oświetlenia
- < 50 lux - ciemno w pomieszczeniu, warto więc przepiąć się na ciemniejszy layout
- 50+ lux - jasno, śmiało możesz przepinać layout w styl dzienny
- 3000+ lux - tak jasno, że można oślepnąć, gdy będzie się dłużej patrzeć na taki obiekt, który świeci światłem o takim natężeniu. Rzadko kiedy spotkasz takich użytkowników.
Przykłady z życia wzięte
Ile lux-ów ma światło na co dzień?
- 50 lux - Natężenie światła w pokoju dziennym
- 80 lux - Natężenie światła w biurowym korytarzu / toalecie
- 320–500 lux - Naświetlenie w biurze
- 1000 lux - Natężenie światła w typowym studiu TV
- 10000 - 25000 lux - Światło dzienne (lecz nie bezpośrednie światło słoneczne)
- 32000 - 100000 lux - Promieniowanie słoneczne
Dane pobrane z Wikipedia.
Wsparcie
Korzystając z serwisu caniuse.com można dowiedzieć się,
że Ambient Light API wspierane jest przez następujące przeglądarki:
-
- Edge
- wsparcie na poziomie 100% (pełne wsparcie)
-
- Firefox 22+
- tylko macOS
-
- Firefox For Android 52+
- wsparcie na poziomie 100% (pełne wsparcie)
Jak widać, jest to technologia, której dziś możemy zobaczyć swego rodzaju embrion. Malutkie wsparcie nie pozwala cieszyć się z tego feature-a. Szczególnie, kiedy najpopularniejszy browser, tj. Google Chrome, nie zaimplementował specyfikacji czujnika światła.
Po co mi to?
Ten event otwiera drogę na kolejne doznania użytkownika polepszające odbiór Twojej strony internetowej. Jeśli layout Twojej strony jest jasny (podobnie jak mój), to użytkownicy nocni dostaną “po gałach”, kiedy będą przeglądać internet o tej porze dnia.
Myślę, że świetnym podejściem jest wygaszenie jaskrawego białego i wykorzystania innych kolorów ze skali szarości, aby wyeliminować ten problem, że gdy w nocy wejdzie się na YouTube-a to nagle cały pokój się świeci.
Demo 🎉
Instrukcja
Jak możesz zobaczyć na samym dole strony w sekcji “Ostatnie projekty”, pojawił się nowy projekt, który posiada obsługę zdarzenia
devicelight.
Jeśli jesteś użytkownikiem korzystającym z dowolnej przeglądarki opisanej w sekcji wsparcie to zapraszam Cie do skorzystania ze specjalnie przygotowanej aplikacji, która na podstawie odczytów z czujnika natężenia światła zmienia kolory teksty i tła.