@arfuhad/react-native-smart-camera 0.1.2 → 0.1.5

package/src/detection/staticImageDetector.ts

@@ -0,0 +1,53 @@
+import type { Face, StaticImageOptions } from '../types';
+
+/**
+ * Default options for static image face detection
+ */
+const DEFAULT_OPTIONS: Partial<StaticImageOptions> = {
+  performanceMode: 'accurate',
+  landmarkMode: 'none',
+  contourMode: 'none',
+  classificationMode: 'none',
+  minFaceSize: 0.15,
+  trackingEnabled: false,
+};
+
+/**
+ * Detect faces in a static image
+ * 
+ * NOTE: Static image detection is currently not supported in the frame processor-only version.
+ * This feature requires native module implementation.
+ * For real-time face detection, use the `detectFaces` function with VisionCamera frame processor.
+ * 
+ * @param options - Image source and detection options
+ * @returns Promise resolving to array of detected faces
+ * 
+ * @example
+ * ```tsx
+ * // This feature is not yet implemented
+ * // For real-time detection, use:
+ * import { detectFaces } from '@arfuhad/react-native-smart-camera';
+ * 
+ * const frameProcessor = useFrameProcessor((frame) => {
+ *   'worklet';
+ *   const faces = detectFaces(frame);
+ * }, []);
+ * ```
+ */
+export async function detectFacesInImage(options: StaticImageOptions): Promise<Face[]> {
+  const mergedOptions: StaticImageOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+  };
+
+  // TODO: Implement static image detection
+  // This requires either:
+  // 1. A separate native module for static image processing
+  // 2. Using react-native-ml-kit directly
+  console.warn(
+    '[SmartCamera] Static image detection is not yet implemented. ' +
+    'For real-time face detection, use the detectFaces function with VisionCamera frame processor.'
+  );
+  
+  return [];
+}

package/src/hooks/index.ts

@@ -0,0 +1,26 @@
+// Camera management
+export { useSmartCamera, getAvailableCameras } from './useSmartCamera';
+
+// Face detection
+export { useFaceDetection, type UseFaceDetectionOptions } from './useFaceDetection';
+export { 
+  useFaceDetector, 
+  useFaceDetectorWithCallback,
+  type UseFaceDetectorOptions,
+  type UseFaceDetectorResult,
+  type UseFaceDetectorWithCallbackOptions,
+  type FaceDetectionCallback,
+} from './useFaceDetector';
+
+// Eye/Blink detection
+export { useBlinkDetection, type UseBlinkDetectionOptions } from './useBlinkDetection';
+
+// WebRTC video calling
+export { useWebRTC } from './useWebRTC';
+export type { UseWebRTCOptions, UseWebRTCResult } from './useWebRTC';
+export { useWebRTCWithDetection } from './useWebRTCWithDetection';
+export type { UseWebRTCWithDetectionOptions } from './useWebRTCWithDetection';
+export type { UseWebRTCWithDetectionResult } from './useWebRTCWithDetection';
+
+// Legacy WebRTC hook (deprecated, use useWebRTC instead)
+export { useSmartCameraWebRTC, type UseSmartCameraWebRTCOptions } from './useSmartCameraWebRTC';

package/src/hooks/useBlinkDetection.ts

