// zeus-video.jsx — Cámara siempre visible, grabación con preview en vivo y valoración IA function VideoCapture({ t, onPhotosExtracted, onClose }) { const MODE = { SELECT:'select', CAMERA:'camera', FRAMES:'frames' }; const [mode, setMode] = React.useState(MODE.SELECT); const [recording, setRecording] = React.useState(false); const [seconds, setSeconds] = React.useState(0); // contador de grabación const [frames, setFrames] = React.useState([]); const [selected, setSelected] = React.useState([]); const [progress, setProgress] = React.useState(0); const [error, setError] = React.useState(''); const [videoUrl, setVideoUrl] = React.useState(null); const [aiValuations, setAiVal] = React.useState({}); // { frameIndex: {price, desc, condition} } const [valuating, setValuating] = React.useState(false); const [camReady, setCamReady] = React.useState(false); // cámara lista const videoRef = React.useRef(null); const canvasRef = React.useRef(null); const mediaRecRef = React.useRef(null); const chunksRef = React.useRef([]); const streamRef = React.useRef(null); const timerRef = React.useRef(null); // Limpiar al desmontar React.useEffect(() => { return () => { stopStream(); clearInterval(timerRef.current); if (videoUrl) URL.revokeObjectURL(videoUrl); }; }, []); // ── Iniciar cámara INMEDIATAMENTE al entrar en modo CAMERA ──────── React.useEffect(() => { if (mode === MODE.CAMERA) startCamera(); else stopStream(); }, [mode]); const startCamera = async () => { setError(''); setCamReady(false); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.onloadedmetadata = () => { videoRef.current.play().then(() => setCamReady(true)); }; } } catch (e) { setError('No se pudo acceder a la cámara. Permite el acceso en el navegador.'); setMode(MODE.SELECT); } }; const stopStream = () => { if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; } setCamReady(false); }; // ── Empezar grabación ───────────────────────────────────────────── const startRecording = () => { if (!streamRef.current) return; chunksRef.current = []; const mime = getSupportedMime(); const rec = new MediaRecorder(streamRef.current, { mimeType: mime }); rec.ondataavailable = e => { if (e.data.size > 0) chunksRef.current.push(e.data); }; rec.onstop = () => { const blob = new Blob(chunksRef.current, { type: mime }); const url = URL.createObjectURL(blob); setVideoUrl(url); stopStream(); clearInterval(timerRef.current); setMode(MODE.FRAMES); extractFrames(url); }; rec.start(200); mediaRecRef.current = rec; setRecording(true); setSeconds(0); timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000); }; // ── Parar grabación ─────────────────────────────────────────────── const stopRecording = () => { mediaRecRef.current?.stop(); setRecording(false); clearInterval(timerRef.current); }; // ── Subir vídeo ─────────────────────────────────────────────────── const handleUpload = (e) => { const file = e.target.files?.[0]; if (!file) return; if (file.size > 300 * 1024 * 1024) { setError('Vídeo demasiado grande (máx 300 MB)'); return; } const url = URL.createObjectURL(file); setVideoUrl(url); setMode(MODE.FRAMES); extractFrames(url); }; // ── Extraer fotogramas ──────────────────────────────────────────── const extractFrames = async (url) => { setFrames([]); setSelected([]); setAiVal({}); setProgress(0); const video = document.createElement('video'); video.src = url; video.muted = true; video.playsInline = true; await new Promise((res, rej) => { video.onloadedmetadata = res; video.onerror = rej; video.load(); }); const dur = video.duration; const count = Math.min(20, Math.max(8, Math.floor(dur))); const times = Array.from({ length: count }, (_, i) => (i / (count - 1)) * dur * 0.96 + 0.02); const canvas = canvasRef.current || document.createElement('canvas'); const ctx = canvas.getContext('2d'); const extracted = []; for (let i = 0; i < times.length; i++) { await seekTo(video, times[i]); canvas.width = video.videoWidth || 640; canvas.height = video.videoHeight || 360; ctx.drawImage(video, 0, 0); const dataUrl = canvas.toDataURL('image/jpeg', 0.85); extracted.push({ dataUrl, time: times[i] }); setProgress(Math.round(((i + 1) / times.length) * 100)); await new Promise(r => setTimeout(r, 30)); } setFrames(extracted); setProgress(100); }; const seekTo = (video, time) => new Promise(res => { const fn = () => { video.removeEventListener('seeked', fn); res(); }; video.addEventListener('seeked', fn); video.currentTime = time; }); const getSupportedMime = () => { const types = ['video/mp4', 'video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm']; return types.find(t => MediaRecorder.isTypeSupported(t)) || 'video/webm'; }; // ── Selección de fotogramas ─────────────────────────────────────── const toggleFrame = (i) => { setSelected(prev => prev.includes(i) ? prev.filter(x => x !== i) : prev.length < 6 ? [...prev, i] : prev ); }; // ── Valoración IA de los frames seleccionados ───────────────────── const valorarConIA = async () => { if (selected.length === 0) return; setValuating(true); try { const results = {}; for (const idx of selected) { const frame = frames[idx]; const base64 = frame.dataUrl.split(',')[1]; const resp = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 300, messages: [{ role: 'user', content: [ { type: 'image', source: { type: 'base64', media_type: 'image/jpeg', data: base64 }, }, { type: 'text', text: `Eres un experto tasador de objetos de segunda mano en España. Analiza esta imagen y responde SOLO con JSON (sin texto extra): { "objeto": "nombre del objeto en 3-5 palabras", "condicion": "Nuevo | Buen estado | Normal | Usado", "precioMin": numero en euros, "precioMax": numero en euros, "descripcion": "descripcion atractiva de 2 frases para vender el objeto", "consejo": "consejo de 1 frase para mejorar la foto o el anuncio" } Si la imagen no muestra un objeto vendible, devuelve { "objeto": "no_detectado" }.`, }, ], }], }), }); const data = await resp.json(); const text = data.content?.[0]?.text || ''; try { const clean = text.replace(/```json|```/g, '').trim(); const parsed = JSON.parse(clean); if (parsed.objeto !== 'no_detectado') results[idx] = parsed; } catch {} } setAiVal(results); } catch (e) { setError('Error al valorar con IA: ' + e.message); } setValuating(false); }; // ── Confirmar y enviar fotos al formulario ──────────────────────── const confirmSelection = () => { if (selected.length === 0) return; // Tomar los datos de la IA del primer frame que tenga valoración const firstValIdx = selected.find(i => aiValuations[i]); const aiData = firstValIdx !== undefined ? aiValuations[firstValIdx] : null; const photos = selected.map(i => ({ dataUrl: frames[i].dataUrl, base64: frames[i].dataUrl.split(',')[1], source: 'video', })); onPhotosExtracted(photos, aiData); }; const fmtSec = (s) => `${Math.floor(s / 60).toString().padStart(2,'0')}:${(s % 60).toString().padStart(2,'0')}`; // ───────────────────────────────────────────────────────────────────── // RENDER // ───────────────────────────────────────────────────────────────────── return (
{/* Header */}
{mode === MODE.SELECT ? '🎬 Cómo quieres grabar' : mode === MODE.CAMERA ? '📷 Cámara' : '🖼 Elige tus fotos'}
{/* ── PANTALLA SELECCIÓN ── */} {mode === MODE.SELECT && (
🎬
Obtén fotos de un vídeo
Graba o sube un vídeo y la IA extrae y valora los mejores fotogramas
{error &&
{error}
}
💡 Graba 10-20 segundos dando una vuelta lenta al objeto con buena luz. La IA detectará automáticamente el tipo de objeto, su condición y el precio de mercado.
)} {/* ── PANTALLA CÁMARA ── */} {mode === MODE.CAMERA && (
{/* Visor — siempre visible, con overlay si no está lista */}