Michael/Regisflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Regisflow.git synced 2026-10-11 17:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve camera functionality and address issues with blank image display

Browse Source 
Enhances CameraModal and useCamera hook with autoplay, error handling, and metadata checks to resolve blank image issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/957e99ed-c3d1-4917-a66f-70911fc0ed4b.jpg
This commit is contained in:
michaelschal committed 2025-07-11 17:51:04 +00:00
1 parent c426abfc33
commit ed38c25c9f
2 files changed
+54 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/CameraModal.tsx
+7 -2
View File
@@ -70,12 +70,17 @@ export default function CameraModal({
autoPlay
playsInline
muted
className="w-full max-w-full h-auto camera-preview rounded-lg border"
className="w-full max-w-full h-auto camera-preview rounded-lg border bg-black"
style={{
aspectRatio: '16/9',
objectFit: 'cover',
maxHeight: '400px'
maxHeight: '400px',
minHeight: '200px'
}}
onLoadedMetadata={() => console.log('CameraModal: Video metadata loaded')}
onCanPlay={() => console.log('CameraModal: Video can play')}
onPlay={() => console.log('CameraModal: Video playing')}
onError={(e) => console.error('CameraModal: Video error:', e)}
/>
<canvas ref={canvasRef} className="hidden" />
client/src/hooks/useCamera.tsx
+47 -8
View File
@@ -55,36 +55,75 @@ export function useCamera() {
setIsOpen(true);
if (videoRef.current) {
videoRef.current.srcObject = stream;
const video = videoRef.current;
video.srcObject = stream;
console.log('Video stream attached to video element');
// Forcer le démarrage de la vidéo
video.autoplay = true;
video.playsInline = true;
video.muted = true;
// Forcer le play immédiatement
try {
await video.play();
console.log('Video play() successful');
} catch (playError) {
console.warn('Video play() failed:', playError);
}
// Attendre que la vidéo soit prête
return new Promise<boolean>((resolve, reject) => {
const video = videoRef.current!;
const handleLoadedMetadata = () => {
console.log('Video metadata loaded, dimensions:', video.videoWidth, 'x', video.videoHeight);
console.log('Video metadata loaded successfully');
console.log('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
console.log('Video readyState:', video.readyState);
console.log('Video paused:', video.paused);
console.log('Video ended:', video.ended);
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
video.removeEventListener('error', handleError);
video.removeEventListener('canplay', handleCanPlay);
resolve(true);
};
const handleCanPlay = () => {
console.log('Video can play event fired');
if (video.videoWidth > 0 && video.videoHeight > 0) {
handleLoadedMetadata();
}
};
const handleError = (error: Event) => {
console.error('Video error:', error);
console.error('Video error event:', error);
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
video.removeEventListener('error', handleError);
video.removeEventListener('canplay', handleCanPlay);
reject(new Error('Erreur lors du chargement de la vidéo'));
};
video.addEventListener('loadedmetadata', handleLoadedMetadata);
video.addEventListener('canplay', handleCanPlay);
video.addEventListener('error', handleError);
// Timeout de sécurité
// Si les métadonnées sont déjà chargées
if (video.readyState >= 1 && video.videoWidth > 0) {
console.log('Video metadata already available');
handleLoadedMetadata();
}
// Timeout de sécurité réduit
setTimeout(() => {
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
video.removeEventListener('error', handleError);
resolve(true); // Continuer même si metadata pas encore chargé
}, 5000);
video.removeEventListener('canplay', handleCanPlay);
console.log('Video load timeout, current state:', {
readyState: video.readyState,
videoWidth: video.videoWidth,
videoHeight: video.videoHeight,
paused: video.paused
});
resolve(true);
}, 3000);
});
}