PRAMAN Edge Proctoring

A lightweight, real-time, browser-based proctoring system built with React, Vite, and Google MediaPipe.

This project fulfills the requirement for an Edge-First implementation. By running the AI models entirely client-side via WebAssembly, it achieves ultra-low latency, protects user privacy (no video is streamed to a backend), and avoids server-side processing bottlenecks.

Core Features

• Multiple Face Detection: Continuously monitors the webcam feed. If more than one face enters the frame (e.g., a roommate looking at the screen), the system instantly flags an intruder and triggers a "Cheating Detected: Multiple Faces" violation.
• Gaze & Head Pose Tracking: Calculates the 3D pitch and yaw of the primary user's head. If the user looks away from the screen for more than 5 continuous seconds, it triggers a "Cheating Detected: Looking Away" lock-out violation.
• Micro-Debounced Tracking: Safely filters out brief tracking losses (e.g., blinking, adjusting glasses, or 16ms hardware stutters) to prevent false-positive UI flickering.
• Complete Aversion Security: If the user completely covers their camera or stands up and leaves the desk, the system registers this as a continuous aversion and triggers the 5-second violation fuse.
• Developer vs. Student Modes: Toggle between a clean, lockdown UI for students, and a rich telemetry UI for developers that exposes raw millisecond-precision coordinate tracking and frame data.

Technology Stack

• Framework: React 18 with TypeScript
• Build Tool: Vite
• AI/ML Engine: Google MediaPipe Tasks Vision (@mediapipe/tasks-vision)
• Styling: Pure CSS with custom variables and micro-animations

Setup Instructions

Prerequisites

• Node.js (v18 or higher recommended)
• A modern browser with webcam access (Chrome, Edge, Firefox, Safari)

Installation

1. Clone the repository:

   git clone https://github.com/Samyagya/edge-proctoring.git
   cd edge-proctoring/proctoring-app

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser: Navigate to the local URL provided by Vite (usually http://localhost:5173). Note: You must grant the browser permission to access your camera.

How It Works (Architecture Highlights)

• Pure Client-Side AI: The MediaPipe FaceLandmarker model is downloaded to the browser on the first load and runs entirely on the client's CPU/GPU.
• The Bounding Box Sorter: When multiple faces are detected, the system calculates the pixel area of each face's bounding box. The largest face is locked as the primary student (Index 0), preventing the AI from accidentally tracking an intruder in the background.
• CSS / JS Coordinate Sync: To maintain mathematical perfection across responsive window resizing, the JavaScript drawing canvas synchronizes its intrinsic resolution with the raw camera hardware on every frame, while CSS object-fit: cover perfectly aligns the UI overlay to the video feed.

Deliverables Checklist

• Multiple Face Detection (Instant Violation)
• Gaze / Head Pose Tracking (5-Second Fuse)
• Edge-First Architecture (Pure JavaScript/React)
• Clean, well-commented code
• Comprehensive README
• Screen-recording video