@sanctum-key/react-native-sdk 1.0.0

package/src/components/EnhancedCameraView.web.tsx

@@ -0,0 +1,597 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
+import { EnhancedCameraViewProps } from './OverLay/type';
+import { useI18n } from '../hooks/useI18n';
+
+
+export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
+  instructions = 'Position yourself in the frame and tap the capture button',
+  showCamera,
+  cameraType: initialCameraType = 'front',
+  style,
+  onCapture,
+  onError,
+  onClose,
+  enableFlash = false,
+  enableHdr = false,
+  quality = 'high',
+  showCaptureButton = true,
+  showSwitchCamera = true,
+  overlayComponent,
+  bbox,
+  canFlip = true,
+  enableVideo = false,
+  isRecording = false,
+  onVideoRecordingStart,
+  onVideoRecordingStop,
+  videoDuration = 10,
+  onSilentCapture,
+  silentCaptureResult,
+  captureStabilizationDelayMs = 2500,
+}) => {
+  const { t } = useI18n();
+  
+  // Vérification de plateforme - ce composant est uniquement pour le web
+  if (Platform.OS !== 'web') {
+    console.warn('EnhancedCameraView.web.tsx should only be used on web platform');
+    return null;
+  }
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [cameraType, setCameraType] = useState<'front' | 'back'>(initialCameraType);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [flash, setFlash] = useState<'off' | 'on' | 'auto'>('off');
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [isRecordingVideo, setIsRecordingVideo] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+  const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
+
+  console.log('cameraType', cameraType, recordedChunks);
+  // Check permissions on component mount
+  useEffect(() => {
+    if (showCamera) {
+      checkPermissions();
+    }
+  }, [showCamera]);
+
+  // Cleanup stream on unmount
+  useEffect(() => {
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, [stream]);
+
+  // Build video constraints for quality (min + ideal improve Android/Samsung web quality; higher ideal for documents)
+  const getVideoConstraints = useCallback((): MediaTrackConstraints => {
+    const isHigh = quality === 'high';
+    const isMedium = quality === 'medium';
+    return {
+      facingMode: cameraType === 'front' ? 'user' : 'environment',
+      // min forces Android Chrome to use at least this resolution (avoids 640x480 default)
+      width: {
+        min: isHigh ? 1280 : isMedium ? 960 : 640,
+        ideal: isHigh ? 2560 : isMedium ? 1280 : 640,
+      },
+      height: {
+        min: isHigh ? 720 : isMedium ? 540 : 480,
+        ideal: isHigh ? 1440 : isMedium ? 720 : 480,
+      },
+    };
+  }, [cameraType, quality]);
+
+  const checkPermissions = async () => {
+    try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        onError?.({ message: 'Camera not supported in this browser' });
+        return;
+      }
+
+      // Use same constraints as startCamera so Android Chrome doesn't cache low resolution (e.g. 640x480)
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: getVideoConstraints(),
+        audio: enableVideo,
+      });
+      stream.getTracks().forEach(track => track.stop());
+
+      setHasPermission(true);
+      await startCamera();
+    } catch (error) {
+      console.error('Error checking permissions:', error);
+      onError?.({ message: 'Camera permissions not granted' });
+    }
+  };
+
+  const startCamera = async () => {
+    try {
+      if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+      }
+
+      const constraints: MediaStreamConstraints = {
+        video: getVideoConstraints(),
+        audio: enableVideo,
+      };
+
+      let newStream: MediaStream;
+      try {
+        newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        const name = err instanceof Error ? err.name : '';
+        // On some Android devices, min constraints can fail; fallback to ideal only
+        if (name === 'OverconstrainedError') {
+          const fallbackConstraints: MediaStreamConstraints = {
+            video: {
+              facingMode: cameraType === 'front' ? 'user' : 'environment',
+              width: { ideal: quality === 'high' ? 2560 : quality === 'medium' ? 1280 : 640 },
+              height: { ideal: quality === 'high' ? 1440 : quality === 'medium' ? 720 : 480 },
+            },
+            audio: enableVideo,
+          };
+          newStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+        } else {
+          throw err;
+        }
+      }
+
+      setStream(newStream);
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = newStream;
+        videoRef.current.onloadedmetadata = () => {
+          setIsInitialized(true);
+        };
+      }
+    } catch (error) {
+      console.error('Error starting camera:', error);
+      onError?.({ message: 'Failed to start camera' });
+    }
+  };
+
+  const onInitialized = useCallback(() => {
+    console.log('Camera initialized!');
+    setIsInitialized(true);
+  }, []);
+
+  const onCameraError = useCallback((error: any) => {
+    console.error('Camera error:', error);
+    onError?.({ message: error.message || 'Camera error occurred' });
+  }, [onError]);
+
+  console.log('isInitialized', onInitialized, onCameraError);
+
+  const capturePhoto = useCallback(async () => {
+    try {
+      onCapture && onCapture({
+        success: true
+      })
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      onCapture?.({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to capture photo',
+      });
+    }
+  }, [isInitialized, onCapture, onError]);
+
+
+  const captureSilentPhoto = useCallback(async () => {
+    try {
+      if (!videoRef.current || !canvasRef.current || !isInitialized) {
+        onError?.({ message: 'Camera not ready' });
+        return;
+      }
+
+      const video = videoRef.current;
+      const canvas = canvasRef.current;
+      const context = canvas.getContext('2d');
+
+      if (!context) {
+        onError?.({ message: 'Canvas context not available' });
+        return;
+      }
+
+      // Set canvas dimensions to match video
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+
+      // For front camera: draw flipped so captured image matches non-mirrored preview (no mirror confusion)
+      if (cameraType === 'front') {
+        context.save();
+        context.translate(canvas.width, 0);
+        context.scale(-1, 1);
+        context.drawImage(video, 0, 0);
+        context.restore();
+      } else {
+        context.drawImage(video, 0, 0);
+      }
+
+      // Convert to base64 (0.95 for document/ID capture clarity; backend can exploit text better)
+      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.95);
+
+      onSilentCapture?.({
+        success: true,
+        path: imageDataUrl,
+      });
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      onCapture?.({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to capture photo',
+      });
+    }
+  }, [isInitialized, cameraType, onError, onSilentCapture]);
+
+
+  // Stabilization delay then auto-capture every 5s; stop as soon as capture is validated (no more new captures)
+  useEffect(() => {
+    if (!showCamera || !isInitialized || silentCaptureResult?.success) {
+      return;
+    }
+
+    const delayMs = Math.max(0, captureStabilizationDelayMs);
+    const intervalMs = 5000;
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    const timeoutId = setTimeout(() => {
+      captureSilentPhoto();
+      intervalId = setInterval(captureSilentPhoto, intervalMs);
+    }, delayMs);
+
+    return () => {
+      clearTimeout(timeoutId);
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [showCamera, isInitialized, captureStabilizationDelayMs, captureSilentPhoto, silentCaptureResult?.success]);
+
+  const startVideoRecording = useCallback(async () => {
+    try {
+      if (!stream || !isInitialized) {
+        onError?.({ message: 'Camera not ready' });
+        return;
+      }
+
+      const chunks: Blob[] = [];
+      setRecordedChunks(chunks);
+
+      const recorder = new MediaRecorder(stream, {
+        mimeType: 'video/webm;codecs=vp9',
+      });
+
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunks.push(event.data);
+        }
+      };
+
+      recorder.onstop = () => {
+        const blob = new Blob(chunks, { type: 'video/webm' });
+        const url = URL.createObjectURL(blob);
+
+        onVideoRecordingStop?.({
+          success: true,
+          path: url,
+        });
+
+        setRecordedChunks([]);
+        setIsRecordingVideo(false);
+      };
+
+      recorder.onerror = (event) => {
+        console.error('Recording error:', event);
+        onVideoRecordingStop?.({
+          success: false,
+          error: 'Failed to record video',
+        });
+        setIsRecordingVideo(false);
+      };
+
+      setMediaRecorder(recorder);
+      recorder.start();
+      setIsRecordingVideo(true);
+      onVideoRecordingStart?.();
+
+      // Auto-stop after videoDuration seconds
+      setTimeout(() => {
+        if (recorder.state === 'recording') {
+          recorder.stop();
+        }
+      }, videoDuration * 1000);
+
+    } catch (error) {
+      console.error('Error starting video recording:', error);
+      onVideoRecordingStop?.({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to start video recording',
+      });
+    }
+  }, [isInitialized, stream, videoDuration, onVideoRecordingStart, onVideoRecordingStop, onError]);
+
+  const stopVideoRecording = useCallback(async () => {
+    try {
+      if (mediaRecorder && mediaRecorder.state === 'recording') {
+        mediaRecorder.stop();
+      }
+    } catch (error) {
+      console.error('Error stopping video recording:', error);
+      onError?.({ message: 'Failed to stop video recording' });
+    }
+  }, [mediaRecorder, onError]);
+
+  const switchCamera = useCallback(async () => {
+    setCameraType(current => current === 'front' ? 'back' : 'front');
+    // Restart camera with new facing mode
+    await startCamera();
+  }, [cameraType]);
+
+  const toggleFlash = useCallback(() => {
+    setFlash(current => {
+      switch (current) {
+        case 'off': return 'on';
+        case 'on': return 'auto';
+        case 'auto': return 'off';
+        default: return 'off';
+      }
+    });
+  }, []);
+
+  if (!hasPermission) {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.permissionMessage}>
+          Camera permission required. Please grant permission to continue.
+        </Text>
+      </View>
+    );
+  }
+
+  if (!showCamera) {
+    return <View style={[styles.container, style]} />;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Video element; no mirror for front camera so preview matches final photo and doesn't confuse users */}
+      <video
+        ref={videoRef}
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          transform: cameraType === 'front' ? 'scaleX(-1)' : undefined,
+        }}
+        autoPlay
+        playsInline
+        muted
+      />
+
+      {/* Hidden canvas for photo capture */}
+      <canvas
+        ref={canvasRef}
+        style={{
+          position: 'absolute',
+          left: '-9999px',
+          top: '-9999px',
+        }}
+      />
+
+      {/* Instructions */}
+      {/* {instructions && (
+        <View style={styles.instructionsOverlay}>
+          <Text style={styles.instructions}>{instructions}</Text>
+        </View>
+      )} */}
+
+      {/* Custom overlay component */}
+      {overlayComponent}
+
+      {/* Bounding box overlay */}
+      {bbox && (
+        <View style={styles.bboxOverlay}>
+          <View
+            style={[
+              styles.bbox,
+              {
+                left: `${bbox.xMin}%`,
+                top: `${bbox.yMin}%`,
+                width: `${bbox.xMax - bbox.xMin}%`,
+                height: `${bbox.yMax - bbox.yMin}%`,
+                borderColor: bbox.borderColor || '#2DBD60',
+                borderWidth: bbox.borderWidth || 3,
+                borderRadius: bbox.cornerRadius || 8,
+              }
+            ]}
+          />
+        </View>
+      )}
+
+      {/* Analyzing indicator - Same as mobile */}
+      {silentCaptureResult?.isAnalyzing && (
+        <View style={styles.analyzingContainer}>
+          <Text style={styles.analyzingText}>{t('camera.analyzing')}</Text>
+        </View>
+      )}
+
+      {/* Camera controls */}
+      <View style={styles.controlsContainer}>
+        {/* Flash button */}
+        {enableFlash && (
+          <TouchableOpacity style={styles.controlButton} onPress={toggleFlash}>
+            <Text style={styles.controlButtonText}>
+              {flash === 'off' ? '⚡' : flash === 'on' ? '⚡️' : '✨'}
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Capture button */}
+        {showCaptureButton && !enableVideo && silentCaptureResult?.success && (
+          <TouchableOpacity
+            style={styles.captureButton}
+            onPress={capturePhoto}
+            disabled={!isInitialized}
+          >
+            <View style={[
+              styles.captureButtonInner,
+              !isInitialized && styles.captureButtonDisabled
+            ]} />
+          </TouchableOpacity>
+        )}
+
+        {/* Video recording button */}
+        {showCaptureButton && enableVideo && (
+          <TouchableOpacity
+            style={[
+              styles.captureButton,
+              isRecordingVideo && styles.recordingButton
+            ]}
+            onPress={isRecordingVideo ? stopVideoRecording : startVideoRecording}
+            disabled={!isInitialized}
+          >
+            <View style={[
+              styles.captureButtonInner,
+              !isInitialized && styles.captureButtonDisabled,
+              isRecordingVideo && styles.recordingButtonInner
+            ]} />
+          </TouchableOpacity>
+        )}
+
+        {/* Switch camera button */}
+        {showSwitchCamera && canFlip && (
+          <TouchableOpacity style={styles.controlButton} onPress={switchCamera}>
+            <Text style={styles.controlButtonText}>🔄</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  instructionsOverlay: {
+    position: 'absolute',
+    top: 60,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 15,
+    borderRadius: 10,
+    zIndex: 1,
+  },
+  instructions: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  controlsContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+    zIndex: 1,
+  },
+  controlButton: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  controlButtonText: {
+    fontSize: 24,
+  },
+  captureButton: {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: 'white',
+  },
+  captureButtonInner: {
+    backgroundColor: 'white',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+  },
+  captureButtonDisabled: {
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  },
+  recordingButton: {
+    backgroundColor: 'rgba(255, 59, 48, 0.3)',
+    borderColor: '#FF3B30',
+  },
+  recordingButtonInner: {
+    backgroundColor: '#FF3B30',
+  },
+  permissionMessage: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+  errorMessage: {
+    color: 'red',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+  bboxOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+  bbox: {
+    position: 'absolute',
+    borderStyle: 'solid',
+    backgroundColor: 'transparent',
+  },
+  analyzingContainer: {
+    position: 'absolute',
+    bottom: 100,
+    alignSelf: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 10,
+    borderRadius: 10,
+    zIndex: 1000,
+  },
+  analyzingText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});