@@ -0,0 +1,127 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { Face, EyeStatusResult, UseBlinkDetectionResult } from '../types';
+
+/**
+ * Options for useBlinkDetection hook
+ */
+export interface UseBlinkDetectionOptions {
+  /** Whether eye tracking is enabled. Default: true */
+  enabled?: boolean;
+  
+  /** Threshold below which an eye is considered closed (0-1). Default: 0.5 */
+  eyeClosedThreshold?: number;
+  
+  /** Callback when eye status changes */
+  onEyeStatusChange?: (status: EyeStatusResult) => void;
+}
+
+/**
+ * Hook for tracking eye status from detected faces
+ * 
+ * This hook provides real-time eye open/closed status based on face detection results.
+ * The user can set their own threshold for determining when an eye is considered closed.
+ * 
+ * @param options - Eye tracking options
+ * @returns Eye status and controls
+ * 
+ * @example
+ * ```tsx
+ * function EyeTracker() {
+ *   const { eyeStatus, processEyeStatus } = useBlinkDetection({
+ *     eyeClosedThreshold: 0.3, // Consider eye closed when probability < 0.3
+ *     onEyeStatusChange: (status) => {
+ *       // Handle blink detection yourself based on status
+ *       if (status.leftEye.isClosed && status.rightEye.isClosed) {
+ *         console.log('Both eyes closed!');
+ *       }
+ *     },
+ *   });
+ *   
+ *   // In your face detection callback:
+ *   const handleFaces = (faces: Face[]) => {
+ *     processEyeStatus(faces);
+ *   };
+ *   
+ *   return (
+ *     <View>
+ *       <Text>Left Eye: {eyeStatus?.leftEye.openProbability.toFixed(2)}</Text>
+ *       <Text>Right Eye: {eyeStatus?.rightEye.openProbability.toFixed(2)}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useBlinkDetection(
+  options: UseBlinkDetectionOptions = {}
+): UseBlinkDetectionResult {
+  const { 
+    enabled = true, 
+    eyeClosedThreshold = 0.5, 
+    onEyeStatusChange 
+  } = options;
+  
+  const [eyeStatus, setEyeStatus] = useState<EyeStatusResult | null>(null);
+  const callbackRef = useRef(onEyeStatusChange);
+
+  // Keep callback ref updated
+  useEffect(() => {
+    callbackRef.current = onEyeStatusChange;
+  }, [onEyeStatusChange]);
+
+  // Process faces to get eye status (call this from JS thread with detected faces)
+  const processEyeStatus = useCallback((faces: Face[]) => {
+    if (!enabled || faces.length === 0) {
+      return;
+    }
+
+    // Use the first face (most prominent)
+    const face = faces[0];
+
+    // Ensure we have eye classification data
+    if (
+      face.leftEyeOpenProbability === undefined ||
+      face.rightEyeOpenProbability === undefined
+    ) {
+      return;
+    }
+
+    const leftOpenProbability = face.leftEyeOpenProbability;
+    const rightOpenProbability = face.rightEyeOpenProbability;
+    const now = Date.now();
+
+    const status: EyeStatusResult = {
+      leftEye: {
+        openProbability: leftOpenProbability,
+        isClosed: leftOpenProbability < eyeClosedThreshold,
+      },
+      rightEye: {
+        openProbability: rightOpenProbability,
+        isClosed: rightOpenProbability < eyeClosedThreshold,
+      },
+      faceId: face.trackingId,
+      timestamp: now,
+    };
+
+    setEyeStatus(status);
+    callbackRef.current?.(status);
+  }, [enabled, eyeClosedThreshold]);
+
+  // Reset eye status
+  const reset = useCallback(() => {
+    setEyeStatus(null);
+  }, []);
+
+  // Reset on disable
+  useEffect(() => {
+    if (!enabled) {
+      reset();
+    }
+  }, [enabled, reset]);
+
+  return {
+    eyeStatus,
+    processEyeStatus,
+    reset,
+  };
+}
+

package/src/hooks/useFaceDetection.ts

@@ -0,0 +1,105 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { Face, FaceDetectionOptions, UseFaceDetectionResult } from '../types';
+
+/**
+ * Options for useFaceDetection hook
+ */
+export interface UseFaceDetectionOptions extends FaceDetectionOptions {
+  /** Whether detection is enabled. Default: true */
+  enabled?: boolean;
+  
+  /** Maximum number of faces to track. Default: 5 */
+  maxFaces?: number;
+  
+  /** Callback when faces change */
+  onFacesChanged?: (faces: Face[]) => void;
+}
+
+/**
+ * Hook for managing face detection state
+ * 
+ * Use this hook to get face detection results outside of the SmartCamera component.
+ * 
+ * @param options - Face detection options
+ * @returns Face detection state
+ * 
+ * @example
+ * ```tsx
+ * function FaceTracker() {
+ *   const { faces, isDetecting } = useFaceDetection({
+ *     performanceMode: 'fast',
+ *     classificationMode: 'all',
+ *     onFacesChanged: (faces) => {
+ *       console.log('Detected faces:', faces.length);
+ *     },
+ *   });
+ *   
+ *   return (
+ *     <View>
+ *       <Text>Faces detected: {faces.length}</Text>
+ *       {faces.map((face, i) => (
+ *         <Text key={i}>
+ *           Smiling: {(face.smilingProbability ?? 0) * 100}%
+ *         </Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useFaceDetection(options: UseFaceDetectionOptions = {}): UseFaceDetectionResult {
+  const { enabled = true, maxFaces = 5, onFacesChanged } = options;
+  
+  const [faces, setFaces] = useState<Face[]>([]);
+  const [isDetecting, setIsDetecting] = useState(false);
+  const facesRef = useRef<Face[]>([]);
+  const callbackRef = useRef(onFacesChanged);
+
+  // Keep callback ref updated
+  useEffect(() => {
+    callbackRef.current = onFacesChanged;
+  }, [onFacesChanged]);
+
+  // Update faces (called from frame processor via native bridge)
+  const updateFaces = useCallback((newFaces: Face[]) => {
+    // Limit number of faces
+    const limitedFaces = newFaces.slice(0, maxFaces);
+    
+    // Only update if faces changed
+    const facesChanged = 
+      limitedFaces.length !== facesRef.current.length ||
+      limitedFaces.some((face, i) => face.trackingId !== facesRef.current[i]?.trackingId);
+    
+    if (facesChanged) {
+      facesRef.current = limitedFaces;
+      setFaces(limitedFaces);
+      callbackRef.current?.(limitedFaces);
+    }
+  }, [maxFaces]);
+
+  // Detection state management
+  const startDetecting = useCallback(() => {
+    setIsDetecting(true);
+  }, []);
+
+  const stopDetecting = useCallback(() => {
+    setIsDetecting(false);
+    setFaces([]);
+    facesRef.current = [];
+  }, []);
+
+  // Effect to manage detection state based on enabled prop
+  useEffect(() => {
+    if (enabled) {
+      startDetecting();
+    } else {
+      stopDetecting();
+    }
+  }, [enabled, startDetecting, stopDetecting]);
+
+  return {
+    faces,
+    isDetecting,
+  };
+}
+

package/src/hooks/useFaceDetector.ts

@@ -0,0 +1,191 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+import { useRunOnJS } from 'react-native-worklets-core';
+import type { Frame } from 'react-native-vision-camera';
+import { detectFaces } from '../detection/faceDetector';
+import type { Face, FaceDetectionOptions, CameraFacing } from '../types';
+
+/**
+ * Face detection options for useFaceDetector hook
+ * Matches the API of react-native-vision-camera-face-detector
+ */
+export interface UseFaceDetectorOptions extends FaceDetectionOptions {
+  /**
+   * Current active camera
+   * @default 'front'
+   */
+  cameraFacing?: CameraFacing;
+
+  /**
+   * Should handle auto scale on native side?
+   * If disabled, results are relative to frame coordinates, not screen/preview.
+   * Don't use this if you want to draw with Skia Frame Processor.
+   * @default false
+   */
+  autoMode?: boolean;
+
+  /**
+   * Screen width for coordinate scaling (required when autoMode is true)
+   * @default 1.0
+   */
+  windowWidth?: number;
+
+  /**
+   * Screen height for coordinate scaling (required when autoMode is true)
+   * @default 1.0
+   */
+  windowHeight?: number;
+}
+
+/**
+ * Return type for useFaceDetector hook
+ */
+export interface UseFaceDetectorResult {
+  /**
+   * Detect faces in a frame (for use in frame processor)
+   */
+  detectFaces: (frame: Frame) => Face[];
+}
+
+/**
+ * Hook for face detection in VisionCamera frame processors.
+ * 
+ * This hook provides a `detectFaces` function that can be used directly
+ * in a frame processor to detect faces in each frame.
+ * 
+ * @param options - Face detection options
+ * @returns Object with detectFaces function
+ * 
+ * @example
+ * ```tsx
+ * import { useFaceDetector } from '@arfuhad/react-native-smart-camera';
+ * import { useFrameProcessor } from 'react-native-vision-camera';
+ * import Worklets from 'react-native-worklets-core';
+ * 
+ * function FaceDetectionCamera() {
+ *   const { detectFaces } = useFaceDetector({
+ *     performanceMode: 'fast',
+ *     classificationMode: 'all', // Required for blink detection
+ *   });
+ *   
+ *   const handleFaces = Worklets.createRunOnJS((faces: Face[]) => {
+ *     console.log('Detected faces:', faces.length);
+ *     // Check for blinks using leftEyeOpenProbability / rightEyeOpenProbability
+ *   });
+ *   
+ *   const frameProcessor = useFrameProcessor((frame) => {
+ *     'worklet';
+ *     const faces = detectFaces(frame);
+ *     handleFaces(faces);
+ *   }, [detectFaces, handleFaces]);
+ *   
+ *   return <Camera frameProcessor={frameProcessor} />;
+ * }
+ * ```
+ */
+export function useFaceDetector(options: UseFaceDetectorOptions = {}): UseFaceDetectorResult {
+  const optionsRef = useRef(options);
+  
+  // Keep options ref updated
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  
+  // Create detect function that uses current options
+  const detect = useCallback((frame: Frame): Face[] => {
+    'worklet';
+    return detectFaces(frame, {
+      performanceMode: optionsRef.current.performanceMode,
+      landmarkMode: optionsRef.current.landmarkMode,
+      contourMode: optionsRef.current.contourMode,
+      classificationMode: optionsRef.current.classificationMode,
+      minFaceSize: optionsRef.current.minFaceSize,
+      trackingEnabled: optionsRef.current.trackingEnabled,
+      cameraFacing: optionsRef.current.cameraFacing,
+      autoMode: optionsRef.current.autoMode,
+      windowWidth: optionsRef.current.windowWidth,
+      windowHeight: optionsRef.current.windowHeight,
+    });
+  }, []);
+  
+  return {
+    detectFaces: detect,
+  };
+}
+
+/**
+ * Callback type for face detection
+ */
+export type FaceDetectionCallback = (faces: Face[]) => void;
+
+/**
+ * Options for useFaceDetectorWithCallback hook
+ */
+export interface UseFaceDetectorWithCallbackOptions extends UseFaceDetectorOptions {
+  /**
+   * Callback when faces are detected
+   */
+  onFacesDetected?: FaceDetectionCallback;
+}
+
+/**
+ * Hook for face detection with automatic callback handling
+ * 
+ * This is a convenience hook that wraps useFaceDetector and automatically
+ * calls your callback function when faces are detected.
+ * 
+ * @param options - Face detection options with callback
+ * @returns Object with detectFaces function for use in frame processor
+ * 
+ * @example
+ * ```tsx
+ * import { useFaceDetectorWithCallback } from '@arfuhad/react-native-smart-camera';
+ * 
+ * function FaceDetectionCamera() {
+ *   const [faces, setFaces] = useState<Face[]>([]);
+ *   
+ *   const { detectFaces } = useFaceDetectorWithCallback({
+ *     classificationMode: 'all',
+ *     onFacesDetected: (detectedFaces) => {
+ *       setFaces(detectedFaces);
+ *     },
+ *   });
+ *   
+ *   const frameProcessor = useFrameProcessor((frame) => {
+ *     'worklet';
+ *     detectFaces(frame); // Automatically calls onFacesDetected
+ *   }, [detectFaces]);
+ *   
+ *   return <Camera frameProcessor={frameProcessor} />;
+ * }
+ * ```
+ */
+export function useFaceDetectorWithCallback(
+  options: UseFaceDetectorWithCallbackOptions = {}
+): UseFaceDetectorResult {
+  const { onFacesDetected, ...detectorOptions } = options;
+  const { detectFaces: baseDet } = useFaceDetector(detectorOptions);
+  const callbackRef = useRef(onFacesDetected);
+  
+  useEffect(() => {
+    callbackRef.current = onFacesDetected;
+  }, [onFacesDetected]);
+  
+  // Create runOnJS callback
+  const handleFacesDetected = useRunOnJS((faces: Face[]) => {
+    callbackRef.current?.(faces);
+  }, []);
+  
+  const detectWithCallback = useCallback((frame: Frame): Face[] => {
+    'worklet';
+    const faces = baseDet(frame);
+    if (faces.length > 0 || callbackRef.current) {
+      handleFacesDetected(faces);
+    }
+    return faces;
+  }, [baseDet, handleFacesDetected]);
+  
+  return {
+    detectFaces: detectWithCallback,
+  };
+}
+

