BACK TO ARCHIVECase Study 04
2026
CASE STUDY

HawkWatch

AI-Powered Proctoring & Computer Vision Surveillance

ReactPythonComputer Vision

01 / Project Overview

A browser-based AI-powered proctoring and real-time student monitoring platform. Integrating light-weight computer vision models directly in the client browser, HawkWatch tracks eye movements, head orientation, multi-face presence, and audio triggers, securing online examinations without heavy desktop installations.

Quick Facts
Released2026
RoleLead Engineer
Core FocusScale & Speed

02 / The Challenge & Problem

Real-World Problem Statement

Online testing is plagued by academic integrity concerns. Traditional proctoring tools require invasive desktop applications that collect massive system data, raise privacy concerns, and suffer from poor cross-platform compatibility on older student laptops.

03 / The Engineering Solution

Implementation & Architectural Approach

Designed a browser-only proctoring solution using MediaPipe and TensorFlow.js. All computer vision inference (such as facial landmark tracking and gaze estimation) is executed on the student's local machine, ensuring 100% data privacy and reducing server compute costs.

04 / Technical Architecture Flow

01Local Inference Engine

Browser WebAssembly & MediaPipe

Processes student camera feed on the local GPU/WASM threads, outputting facial mesh coordinates.

02Telemetry Compiler

Offscreen Canvas Watchdog

Evaluates face angles, eye tracking lines, and ambient voice audio peaks in background workers.

03Proctor Administration Portal

React Control Room UI

Feeds incident logs, live statistics, and alert highlights to examiners via WebSockets.

05 / Key Project Features

Local Gaze Tracking

Uses local face landmark coordinates to detect if the student shifts sight away from the screen.

Multi-Face Watchdog

Flags warning signals immediately if secondary individuals enter the camera's viewport.

Audio Anomaly Logger

Analyzes microphone feeds to detect human speaking patterns and sudden volume spikes.

06 / Engineering Challenges & Mitigations

Blocker Difficulty

Running computer vision models concurrently with client exam questions caused lag on entry-level computers.

Resolution Strategy

Delegated heavy model execution to Web Workers using OffscreenCanvas, ensuring the UI main thread stays locked at 60fps.

Blocker Difficulty

Students shifting positions slightly were incorrectly flagged with cheating violations.

Resolution Strategy

Created calibration routines before exams, adjusting baseline head coordinates and gaze boundaries.

07 / Technical & Personal Learnings

01

Acquired key insights in browser-based model quantization, WebAssembly bindings, and off-thread model inference.

02

Gained deep experience in asynchronous audio-visual stream processing and real-time Socket communication.

08 / Categorized Tech Stack

Computer Vision Model

TensorFlow.js
MediaPipe Face Mesh
WebAssembly (WASM)

Frontend UI

React
Framer Motion
Tailwind CSS
OffscreenCanvas

Real-time Telemetry

Web Workers
Socket.io
WebAudio API