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.

<div class="grid">
    <div class="col-3">
        <CameraComponent :camera="Drzwi" />
    </div>
    <div class="col-3">
        <CameraComponent :camera="Plac" />
    </div>
</div>
        

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.