package/src/hooks/useSmartCamera.ts

@@ -0,0 +1,83 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useCameraDevice, useCameraPermission, Camera } from 'react-native-vision-camera';
+import type { CameraFacing, UseSmartCameraResult, CameraDevice } from '../types';
+
+/**
+ * Hook for managing SmartCamera state and permissions
+ * 
+ * @returns Camera state, permission handlers, and device info
+ * 
+ * @example
+ * ```tsx
+ * function CameraScreen() {
+ *   const { 
+ *     hasPermission, 
+ *     requestPermission, 
+ *     device, 
+ *     switchCamera,
+ *     currentCamera 
+ *   } = useSmartCamera();
+ *   
+ *   if (!hasPermission) {
+ *     return <Button onPress={requestPermission} title="Grant Permission" />;
+ *   }
+ *   
+ *   return <SmartCamera camera={currentCamera} />;
+ * }
+ * ```
+ */
+export function useSmartCamera(): UseSmartCameraResult {
+  const [currentCamera, setCurrentCamera] = useState<CameraFacing>('front');
+  const { hasPermission, requestPermission: requestCameraPermission } = useCameraPermission();
+  const nativeDevice = useCameraDevice(currentCamera);
+
+  // Map native device to our CameraDevice type
+  const device: CameraDevice | undefined = useMemo(() => {
+    if (!nativeDevice) return undefined;
+
+    return {
+      id: nativeDevice.id,
+      name: nativeDevice.name,
+      position: nativeDevice.position === 'front' ? 'front' : 'back',
+      hasFlash: nativeDevice.hasFlash,
+      hasTorch: nativeDevice.hasTorch,
+      supportsLowLightBoost: nativeDevice.supportsLowLightBoost,
+    };
+  }, [nativeDevice]);
+
+  // Request camera permission
+  const requestPermission = useCallback(async (): Promise<boolean> => {
+    const result = await requestCameraPermission();
+    return result;
+  }, [requestCameraPermission]);
+
+  // Switch between front and back camera
+  const switchCamera = useCallback(() => {
+    setCurrentCamera((prev) => (prev === 'front' ? 'back' : 'front'));
+  }, []);
+
+  return {
+    hasPermission,
+    requestPermission,
+    device,
+    switchCamera,
+    currentCamera,
+  };
+}
+
+/**
+ * Get all available camera devices
+ */
+export async function getAvailableCameras(): Promise<CameraDevice[]> {
+  const devices = await Camera.getAvailableCameraDevices();
+  
+  return devices.map((device) => ({
+    id: device.id,
+    name: device.name,
+    position: device.position === 'front' ? 'front' : 'back',
+    hasFlash: device.hasFlash,
+    hasTorch: device.hasTorch,
+    supportsLowLightBoost: device.supportsLowLightBoost,
+  }));
+}
+

