Angelcam
Protože pocit bezpečí ničím nenahradíte
1 rok spolupráce, 5 500+ hodin v projektu
01 Úvod
Angelcam je startup, který do bezpečnosti domácností přidává komunitní prvek. Jeho řešení se snaží zamezit falešným poplachům, které způsobí například domácí zvíře. Před spuštěním bezpečnostího poplachu tak notifikaci dostane uživatel nebo jím zvolený “anděl.”
Klient:
Angelcam INC
Systém:
iOS & Android
Rok:
2018-2019
Náročnost:
+5 500 hodin
02 Zadání
Velké věci se neobejdou bez velkých změn
Android / iOS nativní mobilní aplikace
Aplikace měla před sebou ambiciózní plány a její současné řešení dosáhlo svých limitů – jak po designové, tak i po technické stránce.
Bylo tedy rozhodnuto, že se aplikace kompletně přemění, tak aby usnadnila implementaci budoucích bezpečnostně-technických prvků a aby došlo k výraznému zvýšení uživatelského komfortu.
Koncept
Design
UX
Vývoj
Nasazení
Servis
Zadáním bylo vytvořit Android / iOS nativní mobilní aplikace, které budou připraveny na další vývoj v rámci interního týmu. Z tohoto důvodu jsme nevyužívali proprietární knihovny a veškerý kód tak pocházel od klienta.
Časová osa je jeden z hlavních prvků aplikace (společně s přehráváním videa). V původní aplikaci byla neomezená a uživatelé se v ní ztráceli. Zároveň zde byl nepříjemný loading time. Vzhledem k velmi specifickému zadání, jsme nemohli použít žádné systémové prvky platforem. Potýkali jsme se s výkonnostními problémy při vykreslováním časové osy, které je nutné provádět každou sekundu, protože osa může obsahovat tisíce eventů nebo výpadků. Museli implementovat škálování událostí podle aktuálního přiblížení osy a podle aktuálního výběru na obrazovce a precizní práci s časem. Jeden z náročných úkolů v takovýchto náročných aplikacích je optimalizovat spotřebu energie v místech kde to je možné. Příklad může být seznam zařízení, kde je nutné pokud možno nepřetěžovat zařízení více otevřenými streamy s větší náročností než je nutné. Součástí playlistu jsou tři možné typy videa, stream, loading a error, které jsme museli rozpoznávat pro zobrazení správných UI prvků
Koncept
Design
UX
Vývoj
Nasazení
Servis
03 Výzvy
S čím jsme se potýkali
04 Highlights
Jak jsme to vyřešili
Jak jsme to vyřešili
Video stream
Pro nejlepší kvalitu a spolehlivost jsme implementovali stream videa přes HTTP Live Streaming protokol. V případech, kdy je naopak potřeba rychlost, nízká náročnost, nebo kvalita není hlavní kritérium (například náhledy) jsme použili MJPEG video stream. MJPEG se zároveň používá v momentě, kdy není dostupný HLS stream a aplikace umí tento stav sama řešit.
Detekování stavu streamu
Doplňkově jsme implementovali detekování stavu streamu, aby uživatel získal přehled i o případných výpadcích.
Eventy na Timeline
Každý pohyb na timeline se synchronizuje s přehrávaným streamem. Timeline jsme pro uživatele rozdělili podle jednotlivých dnů. Na Timeline navíc přehledně zobrazujeme všechny eventy – důležité události například z pohybových senzorů. Uživatel může snadno zkontrolovat každý event a přeskočit na další.
Jednoduché ovládání
Timeline díky nám ovládáte jak jste na to zvyklí u fotografií.
Časová osa
Vytvořili jsme časovou osu, která reflektuje jediný den společně s časovými body, ve kterých uživatel jednoduše vyhledá událost. Navíc dostává možnost vytvořit a nasdílet klip pomocí odkazu. Časová osa obsahuje několik gest pro manipulaci. Konkrétně zoom, swipe, přechod mezi eventy a dny podle nejbližší časové události a ořezávátko pro vytvoření a uložení uzavřeného intervalu videa.
REST API
Komunikaci se serverem jsme implementovali podle již existujícího REST API, kde nebyla možná větší úprava.
HTTP Live Streaming
Náročnější stream videa je zajištěný pomocí HLS. HLS = HTTP Live Streaming, slouží pro ohraničený nebo neohraničný video stream, dokáže přizpůsobovat datový tok podle aktuální propustnosti sítě. Video se rozděluje do malých segmentů např. 5 sekund. Tento playlist (nebo spíš malý buffer tohoto playlistu) se postupně přehrává.
Motion JPEG
Pro náhledy nebo jako zálohu používáme MJPEG (Motion JPEG), který byl implementován již v původní aplikaci. My jsme toto řešení převzali a vylepšili. Mimo jiné aby bylo možné regulovat kvalitu a náročnost streamu a lépe reagovat na chyby.
Vlastní implementace pohybu
Vzhledem k předchozím volbám a téměř hotovému API, jsme museli zvolit vlastní implementaci pohybu ve video záznamu (play/pause, seek a vybraní času) a počítání času videa, které jsme museli synchronizovat se serverem, protože server automaticky přeskakuje chybějící záznamy na cloudu. Pro samotné přehrání video záznamu nebo live videa jsme použili přehrávač, který je k dispozici od Google resp. iOS. Seznam kamer jsme implementovali pomocí MJPEG streamu pro každou kameru, který je regulovaný podle typu připojení a podle aktuálního zobrazení uživatele.
05 Výsledek
Moderní svižná aplikace
Výsledek
Výsledek je moderní, svižná aplikace, která je připravena na další funkce, které do ní budou postupem přibývat. Nové grafické a ovládací prvky usnadňují její používaní a umocňují uživatelský komfort.
Android je vyvíjen pomocí architektury MVVM (včetně našeho frameworku https://github.com/thefuntasty/mvvm-android) a jazyku Kotlin.
Při vývoji iOS aplikace jsme bohatě využili našich open-source frameworků. FuntastyKit (https://github.com/thefuntasty/FuntastyKit) pro podporu MVVM-C architektury, CellKit (https://github.com/thefuntasty/CellKit) který nám usnadňuje práci s tabulkami a FTAPIKit (https://github.com/thefuntasty/FTAPIKit) umožňující deklarativní a přehlednou správu endpointů. Aplikaci je tak kdykoliv možné předat in-house teamu bez prodlení. Samozřejmé je i využití Secure Enclave pro bezpečné šifrované ukládání přístupových údajů.
aktivních uživatelů měsíčně
připojených kamer
video-dat uloženo v Amazonu
Stejně úspěšnou aplikaci můžeme vytvořit i pro vás.
Stačí nám napsat