diff --git a/client/src/components/CameraModal.tsx b/client/src/components/CameraModal.tsx
index 87075ca..886f514 100644
--- a/client/src/components/CameraModal.tsx
+++ b/client/src/components/CameraModal.tsx
@@ -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)}
/>
diff --git a/client/src/hooks/useCamera.tsx b/client/src/hooks/useCamera.tsx
index 1169416..6d9e7b7 100644
--- a/client/src/hooks/useCamera.tsx
+++ b/client/src/hooks/useCamera.tsx
@@ -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((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);
});
}