iOS, Android 2018-2019

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

Expert modeBasic mode

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

Dashboard
Můj profil
Moje kamery
Notifikace
Eventy
Camera sharing

03 Výzvy

S čím jsme se potýkali

  • 01
  • 02
  • 03
  • 04

Jestli je streamování videa výzva u stolních počítačů, tak u mobilních aplikací je to opravdové mistrovství. V aplikaci se používají hned dva formáty videa, které se dynamicky přizpůsobují podmínkám.Musela se i vyřešit synchronizace aplikace s již existujícím backendovým řešením.Prostředí Angelcam stojí a padá na Timeline – časové ose. Našim úkolem bylo vyřešit synchronizaci s prakticky nekonečným streamem záběrů z bezpečnostních kamer.V zadání se navíc objevil požadavek na ovládání Timeline pomocí hned několika gest. A implementace více gest v rámci jednoho prvku není příliš obvyklá.

01020304

04 Highlights

Jak jsme to vyřešili

Jak jsme to vyřešili

01

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.

02

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.

03

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ší.

04

Jednoduché ovládání

Timeline díky nám ovládáte jak jste na to zvyklí u fotografií.

01

Č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.

02

REST API

Komunikaci se serverem jsme implementovali podle již existujícího REST API, kde nebyla možná větší úprava.

03

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á.

04

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.

05

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.

47 TB videa v cloudu za jeden den

Průměrné hodnocení

4.4

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ů.

6,5 tis.

aktivních uživatelů měsíčně

45 tis.

připojených kamer

610TB

video-dat uloženo v Amazonu

Stejně úspěšnou aplikaci můžeme vytvořit i pro vás.
Stačí nám napsat

Další projekt