Surveillance system app: Reducing development costs by 23% with Angular, RxJS, and Ionic

Project overview
If you’re concerned about the security of your home, office, or business premises, installing security cameras is only half the solution. You also need access to all recordings and live feeds at your fingertips.
Vigilzone, a video surveillance system vendor in Luxembourg, saw the rising demand for a mobile app that would give that access to live feeds and recorded footage among its customers. Its main benefit? Customers could view the feed and recordings on the go instead of waiting until they’re in front of their computer or laptop.
However, the mobile app would need to deal with real-time video streaming, as well as saved recordings. So, Vigilzone needed a cross-platform mobile development expert who could meet stringent performance requirements.
Services


Challenges
Vigilzone enlisted our help in building mobile apps for Android and iOS platforms. As a small business, it wanted to speed up development and lower costs, requiring a cross-platform tech stack.
We had to optimize the app’s architecture for smooth performance and scalability while handling live and recorded footage. That involved employing adaptive bitrate streaming and exhaustive load testing.
Vigilzone has been offering video surveillance systems and on-premises security solutions for both homes and business premises since 2011. So, the user base was quite diverse. That meant the mobile apps’ user flows and features had to be adapted to both individual and corporate users.
Finally, our client was operating in a market where privacy regulations are strict and customer expectations towards privacy are high. So, the apps had to include strong data encryption in transit and minimize data collection.
Based on our discovery phase’s findings, we outlined our client’s key needs and requirements:
Strategic business needs
01 Meet customers’ demand for Android and iOS mobile apps for viewing live video surveillance feeds and recordings
02 Ensure compliance with privacy regulations and customer expectations
03 Minimize development costs with a cross-platform tech stack
04 Secure a user satisfaction rate above 85% across user categories
Technical requirements
01 Develop mobile apps for Android and iOS using a cross-platform tech stack (Angular, RxJS, Ionic)
02 Add the monitor view, camera grouping, and individual feed viewing
03 Implement support for viewing both live feeds and recordings
04 Ensure seamless integration with Vigilzone’s video surveillance systems via APIs
05 Implement data encryption in transit
06 Secure an application performance index (Apdex) score of at least 90
07 Keep the average response rate below 0.4 s
08 Limit the latency in real-time video streaming to <60 ms
09 Secure a system usability scale (SUS) score above 85
We can build a cross-platform app that leverages native features without sacrificing performance, scalability, or UX quality.


.webp)
Solutions
We began the project by investigating our client’s business processes and products to ensure the mobile apps integrate seamlessly into the customer experience. Based on our findings, we refined the feature list and user flows. For example, we added the snapshot feature to the footage view and streamlined switching between cameras.
To build the apps quickly and with less overhead, we opted for Angular, Ionic, and RxJS. Angular enabled optimal app performance across devices, while Ionic helped us speed up interface building with a library of ready-made components. RxJS, in turn, helped us streamline asynchronous development and improve API performance.
Vigilzone’s mobile app, Vigilzone Pro, allows users to:
- Connect to their servers via API
- View live footage from multiple cameras on a single screen
- Create and manage camera groups
- Seamlessly navigate between cameras
- View recordings of events and live footage from individual cameras
- Edit, download, and delete recordings
- Take snapshots of camera feeds
We optimized the app for high performance, even when handling multiple camera feed streams. This secured the app a 91 Apdex score, <0.3 s average response rate, and <50 ms latency for live feed streaming. The user flows were adapted to both individual and enterprise use, allowing the app to reach an 89% user satisfaction rate and an 88 system usability scale (SUS) score.



Sign-in
To uphold its security standards, our client decided against allowing users to sign up on the mobile app. Instead, customers receive their login details from the company upon purchasing the video surveillance equipment.
So, the app’s first screen requires users to log in by entering the server’s URL, password, and username. They can then select the data communication protocol (HTTP or HTTPS).
We made the login process both simple and secure with comprehensive validation rules and strong in-transit data encryption. Our UX improvements, in turn, resulted in a task success rate of 91% for this action.

Monitor view
This is where users can view live feeds from multiple cameras on a single screen by adding the desired feeds from a camera list. If needed, users can also change the order of the cameras with a simple dragging gesture that’s intuitive for smartphone users.
To facilitate working with the monitor view, we enabled users to group feeds and seamlessly navigate between them via the Groups button at the bottom of the screen.
We optimized the video streaming for the monitor view to mitigate the risk of lag or errors when displaying multiple live feeds. As a result, the monitor view displays multiple feeds smoothly even when the internet connection slows down.

Camera view
Users can tap on any camera displayed on the monitor view screen to see the individual live feed. If needed, they can activate PTZ control to change the camera’s angle, provided the camera supports this functionality.
To streamline user experience, we minimized the response time for switching between the monitor and camera views. At the same time, we added zoom-in and zoom-out buttons to allow users to get a better look at a specific part of the frame.

Recordings
Vigilzone’s video surveillance systems can automatically record footage when they detect movement or specific objects. Users can easily view recordings of these events, stored on the servers, via the app. They can also edit, delete, and download them if necessary.
We added date and time range and camera filters to the recordings page to streamline navigation and user experience. With their help, users can easily narrow down the displayed footage.
The app adapts the resolution and quality to the user’s bandwidth and device to enable smooth performance

Server management
If the user has access to multiple servers, they can add extra servers via the app’s menu by entering the same information (server address, username, and password) and selecting the protocol. Users can also delete the servers they no longer need.
To ensure the app can handle multiple servers without a hitch, we dedicated a lot of time to load and stress testing the API connections to ensure they consistently perform consistently. As a result, average response time and latency remain stable even when the app is connected to multiple servers.

Settings
The settings menu offers more than server management features. This is also where users can manage their camera groups, select the app’s language, and set the desired video quality. If needed, users can easily reset all settings to their default values.
We designed the settings screen with native UI/UX for each platform in mind. As a result, both apps’ settings are intuitive from the get-go, as reflected in the task success rate of 93% for associated user flows.

Tech stack
Impact
Thanks to the app’s high performance, scalability, and native-like user experiences, Vigilzone benefitted from:
We’ll optimize the app’s architecture and codebase to minimize video streaming latency for both live feeds and recordings


Related case study
Connect with us
.webp)
We are a tech partner that delivers ingenious digital solutions, engineering and vertical services for industry leaders powered by vetted talents.