Add webcam capture as an alternative to file upload

[savniagrawal1701]

Problem
UploadBox.jsx currently only supports drag-and-drop and file-browser selection. For a passport-photo tool, a large number of users won't have a pre-existing photo that meets specs (plain background, correct framing) — they need to take one fresh, often on the spot at a kiosk or shared computer. Right now there's no way to do that without first using a separate camera app and then uploading the result.

Proposed solution

• Add a "Take Photo" option alongside the existing drag-and-drop area in UploadBox.jsx (or as a toggle/tab: Upload vs Use Camera).
• Use the navigator.mediaDevices.getUserMedia() API to open a live camera preview in a modal or inline panel.
• Let the user capture a still frame (canvas snapshot from the video stream), preview it, and either retake or confirm.
• On confirm, convert the canvas output to a File/Blob and feed it into the same usePhotoUpload pipeline already used for uploaded files, so downstream validation/processing doesn't need to change.
• Handle and message the cases where camera permission is denied or no camera is available.

Acceptance criteria

• "Take Photo" entry point added to UploadPage/UploadBox
• Live camera preview with capture button
• Captured frame shown for confirm/retake before proceeding
• Captured image enters the same validation + upload flow as a normal file upload
• Permission-denied / no-camera-found states handled with clear user feedback
• Feature degrades gracefully (hidden or disabled) on browsers/devices without camera API support

Labels suggestion: frontend, enhancement

[variantbyx]

I want to work on this issue, please assign it to me.