Table of contents
Open Table of contents
Description
This project demonstrates a real-time object detection system using a C++ WebSocket server with YOLO model for object detection, and a React client with Webcam integration for capturing and sending video frames. The server uses OpenCV to process frames and the YOLO model for detecting objects in the video stream.
Source code can be found here.
Running Locally
Prerequisites
- C++ compiler (Clang or GCC)
- Node.js & npm (for React client)
Steps
-
Clone the repository
git clone https://github.com/martishin/react-cpp-object-detection cd react-cpp-object-detection
-
Install and configure vcpkg
Navigate to the server folder and install vcpkgcd server git clone https://github.com/microsoft/vcpkg.git cd vcpkg ./bootstrap-vcpkg.sh cd .. export VCPKG_ROOT=$(pwd)/vcpkg
-
Install server dependencies
vcpkg install
-
Build and run the WebSocket server (C++)
make run-server
-
Running the React client
Navigate to the client folder and install dependencies:cd ../client npm install npm run dev
The client will be running at
http://localhost:5173/
.
Technologies Used
- C++ (Server): For real-time frame processing and object detection using OpenCV and YOLO.
- React (Client): For capturing video frames and displaying object detection results.
- WebSockets: For efficient, low-latency, real-time communication between the client and the server.
- YOLO: A state-of-the-art object detection model.
- OpenCV: A popular computer vision library for image and video processing.