Angelcam
Denn das Gefühl von Sicherheit ist unersetzlich
1 Jahr, 5 500+Stunden
01 Einführung
Angelcam ist ein Startup, das den Sicherheitsvorkehrungen Ihres Heims ein gemeinschaftliches Element beifügt. Die entsprechende Lösung zielt auf die Vermeidung von Fehlalarmen, welche beispielsweise von Haustieren verursacht werden. Noch vor der Auslösung des Sicherheitsalarms erhält der User, oder ein von ihm bestimmter „Engel“, eine Benachrichtigung.
Angelcam ist ein Startup, das den Sicherheitsvorkehrungen Ihres Heims ein gemeinschaftliches Element beifügt. Die entsprechende Lösung zielt auf die Vermeidung von Fehlalarmen, welche beispielsweise von Haustieren verursacht werden. Noch vor der Auslösung des Sicherheitsalarms erhält der User, oder ein von ihm bestimmter „Engel“, eine Benachrichtigung.
Klient:
Angelcam INC
System:
iOS & Android
Jahr:
2018–2019
Schwierigkeitsgrad
+ 5 000 Stunden
02 Aufgabenstellung
Von grund auf neu
Große Dinge sind nicht machbar ohne große Veränderungen.
Die App war sehr ambitioniert, und die derzeitige Lösung stieß sowohl aus dem Blickwinkel des Designs als auch in technischer Hinsicht an ihre Grenzen. Daher war es entscheidend, dass sich die App komplett wandelt, um künftig die Implementierung von sicherheitstechnischen Elementen zu erleichtern und den Benutzerkomfort deutlich zu erhöhen.
Konzept
Design
UX
Entwicklung
Ausgabe
Service
Große Dinge sind nicht machbar ohne große Veränderungen. Aufgabe war es, eine native, mobile App für Android / iOS zu gestalten, die für die weitere Entwicklung im Rahmen eines internen Teams geeignet ist. Aus diesem Grunde haben wir keine proprietäre Bibliothek benutzt und stammte der Code ausschließlich vom Kunden.
Eines der Hauptelemente der App ist - neben dem Überspielen des Videos - die Zeitachse. In der ursprünglichen App war sie quasi unbeschränkt, und die User haben sich auf ihr verloren. Ebenfalls unangenehm war die Loading time. Im Hinblick auf die sehr spezifische Aufgabe war es uns nicht möglich, Systemelemente von Plattformen zu verwenden.
Die Zeitachse enthält mehrere Gesten für die Handhabung. Konkret einen Zoom, Swipe, einen Übergang zwischen Ereignissen und Tagen gemäß dem zeitnahesten Ereignis und einen Videoschnitt für die Bildung und Speicherung des abgeschlossenen Videointervalls.
Bei der jede Sekunde durchzuführenden Zeichnung der Zeitachse hatten wir es mit Leistungsproblemen zu tun, da die Achse tausende von Ereignissen oder Ausfällen enthalten kann. Wir mussten ein Skalieren von Ereignissen je nach aktueller Nähe der Achse und der aktuellen Auswahl am Bildschirm sowie eine präzise Arbeit mit der Zeit integrieren.
Zu den anspruchsvollen Aufgaben bei solch hochentwickelten Apps gehört die Optimierung des Energieverbrauchs überall dort, wo es möglich ist. Als Beispiel mag eine Liste von Vorrichtungen dienen mit der Erfordernis, die einzelnen Vorrichtungen nicht durch offene Streams mehr als unbedingt nötig zu belasten.
Bestandteil der Playlist sind drei mögliche Videotypen - Stream, Loading und Error - die wir für die Darstellung der richtigen KI-Elemente unterscheiden mussten.
Konzept
Design
UX
Entwicklung
Ausgabe
Service
03 Wie funktioniert das?
Herausforderungen
04 Highlights
Wie wir es gelöst haben
Wie wir es gelöst haben
Videostream
Zugunsten bester Qualität und Zuverlässigkeit haben wir einen Videostream über das HTTP Live Streaming-Protokoll implementiert. In anderen Fällen, in denen ganz im Gegenteil Schnelligkeit gefragt ist, wo der Anspruch geringer ist oder die Qualität nicht das Hauptkriterium bildet (zum Beispiel bei Ansichten) haben wir einen MJPEG-Videostream verwendet. MJPEG wird ebenso eingesetzt, sobald ein HLS-Stream nicht verfügbar ist und die App diesen Status selbst zu behandeln vermag.
Detektion des Streaming-Status
Als Zusatz haben wir eine Detektion des Streaming-Status eingebaut, um dem User eine Übersicht über etwaige Ausfälle zu ermöglichen.
Events auf der Timeline
Jede Bewegung auf der Timeline wird mit dem überspielten Stream synchronisiert. Die Timeline haben wir für den User in einzelne Tage eingeteilt. Außerdem bilden wir auf der Timeline alle Ereignisse in übersichtlicher Form ab – wichtige Vorkommnisse zum Beispiel aus den Bewegungsmeldern. Der User kann so jedes Ereignis auf einfache Weise kontrollieren und zum nächsten übergehen.
Einfache Bedienung
Dank uns beherrschen Sie die Timeline ganz so, wie Sie es von der Fotografie her gewohnt sind.
Timeline
Wir haben eine Zeitachse kreiert, die einen einzigen Tag mit Zeitpunkten reflektiert, an denen der User leicht das entsprechende Ereignis aufsuchen kann. Überdies erhält der User die Möglichkeit, mit Hilfe eines Verweises den Clip zu gestalten und zu teilen.
REST API
Wo eine weitergehende Bearbeitung nicht möglich war, haben wir die Kommunikation mit dem Server laut bereits vorhandenem REST API implementiert.
HTTP Live Streaming
Für einen anspruchsvolleren Videostream sorgt HLS. HLS = HTTP Live Streaming, ermöglicht einen limitierten oder unlimierten Video-Stream und kann den Datenfluss je nach aktueller Durchlässigkeit des Netzes anpassen. Das Video wird in kleine Segmente von z.B. 5 Sekunden unterteilt. Diese Playlist (oder besser der kleine Buffer der Playlist) wird sukzessive überspielt.
Motion JPEG
Für Ansichten oder als Reserve verwenden wir MJPEG (Motion JPEG), das bereits in der ursprünglichen App implementiert war. Wir haben diese Lösung übernommen und verbessert. Und zwar auch, um die Qualität und den Anspruch des Streams steuern und besser auf Fehler reagieren zu können.
Eigene Implementierung von Bewegung
Angesichts der vorangegangenen Auswahl und der fast fertigen API mussten wir uns bei der Videoaufzeichnung für eine eigene Implementierung von Bewegung (Play/Pause, Seek und Zeitauswahl) und der Berechnung der Dauer des Videos entscheiden, das mit dem Server sychronisiert werden musste, da letzterer fehlende Aufzeichnungen in der Cloud automatisch überspringt. Für das eigentliche Überspielen der Videoaufzeichnung oder Live-Videos haben wir einen Player benutzt, der über Google bzw. iOS verfügbar ist. Eine Liste von Kameras haben wir mit Hilfe eines mjpeg-Streams für jede Kamera eingefügt, der je nach Art der Verbindung und der aktuellen Darstellung des Anwenders reguliert wird.
05 Ergebnis
Eine moderne, geschmeidige App
Das Ergebnis ist eine moderne, geschmeidige App, die für die sukzessive Integration von weitere Funktionen in der Zukunft bereit ist. Die neuen graphischen und Kontrollelemente erleichtern die Bedienung der App und steigern den Benutzerkomfort.
Android wird mit Hilfe einer MVVM-Architektur implementiert und Kotlin als Sprache.
Bei der Entwicklung der iOS-App haben wir uns reichlich unseres Open-source- Frameworks bedient. FuntastyKit zur Unterstützung von MVVM-C Architektur, CellKit, das uns die Arbeit mit Tabellen erleichtert und FTAPIKit zwecks Möglichkeit der deklarativen und übersichtlichen Verwaltung der Endpoints. Somit kann die App jederzeit ohne Verzögerung dem In-house-Team übergeben werden. Eine Selbstverständlichkeit ist ferner die Verwendung von Secure Enclave für eine sichere chiffrierte Speicherung der Zugangsdaten.
aktive Nutzer täglich
angeschlossene Kameras
Videodaten im Cloud
Von einer genau so erfolgreichen App sind Sie
Nur eine E-Mail entfernt