Custom React Hooks

Custom React Hooks

ProctorAI utilizes several custom React hooks to encapsulate complex logic for hardware monitoring, anti-cheat detection, and responsive behavior. These hooks ensure that the exam environment remains secure while providing a seamless user experience.

useMobile

A responsive utility hook used to detect if the user is accessing the platform via a mobile device. This is primarily used to adjust the proctoring dashboard layout and exam interface for smaller screens.

Usage:

import { useMobile } from "@/hooks/use-mobile";

const MyComponent = () => {
  const isMobile = useMobile();

  return (
    <div>
      {isMobile ? <MobileView /> : <DesktopView />}
    </div>
  );
};

useMediaStream

This hook manages the lifecycle of the user's camera and microphone. It handles permission requests, stream initialization, and cleanup. It also includes logic for calculating real-time audio levels, which is used to detect suspicious background noise.

Public Interface:

• stream: The active MediaStream object.
• error: Error state if permissions are denied or hardware is unavailable.
• audioLevel: A numeric value (0-100) representing current microphone volume.
• stopStream: Function to manually terminate all media tracks.

Usage:

const { stream, error, audioLevel, stopStream } = useMediaStream({
  video: true,
  audio: true
});

useEffect(() => {
  if (error) {
    toast.error("Camera access is required for proctoring.");
  }
}, [error]);

useProctoring

The core hook for enforcing exam integrity. It abstracts the "Anti-Cheat" logic, monitoring browser-level events and user behavior that might indicate a violation.

Capabilities:

• Tab Visibility: Detects when a student switches tabs or minimizes the browser.
• Fullscreen Enforcement: Monitors if the user exits fullscreen mode.
• Input Blocking: Prevents unauthorized actions like copy, paste, cut, and right-click context menus.
• Event Logging: Returns a log of all proctoring warnings triggered during the session.

Usage:

const { warnings, tabSwitchCount, isFullscreen } = useProctoring({
  enabled: phase === "exam",
  onViolation: (violationType) => {
    console.warn(`Violation detected: ${violationType}`);
  }
});

useFaceDetection (Internal Logic)

While currently integrated into the exam flow, this logic functions as an internal hook to analyze webcam frames via canvas pixel analysis. It provides a lightweight approximation of user presence without requiring heavy external ML libraries.

Role:

• Periodically captures frames from the video stream.
• Analyzes canvas data to determine if a face is likely present.
• Triggers a face_absence or multiple_faces alert if the visual state changes.

useExamTimer

A specialized hook for managing the high-stakes countdown during an examination. It persists the remaining time and triggers specific UI feedback (like "sonner" toasts) when time is running low.

Usage:

const { timeLeft, formatTime, isExpired } = useExamTimer({
  initialMinutes: 90,
  onExpire: () => {
    setPhase("submitted");
  }
});

Implementation Details & Best Practices

• Resource Cleanup: All media-related hooks implement strict cleanup logic within useEffect to ensure that cameras and microphones are turned off immediately when the user navigates away from the exam or dashboard.
• Simulated Real-time: Dashboard hooks utilize setInterval logic to simulate the dynamic "Risk Score" updates and "Live Alert" feeds found in the proctoring prototype.
• Error Handling: Hardware hooks are designed to catch NotAllowedError (user denied permission) and NotFoundError (device not plugged in), allowing the UI to guide the student through troubleshooting.