I have a web application that needs a real-time face-camera module. The flow is straightforward: once the user activates the webcam, the system must detect the face instantly, crop it cleanly, perform a quick enhancement (brightness, contrast, denoise) and hand the processed frame over to my prediction pipeline. Because speed is critical, I want this working fully in the browser. Detection should rely on a pre-trained model—nothing custom-trained from scratch—so feel free to tap into solutions such as MediaPipe, TensorFlow.js Face Mesh, or another lightweight alternative that can run client-side without heavy downloads. The cropped and enhanced image then heads to an existing model endpoint; you only need to format the call and feed it the image tensor/base64 that the endpoint expects. Key deliverables • A single-page web demo (Vanilla JS or a framework like React is fine) that opens the webcam, shows the live video with bounding box feedback, and streams the cropped, enhanced face to the model. • Clean, well-commented source code plus a brief README explaining how to swap in a different pre-trained detector if needed and how to point the fetch/axios call to another endpoint. • Performance benchmark indicating average FPS on a standard laptop browser and an example prediction JSON coming back from the model to prove end-to-end flow. Acceptance criteria 1. Detects and crops the primary face in under 120 ms per frame on Chrome and Firefox. 2. Enhancement visibly improves low-light frames without introducing color cast. 3. No external server is required for detection or enhancement; everything runs client-side except the final prediction call. 4. Code builds and runs with one command (`npm install && npm start`) and passes lint/tests if included. If you have prior work with WebRTC, OpenCV.js, or TensorFlow.js, that will help us move faster. Let me know what pre-trained model you plan to use and how you will keep the bundle size lean.