iOS, Android 2018–2019

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

Expert modeBasic mode

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

Einführung
Mein Profil
Meine Kameras
Meldungen
Events
Camera-Sharing

03 Wie funktioniert das?

Herausforderungen

  • 01
  • 02
  • 03
  • 04

Das Streaming von Videos stellt bereits bei Desktop-PCs eine Herausforderung dar - bei mobilen Apps darf es hingegen als wahre Meisterschaft bezeichnet werden. Wir benützen in der App lediglich zwei Videoformate, die sich dynamisch den Bedingungen anpassen.Notwendig war auch die Synchronisierung der App mit der bereits vorhandenen Backend-Lösung.Die Angelcam-Umgebung steht und fällt mit der Timeline-Zeitachse. Unsere Aufgabe war es, die Synchronisierung mit dem praktisch endlosen Stream von Aufnahmen der Sicherheitskameras zu bewerkstelligen.Die Aufgabenstellung umfasste auch die Anforderung an die Kontrolle der Timeline mit Hilfe von gleich mehreren Gesten. Wobei die Implementierung von mehreren Gesten nicht gerade üblich ist.

01020304

04 Highlights

Wie wir es gelöst haben

Wie wir es gelöst haben

01

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.

02

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.

03

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.

04

Einfache Bedienung

Dank uns beherrschen Sie die Timeline ganz so, wie Sie es von der Fotografie her gewohnt sind.

01

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.

02

REST API

Wo eine weitergehende Bearbeitung nicht möglich war, haben wir die Kommunikation mit dem Server laut bereits vorhandenem REST API implementiert.

03

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.

04

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.

05

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.

6 500

aktive Nutzer täglich

45 000

angeschlossene Kameras

610 TB

Videodaten im Cloud

Von einer genau so erfolgreichen App sind Sie
Nur eine E-Mail entfernt

Weitere Studie