Domowy system bezpieczeństwa nie będzie kompletny bez kamer...
...ale ich instalacja to dopiero pierwszy krok. Możliwość łatwego sprawdzenia podglądu z nich jest równie ważna.
Dodatkowo chciałem nauczyć się Vue.js 🙃
Nieco technologicznej magii™, instancja motionEye, cały dostawczak node_modules i wiadro kawy później - gotowe.
Podgląd live skupia się na pojedynczej kamerze. W tym trybie wideo z wybranej kamery jest odtwarzany z najwyższą dostępną ilością klatek na sekundę, a podgląd z pozostałych kamer aktualizuje się co dwie sekundy, aby oszczędzać transfer danych.
W trybie siatki obraz z kamer wyświetlany jest w jednym z kilku układów. Każdy podgląd jest tak naprawdę komponentem Vue, więc tworzenie nowych układów jest niesamowicie proste - wystarczy wstawić jeden tag i przekazać nazwę kamery jako parametr.
Dodatkowo tryb siatki wykorzystuje CSS Grid.
Chwilowo w trybie archiwum nie znajdziemy nic oszałamiającego - jedynie listę dostępnych nagrań, posortowanych według daty i godziny.
Planuję poprawić ten interfejs, zamieniając listę na widok osi czasu, a także dodając nowe elementy do logiki obsługującej natywny odtwarzacz wideo. Chciałbym, aby apka pozwalała na płynne przejście między nagraniami, a wybór określonej daty i godziny przechodził bezpośrednio do odpowiedniego wideo.
Zdecydowanie przewiduję przyszłe poprawki, ale jestem zadowolony z dotychczasowych rezultatów.