package/src/hooks/useSmartCameraWebRTC.ts

@@ -0,0 +1,120 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { WebRTCConfig, UseSmartCameraWebRTCResult, CameraFacing } from '../types';
+
+/**
+ * Options for useSmartCameraWebRTC hook
+ */
+export interface UseSmartCameraWebRTCOptions extends Omit<WebRTCConfig, 'enabled'> {
+  /** Initial camera facing. Default: 'front' */
+  initialCamera?: CameraFacing;
+  
+  /** Callback when streaming state changes */
+  onStreamingStateChange?: (isStreaming: boolean) => void;
+  
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Hook for managing WebRTC streaming with SmartCamera
+ * 
+ * NOTE: This is a stub implementation. WebRTC functionality is not yet implemented.
+ * The hook provides the interface but does not perform actual streaming.
+ * 
+ * @param options - WebRTC configuration options
+ * @returns WebRTC streaming controls and state
+ * 
+ * @example
+ * ```tsx
+ * function VideoCall() {
+ *   const peerConnection = useRef(new RTCPeerConnection(config)).current;
+ *   
+ *   const {
+ *     videoTrack,
+ *     isStreaming,
+ *     startStreaming,
+ *     stopStreaming,
+ *     switchCamera,
+ *   } = useSmartCameraWebRTC({
+ *     peerConnection,
+ *     mode: 'call',
+ *     videoConstraints: {
+ *       width: 1280,
+ *       height: 720,
+ *       frameRate: 30,
+ *     },
+ *   });
+ *   
+ *   return (
+ *     <View>
+ *       <Camera device={device} isActive={true} />
+ *       <Button 
+ *         onPress={isStreaming ? stopStreaming : startStreaming} 
+ *         title={isStreaming ? 'End Call' : 'Start Call'} 
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useSmartCameraWebRTC(
+  options: UseSmartCameraWebRTCOptions = {}
+): UseSmartCameraWebRTCResult {
+  const {
+    initialCamera = 'front',
+    onStreamingStateChange,
+    onError,
+  } = options;
+
+  const [videoTrack, setVideoTrack] = useState<MediaStreamTrack | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentCamera, setCurrentCamera] = useState<CameraFacing>(initialCamera);
+  
+  const callbacksRef = useRef({ onStreamingStateChange, onError });
+  const isMounted = useRef(true);
+
+  // Keep refs updated
+  useEffect(() => {
+    callbacksRef.current = { onStreamingStateChange, onError };
+  }, [onStreamingStateChange, onError]);
+
+  // Track mounted state
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // Start streaming (stub)
+  const startStreaming = useCallback(async (): Promise<void> => {
+    console.warn('[SmartCamera] WebRTC streaming is not yet implemented');
+    
+    if (isMounted.current) {
+      setIsStreaming(true);
+      callbacksRef.current.onStreamingStateChange?.(true);
+    }
+  }, []);
+
+  // Stop streaming (stub)
+  const stopStreaming = useCallback((): void => {
+    if (isMounted.current) {
+      setVideoTrack(null);
+      setIsStreaming(false);
+      callbacksRef.current.onStreamingStateChange?.(false);
+    }
+  }, []);
+
+  // Switch camera
+  const switchCamera = useCallback((): void => {
+    setCurrentCamera((prev) => (prev === 'front' ? 'back' : 'front'));
+  }, []);
+
+  return {
+    videoTrack,
+    isStreaming,
+    startStreaming,
+    stopStreaming,
+    switchCamera,
+  };
+}