Computer Vision in the Browser: Building a Live OMR Scanner with OpenCV

Optical Mark Recognition (OMR) isn't new—we've all filled out those bubble sheets for tests. But traditional OMR systems are slow, require massive hardware scanners, and cost a fortune.

I wanted to see if I could build a Real-Time OMR Scanner using just a standard webcam, Python, and OpenCV. Here's how I did it.

🧠 The Tech Stack

• Python (The backbone)
• OpenCV (For image processing and contour detection)
• Flask (To serve the live camera feed and UI)
• SQLite (To log the scanned results instantly)

📷 The Challenge: Dealing with Live Video

The biggest hurdle with live video is that hands shake, lighting changes, and paper bends.
To solve this, I had to build a robust image processing pipeline:

1. Grayscale Conversion: Simplify the image data.
2. Gaussian Blur: Remove camera noise.
3. Canny Edge Detection: Find the edges of the paper.
4. Perspective Transformation: "Flatten" the paper digitally so the bubbles are perfectly aligned, regardless of the camera angle.

🎯 Detecting the Bubbles

Once the paper was digitally flattened, I used OpenCV contour detection to isolate the bubbles. By analyzing the pixel density inside each contour, I could determine which bubble was "filled in" (it would have significantly more dark pixels than the others).

🚀 The Result

The system can now scan a bubble sheet instantly via a live webcam feed, calculate the score, and export the data directly to a CSV or SQLite database in milliseconds.

Have you ever worked with OpenCV for real-time video processing? What was the hardest part for you? Drop a comment below!