@transfergratis/react-native-sdk 0.1.2

package/src/components/EnhancedCameraView.web.tsx

@@ -0,0 +1,517 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, ViewStyle, Platform } from 'react-native';
+
+export interface EnhancedCameraViewProps {
+  instructions?: string;
+  showCamera: boolean;
+  cameraType?: 'front' | 'back';
+  style?: ViewStyle;
+  onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+  onError?: (event: { message: string }) => void;
+  onClose?: () => void;
+  enableFlash?: boolean;
+  enableHdr?: boolean;
+  quality?: 'low' | 'medium' | 'high';
+  showCaptureButton?: boolean;
+  showSwitchCamera?: boolean;
+  overlayComponent?: React.ReactNode;
+  bbox?: {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+    borderColor?: string;
+    borderWidth?: number;
+    cornerRadius?: number;
+  };
+  canFlip?: boolean;
+  // Video recording props
+  enableVideo?: boolean;
+  isRecording?: boolean;
+  onVideoRecordingStart?: () => void;
+  onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
+  videoDuration?: number;
+}
+
+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,
+}) => {
+  // 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]);
+
+  const checkPermissions = async () => {
+    try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        onError?.({ message: 'Camera not supported in this browser' });
+        return;
+      }
+
+      // Test camera permission
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      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 = {
+        video: {
+          facingMode: cameraType === 'front' ? 'user' : 'environment',
+          width: { ideal: quality === 'high' ? 1920 : quality === 'medium' ? 1280 : 640 },
+          height: { ideal: quality === 'high' ? 1080 : quality === 'medium' ? 720 : 480 },
+        },
+        audio: enableVideo,
+      };
+
+      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      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 {
+      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;
+
+      // Draw the current video frame to canvas
+      context.drawImage(video, 0, 0);
+
+      // Convert to base64
+      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.8);
+      
+      onCapture?.({
+        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, onCapture, onError]);
+
+  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 */}
+      <video
+        ref={videoRef}
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+        }}
+        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>
+      )}
+
+      {/* 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 && (
+          <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',
+  },
+});