diff --git a/src/components/SimpleCameraTest.tsx b/src/components/SimpleCameraTest.tsx new file mode 100644 index 0000000..4e4ebd8 --- /dev/null +++ b/src/components/SimpleCameraTest.tsx @@ -0,0 +1,110 @@ +import React, { useState, useRef } from 'react'; + +const SimpleCameraTest: React.FC = () => { + const [stream, setStream] = useState(null); + const [error, setError] = useState(''); + const [status, setStatus] = useState('Not started'); + const videoRef = useRef(null); + + const startCamera = async () => { + setStatus('🔄 Starting camera...'); + setError(''); + + try { + const mediaStream = await navigator.mediaDevices.getUserMedia({ + video: { facingMode: 'environment' } + }); + + setStatus('✅ Camera stream obtained'); + setStream(mediaStream); + + if (videoRef.current) { + videoRef.current.srcObject = mediaStream; + setStatus('✅ Stream assigned to video element'); + + // Force play + videoRef.current.play().then(() => { + setStatus('✅ Video playing successfully'); + }).catch((err) => { + setError(`Play error: ${err.message}`); + setStatus('❌ Video play failed'); + }); + } else { + setError('Video ref is null'); + setStatus('❌ No video element'); + } + } catch (err: any) { + setError(`Camera error: ${err.message}`); + setStatus('❌ Camera failed'); + } + }; + + const stopCamera = () => { + if (stream) { + stream.getTracks().forEach(track => track.stop()); + setStream(null); + } + setStatus('Camera stopped'); + setError(''); + }; + + return ( +
+

🔬 Simple Camera Test

+ +
+
+ + +
+ +
+
Status: {status}
+ {error &&
Error: {error}
} +
Stream: {stream ? '✅ Active' : '❌ None'}
+
Video Ref: {videoRef.current ? '✅ Exists' : '❌ Null'}
+
+ + {/* Always show video element */} +
+
+ + {/* Debug info */} +
+
Video element exists: {videoRef.current ? 'Yes' : 'No'}
+ {videoRef.current && ( + <> +
Video width: {videoRef.current.videoWidth}
+
Video height: {videoRef.current.videoHeight}
+
Ready state: {videoRef.current.readyState}
+
Paused: {videoRef.current.paused ? 'Yes' : 'No'}
+
Muted: {videoRef.current.muted ? 'Yes' : 'No'}
+ + )} +
+
+
+ ); +}; + +export default SimpleCameraTest; \ No newline at end of file diff --git a/src/pages/Scanner.tsx b/src/pages/Scanner.tsx index dfe7f36..66115ce 100644 --- a/src/pages/Scanner.tsx +++ b/src/pages/Scanner.tsx @@ -3,6 +3,7 @@ import CameraScanner from '../components/CameraScanner'; import GlowingCard from '../components/GlowingCard'; import CardImageDisplay from '../components/CardImageDisplay'; import DebugInfo from '../components/DebugInfo'; +import SimpleCameraTest from '../components/SimpleCameraTest'; import { cardMatcher } from '../services/cardMatcher'; import { useAuth } from '../contexts/AuthContext'; @@ -278,6 +279,9 @@ const Scanner: React.FC = () => { {/* Debug Information */} + + {/* Simple Camera Test */} + {/* Error Display */} {error && (