Computer vision

In this tutorial you learn about a real-time computer vision application, using a Quix template project.

The project uses the Transport for London (TfL) traffic cameras, known as Jam Cams, as the video input. The YOLO v8 machine learning model is used to identify various objects such as types of vehicles. Additional services count the vehicles and finally the data is displayed on a map which is part of the web UI that has been created for this project.

You'll fork the complete project from GitHub, and then create a Quix project from the forked repo, so you have a copy of the full application code running in your Quix account. You then examine the data flow through the project's pipeline, using tools provided by Quix.

See the project running in Quix See the deployed project

Technologies used

Some of the technologies used by this template project are listed here.

Infrastructure:

• Quix
• Docker
• Kubernetes

Backend:

• Confluent Cloud
• Quix Streams
• Flask
• pandas

Video capture:

• TfL API
• OpenCV

Object detection:

• YOLOv8

Frontend:

• Angular
• Typescript
• Microsoft SignalR
• Google Maps

GitHub repository

The complete code for this project can be found in the Quix GitHub repository.

Getting help

If you need any assistance while following the tutorial, we're here to help in the Quix Community.

Prerequisites

To get started make sure you have a free Quix account.

TfL account and API key

You'll also need a free TfL account.

Follow these steps to locate your TfL API key:

1. Register for a free TfL account.

2. Login and click the Products menu item.

3. You should have one product to choose from: 500 Requests per min.

4. Click 500 Requests per min.

5. Enter a name for your subscription into the box, for example "QuixFeed", and click Register.

6. You can now find your API Keys in the profile page.

Later, you'll need to configure the TfL service with your own TfL API key.

Git provider

You also need to have a Git account. This could be GitHub, Bitbucket, GitLab, or any other Git provider you are familar with, and that supports SSH keys. The simplest option is to create a free GitHub account.

Tip

While this tutorial uses an external Git account, Quix can also provide a Quix-hosted Git solution using Gitea for your own projects. You can watch a video on how to create a project using Quix-hosted Git.

If you want to use the Quix AWS S3 service (optional), you'll need to provide your credentials for accessing AWS S3.

The pipeline

There are several main stages in the pipeline:

1. TfL camera feed - TfL Camera feed or "Jam Cams". This service retrieves the raw data from the TfL API endpoint. A list of all JamCams is retrieved, along with the camera data. The camera data contains a link to a video clip from the camera. These video clips are hosted by TfL in MP4 format on AWS S3. A stream is created for each camera, and the camera data published to this stream. Using multiple streams in this way enables a solution capable of horizontal scaling, through additional topic partitions and, optionally, replicated services in a consumer group. Once the camera list has been scanned, the service sleeps for a configurable amount of time, and then repeats the previous code. This reduces the load, and also means the API limit of 500 requests per minute is not exceeded. Messages are passed to the frame grabber.

2. TfL traffic camera frame grabber - this service grabs frames from a TfL video file (MP4 format) at the rate specified. By default the grabber extracts one frame every 100 frames, which is typically one per five seconds of video. Messages are passed to the object detection service.

3. Object detection - this service uses the YOLOv8 computer vision algorthm to detect objects within a given frame.

4. Stream merge - merges the separate data streams (one for each camera) back into one, prior to sending to the UI.

5. Web UI - a UI that displays: frames with the objects that have been identified, and a map with a count of objects at each camera's location. The web UI is a web client app that uses the Quix Streaming Reader API, to read data from a Quix topic.

There are also some additional services in the pipeline:

1. Cam vehicles - calculates the total vehicles, where vehicle is defined as one of: car, 'bus', 'truck', 'motorbike'. This number is published to its utput topic. The Max vehicle window service subscribes to this topic.

2. Max vehicle window - calculates the total vehicles over a time window of one day. This service publishes messages its output topic.

3. Data buffer - this provides a one second data buffer. This helps reduce load on the Data API service.

4. Data API - this REST API service provides the following endpoints:

   • max_vehicles - last known maximum vehicle count for each camera. 24 hour rolling window.
   • detected_objects - output from the computer vision service for all cameras. excludes images
   • vehicles - the last known vehicle count for each camera
   • image - the last image from the specified camera

   This API is called by the UI to obtain useful data.

5. S3 - stores objects in Amazon Web Services (AWS) S3. This service enables you to persist any data or results you might like to keep more permanently.

More details are provided on all these services later in the tutorial.

The parts of the tutorial

This tutorial is divided up into several parts, to make it a more manageable learning experience. The parts are summarized here:

1. Get the project - you get the project up and running in your Quix account.

2. TfL camera feed service. You examine the code and then see how to view the message data format used in the service, in real time.

3. Frame grabber service. You examine the code and then see how to view the message data format used in the service, in real time.

4. Object detection service. This is the YOLO v8 logic that identifies and annotates the objects identified in the frame. You examine the code and then see how to view the message data format used in the service, in real time.

5. Web UI service. This is a web client app that uses the Quix Streaming Reader API to read data from a Quix topic (the output of the stream merge service). There are various UI components that are beyond the scope of this tutorial.

6. Other services. The other services are fairly simple so are collected together for discussion. You can optionally investigate the message data format and code.

7. Add new service. You add a new service to a feature branch, test it, and then merge to the tutorial branch.

8. Summary. In this concluding part you are presented with a summary of the work you have completed, and also some next steps for more advanced learning about Quix.

🏃‍♀️ Next step

Part 1 - Get the project