diff --git a/client/src/components/camera-recorder.tsx b/client/src/components/camera-recorder.tsx index 145251d..28dadf5 100644 --- a/client/src/components/camera-recorder.tsx +++ b/client/src/components/camera-recorder.tsx @@ -1,6 +1,6 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'; -import { Camera, StopCircle, RefreshCw, CheckCircle, X, RotateCcw } from 'lucide-react'; +import { Camera, StopCircle, RefreshCw, CheckCircle, X, RotateCcw, Settings2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { useToast } from '@/hooks/use-toast'; @@ -10,6 +10,22 @@ interface CameraRecorderProps { onCancel: () => void; } +// Quality configurations +type VideoQuality = "4k" | "1080p" | "720p"; + +interface QualityConfig { + label: string; + width: number; + height: number; + bitrate: number; +} + +const QUALITY_CONFIGS: Record = { + "4k": { label: "4K Ultra HD", width: 3840, height: 2160, bitrate: 25000000 }, + "1080p": { label: "Full HD", width: 1920, height: 1080, bitrate: 8000000 }, + "720p": { label: "HD 720p", width: 1280, height: 720, bitrate: 5000000 }, +}; + export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { const videoRef = useRef(null); const mediaRecorderRef = useRef(null); @@ -23,6 +39,8 @@ export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { const [timer, setTimer] = useState(0); const [facingMode, setFacingMode] = useState<'user' | 'environment'>('environment'); const [resolutionInfo, setResolutionInfo] = useState(''); + const [quality, setQuality] = useState('1080p'); + const [showSettings, setShowSettings] = useState(false); // Initialisation de la caméra const startCamera = useCallback(async () => { @@ -31,15 +49,15 @@ export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { stream.getTracks().forEach(track => track.stop()); } - console.log('📸 Starting camera with facing mode:', facingMode); + const config = QUALITY_CONFIGS[quality]; + console.log(`📸 Starting camera: ${config.label}, facing: ${facingMode}`); - // Constraints pour forcer la meilleure qualité possible (4K ou 1080p) const constraints: MediaStreamConstraints = { audio: true, video: { facingMode: facingMode, - width: { ideal: 3840 }, // Try 4K - height: { ideal: 2160 }, + width: { ideal: config.width, min: 640 }, + height: { ideal: config.height, min: 480 }, } }; @@ -48,7 +66,7 @@ export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { if (videoRef.current) { videoRef.current.srcObject = newStream; - videoRef.current.volume = 0; // Mute preview to avoid feedback loop + videoRef.current.volume = 0; } // Check actual resolution @@ -69,7 +87,7 @@ export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { }); onCancel(); } - }, [facingMode, onCancel, toast]); + }, [facingMode, quality, onCancel, toast]); useEffect(() => { startCamera(); @@ -221,14 +239,53 @@ export function CameraRecorder({ onCapture, onCancel }: CameraRecorderProps) { -
- {isRecording ? formatTime(timer) : (resolutionInfo || 'Camera')} +
+
+ {isRecording ? formatTime(timer) : (resolutionInfo || 'Camera')} +
+ {!isRecording && ( + + )}
+ {/* Quality Settings Panel */} + {showSettings && !isRecording && ( +
+

Qualité Vidéo

+
+ {(Object.keys(QUALITY_CONFIGS) as VideoQuality[]).map((q) => ( + + ))} +
+

+ {QUALITY_CONFIGS[quality].label} +

+
+ )} + {/* Viewfinder */}