// CameraCapture — inline webcam panel for the Floating AI. // Two modes: // 1. "scan" — live barcode/QR decoder via @zxing/browser // 2. "identify" — single-frame capture → POST base64 → GPT-4o Vision identifier // // No new module / route. Used as a child of AiFloatingChat. // // v2 fixes (2026-06-13): // - DO NOT pass {} as hints — zxing expects undefined or a real Map. // Passing a plain object triggered "e.get is not a function" → black preview. // - Use IScannerControls.stop() (returned by decodeFromVideoDevice) for clean teardown. // - Permission deny → friendly retry button. // - Defensive null checks everywhere — never crash on early unmount / rebound. // - Debug logs (gated to dev) for init / permission / detection / close. // - Single-instance guard prevents duplicate readers if React StrictMode double-mounts. import React, { useEffect, useRef, useState, useCallback } from "react"; import { Camera, X, RefreshCw, ScanBarcode, Sparkles, CheckCircle2, AlertTriangle, Plus, ShoppingCart, Truck } from "lucide-react"; import { BrowserMultiFormatReader } from "@zxing/browser"; import { api } from "@/lib/api"; import { toast } from "sonner"; const DEBUG = process.env.NODE_ENV !== "production"; const dbg = (...args) => { if (DEBUG) console.debug("[CameraCapture]", ...args); }; export default function CameraCapture({ onResult, onClose, defaultMode = "scan", companyId = null }) { const [mode, setMode] = useState(defaultMode); // "scan" | "identify" const [error, setError] = useState(""); const [permissionDenied, setPermissionDenied] = useState(false); const [busy, setBusy] = useState(false); const [lastCode, setLastCode] = useState(""); const [aiResult, setAiResult] = useState(null); const [bootAttempt, setBootAttempt] = useState(0); // bump to retry const videoRef = useRef(null); const readerRef = useRef(null); const controlsRef = useRef(null); // IScannerControls returned by zxing const streamRef = useRef(null); const mountedRef = useRef(true); const handledCodeRef = useRef(null); // prevent double-handling const lastSnapRef = useRef(""); // most recent captured dataUrl, for Draft/Sale/Purchase actions // Centralised teardown — safe to call multiple times const teardown = useCallback(() => { dbg("teardown"); try { // 1) Stop zxing decoder via IScannerControls if (controlsRef.current && typeof controlsRef.current.stop === "function") { controlsRef.current.stop(); } } catch (e) { dbg("controls.stop error", e?.message); } controlsRef.current = null; try { // 2) Defensive — older zxing builds expose .reset() on the reader if (readerRef.current && typeof readerRef.current.reset === "function") { readerRef.current.reset(); } } catch (e) { dbg("reader.reset error", e?.message); } readerRef.current = null; try { // 3) Stop every underlying MediaStream track const stream = streamRef.current; if (stream && typeof stream.getTracks === "function") { stream.getTracks().forEach((t) => { try { t.stop(); } catch { /* noop */ } }); } } catch (e) { dbg("stream stop error", e?.message); } streamRef.current = null; try { if (videoRef.current) videoRef.current.srcObject = null; } catch { /* noop */ } }, []); // Resolve a scanned code → existing item, else surface for "Create Draft Item" const handleCodeMatch = useCallback(async (code) => { if (!code) return; if (handledCodeRef.current === code) return; // dedupe consecutive frames handledCodeRef.current = code; dbg("detected code:", code); try { const params = companyId ? { q: code, company_id: companyId } : { q: code }; const { data } = await api.get("/items", { params }); const rows = Array.isArray(data) ? data : (data?.items || []); const hit = rows.find((it) => (it.code && it.code === code) || (it.barcode && it.barcode === code) || (it.sku && it.sku === code) ) || rows[0]; if (hit) { onResult?.({ kind: "item_match", code, item: hit }); toast.success(`Found: ${hit.name}`); onClose?.(); return; } onResult?.({ kind: "barcode_unmatched", code }); toast.info(`Code ${code} not in catalog — open "AI Identify" to create a draft item.`); } catch (e) { dbg("item lookup error", e?.message); onResult?.({ kind: "barcode", code }); } }, [companyId, onClose, onResult]); // ---- Boot effect — single source of truth for camera lifecycle ---- useEffect(() => { mountedRef.current = true; let cancelled = false; setError(""); setPermissionDenied(false); handledCodeRef.current = null; const boot = async () => { // Guard: no MediaDevices (e.g. http:// in production) if (!navigator.mediaDevices?.getUserMedia) { setError("Camera not available on this browser. Use HTTPS and a modern browser."); return; } // Guard: page not focused (Safari quirk) — still try, but log dbg("boot attempt", bootAttempt, "mode:", mode); // 1) Acquire camera stream let stream; try { stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: "environment" }, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false, }); } catch (e) { dbg("getUserMedia error", e?.name, e?.message); if (e?.name === "NotAllowedError" || e?.name === "PermissionDeniedError") { setPermissionDenied(true); setError("Camera permission denied. Click 'Retry' after allowing access in your browser settings."); } else if (e?.name === "NotFoundError" || e?.name === "DevicesNotFoundError") { setError("No camera detected on this device."); } else if (e?.name === "NotReadableError") { setError("Camera is in use by another app — close other tabs/apps and retry."); } else { setError(e?.message || "Could not start camera. Allow permission and retry."); } return; } if (cancelled || !mountedRef.current) { stream.getTracks().forEach((t) => t.stop()); return; } streamRef.current = stream; // 2) Attach to