diff --git a/src/components/CameraScanner.tsx b/src/components/CameraScanner.tsx index e770342..ac0ed54 100644 --- a/src/components/CameraScanner.tsx +++ b/src/components/CameraScanner.tsx @@ -18,7 +18,7 @@ const CameraScanner: React.FC = ({ onCardScanned, onError }) const [isProcessing, setIsProcessing] = useState(false); const [scanResult, setScanResult] = useState(null); const [capturedImage, setCapturedImage] = useState(null); - const [debugInfo, setDebugInfo] = useState('Camera not started'); + const videoRef = useRef(null); const canvasRef = useRef(null); @@ -26,8 +26,6 @@ const CameraScanner: React.FC = ({ onCardScanned, onError }) // Start camera stream const startCamera = async () => { - setDebugInfo('🔄 Requesting camera access...'); - try { const stream = await navigator.mediaDevices.getUserMedia({ video: { @@ -37,35 +35,27 @@ const CameraScanner: React.FC = ({ onCardScanned, onError }) } }); - setDebugInfo('✅ Camera stream obtained'); - if (videoRef.current) { videoRef.current.srcObject = stream; streamRef.current = stream; // Wait for video to be ready videoRef.current.onloadedmetadata = () => { - setDebugInfo('🎥 Video metadata loaded, starting playback...'); videoRef.current?.play().then(() => { setIsStreaming(true); - setDebugInfo('✅ Camera streaming successfully'); }).catch((err) => { - setDebugInfo(`❌ Video play failed: ${err.message}`); onError(`Video playback failed: ${err.message}`); }); }; videoRef.current.onerror = (err) => { - setDebugInfo(`❌ Video error: ${err}`); onError('Video element error occurred'); }; } else { - setDebugInfo('❌ Video ref is null'); onError('Video element not available'); } } catch (err: any) { console.error('Camera access error:', err); - setDebugInfo(`❌ Camera error: ${err.message}`); onError(`Unable to access camera: ${err.message}`); } }; @@ -79,7 +69,6 @@ const CameraScanner: React.FC = ({ onCardScanned, onError }) setIsStreaming(false); setCapturedImage(null); setScanResult(null); - setDebugInfo('Camera stopped'); }; // Capture image from video stream @@ -351,19 +340,7 @@ const CameraScanner: React.FC = ({ onCardScanned, onError }) - {/* Debug Info */} -
-
Camera Status:
-

{debugInfo}

-
-
isStreaming: {isStreaming ? '✅ true' : '❌ false'}
-
videoRef.current: {videoRef.current ? '✅ exists' : '❌ null'}
-
streamRef.current: {streamRef.current ? '✅ exists' : '❌ null'}
- {videoRef.current && ( -
Video ready state: {videoRef.current.readyState}
- )} -
-
+ ); }; diff --git a/src/components/DebugInfo.tsx b/src/components/DebugInfo.tsx deleted file mode 100644 index 4c8cf2e..0000000 --- a/src/components/DebugInfo.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useAuth } from '../contexts/AuthContext'; - -const DebugInfo: React.FC = () => { - const { user } = useAuth(); - const [debugInfo, setDebugInfo] = useState(null); - const [cameraSupported, setCameraSupported] = useState(null); - - useEffect(() => { - // Check camera support - setCameraSupported( - navigator.mediaDevices && - navigator.mediaDevices.getUserMedia && - typeof navigator.mediaDevices.getUserMedia === 'function' - ); - - // Test API connectivity - testAPIs(); - }, [user]); - - const testAPIs = async () => { - const token = localStorage.getItem('token'); - const results: any = { - token: token ? `${token.substring(0, 20)}...` : 'No token', - tokenLength: token?.length || 0, - user: user ? { - id: user.id, - username: user.username, - roles: user.roles - } : 'Not logged in' - }; - - try { - // Test collections API - const collectionsResponse = await fetch('/api/collections', { - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json' - } - }); - - results.collectionsAPI = { - status: collectionsResponse.status, - ok: collectionsResponse.ok, - data: collectionsResponse.ok ? await collectionsResponse.json() : await collectionsResponse.text() - }; - } catch (error: any) { - results.collectionsAPI = { - error: error.message - }; - } - - setDebugInfo(results); - }; - - const testCamera = async () => { - try { - const stream = await navigator.mediaDevices.getUserMedia({ - video: { facingMode: 'environment' } - }); - - setDebugInfo((prev: any) => ({ - ...prev, - cameraTest: '✅ Camera access successful', - cameraStream: { - active: stream.active, - tracks: stream.getVideoTracks().length - } - })); - - // Stop the test stream - stream.getTracks().forEach(track => track.stop()); - } catch (error: any) { - setDebugInfo((prev: any) => ({ - ...prev, - cameraTest: `❌ Camera error: ${error.message}`, - cameraError: error.name - })); - } - }; - - if (!debugInfo) return
Loading debug info...
; - - return ( -
-

🔧 Debug Information

- -
-
- Camera Support: {cameraSupported ? '✅ Supported' : '❌ Not supported'} -
- -
- User: {JSON.stringify(debugInfo.user, null, 2)} -
- -
- Token: {debugInfo.token} (Length: {debugInfo.tokenLength}) -
- -
- Collections API: -
-            {JSON.stringify(debugInfo.collectionsAPI, null, 2)}
-          
-
- - {debugInfo.cameraTest && ( -
- Camera Test: {debugInfo.cameraTest} - {debugInfo.cameraStream && ( -
- Active: {debugInfo.cameraStream.active ? 'Yes' : 'No'}, - Tracks: {debugInfo.cameraStream.tracks} -
- )} - {debugInfo.cameraError && ( -
- Error Type: {debugInfo.cameraError} -
- )} -
- )} -
- -
- - -
-
- ); -}; - -export default DebugInfo; \ No newline at end of file diff --git a/src/components/SimpleCameraTest.tsx b/src/components/SimpleCameraTest.tsx deleted file mode 100644 index 4e4ebd8..0000000 --- a/src/components/SimpleCameraTest.tsx +++ /dev/null @@ -1,110 +0,0 @@ -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 66115ce..41f3c6f 100644 --- a/src/pages/Scanner.tsx +++ b/src/pages/Scanner.tsx @@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react'; 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'; @@ -277,11 +275,7 @@ const Scanner: React.FC = () => {

- {/* Debug Information */} - - - {/* Simple Camera Test */} - + {/* Error Display */} {error && (