Surveillance system app: Reducing development costs by 23% with Angular, RxJS, and Ionic
.svg)
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.
Talk to an expert.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
Contact usTestimonials
The responsiveness, attention to detail and high-level communication from Darly Solutions was outstanding. Communication with the team was all online and was absolutely seamless. They were highly responsive, worked to tight deadlines and provided great feedback and communication throughout the entire project to ensure it remained on schedule and all quality requirements were being met. They exceeded all of our expectations, from design through to delivery.
LLC Darly Solutions's team performs well since the collaboration started. They are fluent in specific programming languages, they are also fluent in English, and they have a great response time. What is most unique and impressive about Darly Solutions is that everyone in the team is inherently communicative and understands the expertise of their respective fields. The team is very agile and can predict stress situations in which we work together to fix and maintain.
Darly Solutions' work so far inspires confidence, as they're skilled and trustworthy. The health platform is incredibly happy with their work. The team at Darly is communicative, responsive, and responsible. I’d recommend them to people looking to do more than build a simple little software.
By collaborating with Darly Solutions, there is a significant improvement in the project's quality of codes compared to their original codebase. They lead efficient project management and keep the client updated with their reports. They're a flexible team that delivers promising results. They don't just do as they're told, they actively participate in the design process, which is going to yield us a much better platform in the end.
Darly Solutions was able to develop the site with all functions running. The team was responsive throughout the engagement. They excelled at scheduling and delivered projects on the specified timeline. The whole team was a pleasure to work with. I am very glad that I entrusted them with my project, this is the best company for me!
The quality of their work is very high, and we get very good customer feedback on what our site looks like. They're very reliable and have a great overview of the technologies they're using. They meet our deadlines and are very accurate with their time estimations on a project. In addition, they're responsive and great with communication with a great command of English — it's very easy to talk to them. Moreover, we've integrated them into our development and scrum process, where we have daily stand-ups with their project manager and developers through Slack.
LLC Darly Solutions are highly skilled at UI/UX and follow very good engineering standards, and have been very professional in its approach to all the work to date (including the initial consultancy, which was the deciding factor). They have taken ownership of the work in way that demonstrates how much they value the work they are doing and consequently the work we are doing. I am gaining confidence that the decisions they make are good decisions and that this will result in a product that will exceed our initial expectations.
Darly Solutions developed the app in a quick manner, and the code quality was excellent. The professional team was committed to building a successful product. The code quality was good, and the app has been built in a little more than 1 month, which is a result I'm very happy with. They were laid back but professional at the same time.
Darly Solutions’ work helped my business tremendously. They were able to identify key areas for growth and improvement. The team was communicative and professional throughout the entire engagement. LLC Darly Solutions is a solutions-oriented vendor that drives results. They’re really professional and they know what they’re doing. The team knows how to identify my problems and solve them.
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.
