JavaScript w inteligentnych budynkach

Mateusz ZiarkoHead of Front-End Development & Design Sensinum

Inteligentne budynkiCo to jest?

• automatyka

• czujniki

• Internet of Things

Inteligentne budynkiCzym są zarządzane?

• fizyczne panele

• aplikacje natywne (iOS, Android)

• ***

Inteligentne budynkiCzym są zarządzane?

• fizyczne panele

• aplikacje natywne (iOS, Android)

• ***

Gdzie tutajJavaScript?

Webowe aplikacje SPA

W czym to zbudować?

• AngularJS, knockout.js, React or whatever

• HTML5 API

• WebSocket

• webRTC

W czym to zbudować?

• AngularJS, knockout.js, React or whatever

• HTML5 API

• WebSocket

• webRTC

My zrobiliśmy to w tym

Co nam to dało?

• skalowalność rozwiązania

• niezależność od implementacji serwerowej

• efekt WOW

• dostęp np. do interfejsu głosowego

Co nam to dało?

• skalowalność rozwiązania

• niezależność od implementacji serwerowej

• efekt WOW

• dostęp np. do interfejsu głosowego

webRTC

Czym jest webRTC?

• projekt OpenSource

• wzbogaca współczesne przeglądarki o proste API do komunikacji real-time

• getUserMedia i MediaStream

Źródło: webrtc.org

Czym jest webRTC?

• projekt OpenSource

• wzbogaca współczesne przeglądarki o proste API do komunikacji real-time

• getUserMedia i MediaStream

Źródło: webrtc.org

Liczący się gracze wspierają webRTC

• Mozilla Firefox

• Google Chrome

• Opera

Również w wersjach mobilnych

caniuse.com/#search=webrtciswebrtcreadyyet.com

Źródło: iswebrtcreadyyet.com

getUserMedia+

MediaStream+

Recorder.js

github.com/mattdiamond/Recorderjs

Zarządzanie budynkiemza pomocą komend głosowych

Jak to zrealizowaliśmy?

• dostęp do mikrofonu za pomocą getUserMedia

• rozpoczęcie nagrywania z wykorzystaniem Recorder.js

• wygenerowanie Blob’a WAV z zapisem dźwiękui konwersja na base64

Jak to zrealizowaliśmy?

• analiza przez serwer i uruchomienie żądanych procesów

• głosowa odpowiedź przez WebSocket i reakcja aplikacji

Co napsuło nam krwi?

• częstotliwość nagrywania

• stand-by urządzeń mobilnych i usypianie procesów przeglądarki

• jednoczesne nagrywanie dźwięku i działanie komunikacji po WebSocket’ach

• kompresja nagranego dźwięku

W jaki sposób testowaliśmy?

• aplikacja serwerowa miała pełne testy jednostkowe i behawioralne

• SPA posiadało testy z wyjątkiem części odpowiedzialnej za dźwięk, która testowana była „ręcznie”

Co przez to osiągnęliśmy?

• responsywna aplikacja webowa - desktop / tablet / smartphone

• obsługa przez komendy głosowe

• uruchamianie tzw. Scen

• Ambient Assisted Living z przeznaczeniem np. dla osób starzejących się

Digital Home Management System

To naprawdę zaskoczyło

• niedalekie wdrożenia w pokazowym domu pasywnym i biurowcu klasy A+ w okolicach Krakowa

Dziękuję za uwagę

Pytania?

Mateusz ZiarkoHead of Front-End Development & Design

@ Sensinum

@cyp3r

mateusz.ziarko@sensinum.pl

studio.sensinum.plwww