Telecom: Video Capturing and Proxying to a Webpage

Results

Teaming up with the HQSoftware development team, the client delivered a powerful solution that allows for capturing video from cameras and reformatting the stream into web-friendly formats that can be embedded in web pages. The software is also capable of analyzing the video to recognize various objects, such as moving cars, pedestrians, or license plates.

Challenge

The client is building an IoT platform with a VoD module, processing data from cameras directly and VMs.

The client needed a solution that allowed for connections to video cameras and server storage to pull the video and proxy the content to the webpage through a video frame.

The user can put the video stream on other websites simply by accessing the code snippet, then copying and pasting it into the webpage.

During the process, the development team had to address the following tasks:

• Capturing the video stream
• Proxying the video into a format supported by browsers
• Allowing the addition of new ONVIF (direct access through Open Network Video Interface Protocol) and VMS (Video Management System) hardware
• Importing and exporting camera data
• Multithreading of video streams

Solution

To address the customer’s issues, the HQSoftware team implemented a video module as a standalone dockerized web application. To make future horizontal scaling easier down the road, the web application is decoupled from the main IoT platform.

The solution allows for configuring cameras through the web interface and pulling the video stream to use it on web pages. These video streams can also be viewed by multiple users at the same time.

Functionality

The HQSoftware development team implemented the following features for the app:

Camera configuration. Users can add cameras to the system manually through the web application, or import the information in a CSV file of a predefined format. The parameters required:
– Video source type: VMS or ONVIF
– Source RTSP URL and authentication parameters for the camera RTSP stream (ONVIF)
– VMS IP address, authentication parameters, camera identifier (VMS)
– Camera GPS coordinates

List of cameras. After configuring the cameras, users are able to view them in a list format, which shows each camera’s ID, location, source, and URL. In addition, they can copy the snippet of the HTML code.

Camera code snippet. Each camera has an HTML code snippet that users can view, copy, and paste into other web pages.

Embedded streaming. A major challenge of the project was making the video stream viewable on web pages. To address it, the HQSoftware team implemented a module that launches the FFmpeg process to transcode the RTSP stream to HLS.

The transcoding process happens when there’s no one watching the stream; this helps save computing power for running the module.

Specific features

Multithreading. Another outstanding feature the team built is the ability to view video streaming of each device on several devices, for all kinds of purposes.

Object recognition. HQSoftware developers integrated open-source AI technology to enable object recognition on edge computing devices — in this case, cameras. The system is able to detect pedestrians, moving cars, or license plates.

The software takes the RTSP stream, runs a neural network cascade over each frame of the video, and then streams the video along with the recognized metadata. To store the data, the team relies on AWS infrastructure.

Backend and frontend

To make sure the software solution offers top-notch performance, the HQSoftware developers built:

• A Python and Node.js-based backend to handle video-processing, proxying, and object recognition.
• A React.js dashboard for users to utilize the software: set up cameras, import and export data, and extract code snippets.
• AWS, utilized for data storage.

Methodology

As the product is being constantly shaped by customer insights, the team adopted the Agile methodology to quickly incorporate new requirements. The biweekly pace of deliverables allows the customers to stay in control of how their unique vision feeds into the product.

Have a similar project in mind? Check out our video solutions development services.