tfm_ainventory/ZOOM_DEBUG_GUIDE.md

Zoom Button Debug Guide

Problem

Zoom button code exists in CameraView.tsx (lines 136-154) but only renders when hasZoom={true}. Button not appearing indicates hasZoom is false.

Root Cause Investigation

The zoom detection logic is in Scanner.tsx lines 77-83:

const video = document.querySelector(`#${scannerId} video`) as HTMLVideoElement;
const track = (video?.srcObject as MediaStream)?.getVideoTracks()[0];
const caps = track?.getCapabilities() as any;
if (track && caps?.zoom) {
  setHasZoom(true);
  setMaxZoom(caps.zoom.max || 3);
}

Why it might fail:

1. video element not found in the DOM yet
2. MediaStream not attached to video (srcObject is null/undefined)
3. Video track not initialized (getVideoTracks() returns empty array)
4. getCapabilities() returns empty object or doesn't expose zoom
5. Camera hardware doesn't support zoom capability

Debug Logging Added

Added comprehensive console logging at Scanner.tsx lines 80-97:

console.log('[Zoom Detection Debug]', {
  videoFound: !!video,
  trackFound: !!track,
  trackState: track?.readyState,
  capabilitiesExists: !!caps,
  zoomCapability: caps?.zoom,
  zoomMax: caps?.zoom?.max,
  allCapabilities: Object.keys(caps || {}),
});

How to Diagnose

Step 1: Start the app

cd /data/programare_AI/tfm_ainventory
source backend/venv/bin/activate
python -m uvicorn backend.main:app --port 8916 &
cd frontend
NEXT_PUBLIC_API_URL=http://localhost:8916 npm run dev -- --port 8917 &

Step 2: Open browser and navigate to Scanner

• Go to http://localhost:8917
• Navigate to the Scanner page
• Allow camera permissions

Step 3: Check browser console

• Open DevTools (F12)
• Go to Console tab
• Look for [Zoom Detection Debug] log
• If SUCCESS: see [Zoom Detection SUCCESS] message
• If FAILED: see [Zoom Detection FAILED] message

Step 4: Interpret Results

If you see:

[Zoom Detection Debug] {
  videoFound: true,
  trackFound: true,
  trackState: "live",
  capabilitiesExists: true,
  zoomCapability: {max: 8, min: 1, step: 1},
  zoomMax: 8,
  allCapabilities: ["width", "height", "aspectRatio", "zoom", ...]
}
[Zoom Detection SUCCESS] - hasZoom set to true, maxZoom: 8

✅ Zoom is supported! Button should appear. If it doesn't, issue is elsewhere.

If you see:

[Zoom Detection Debug] {
  videoFound: true,
  trackFound: true,
  trackState: "live",
  capabilitiesExists: true,
  zoomCapability: undefined,
  zoomMax: undefined,
  allCapabilities: ["width", "height", "aspectRatio", ...]
}
[Zoom Detection FAILED] - Camera does not support zoom capability

❌ Zoom not supported! This is expected behavior - button correctly hidden.

If you see:

[Zoom Detection Debug] {
  videoFound: false,
  trackFound: false,
  capabilitiesExists: false,
  ...
}

⚠️ Media not initialized! Camera permission likely denied or HTML5-QRCode not ready.

Next Steps Based on Findings

If zoom IS supported but button still not appearing:

1. Check CameraView.tsx prop passing - is hasZoom being passed as true?
2. Add debug log in CameraView to verify props: console.log('CameraView props:', {hasZoom})
3. Check for CSS issues - button might be rendered but invisible

If zoom NOT supported:

1. Try different browser/device - some don't expose zoom via API
2. Check browser console for permission errors
3. Try HTTPS instead of HTTP (some APIs restricted to secure context)
4. Test on mobile device - zoom support varies

Browser compatibility:

• Chrome/Chromium: Generally supports zoom (most reliable)
• Firefox: Limited zoom support via applyConstraints()
• Safari: Limited or no zoom support
• Mobile browsers: Varies significantly by platform and device

Implementation Details

Camera initialization flow:

1. Scanner.tsx useEffect starts html5-qrcode
2. After start() completes, video element is in DOM
3. Query video element and get MediaStream track
4. Call track.getCapabilities() to check zoom support
5. If zoom available, enable button; if not, hide button

Zoom control (lines 219-226):

const handleZoomChange = async (nextZoom: number) => {
  const video = document.querySelector(`#${scannerId} video`) as HTMLVideoElement;
  const track = (video?.srcObject as MediaStream)?.getVideoTracks()[0];
  if (track) {
    await track.applyConstraints({ advanced: [{ zoom: nextZoom }] as any });
    setZoom(nextZoom);
  }
};

Zoom button logic (lines 139-143):

let nextZoom = 1;
if (zoom === 1) nextZoom = Math.min(2, maxZoom);
else if (zoom < maxZoom / 2) nextZoom = Math.floor(maxZoom / 2);
else if (zoom < maxZoom) nextZoom = maxZoom;
else nextZoom = 1;

Cycles: 1x → 2x → (max/2) → max → 1x

Files Modified

• frontend/components/Scanner.tsx — Added debug logging (commit: 2c711551)

Commit

2c711551 debug: add zoom capability detection logging to Scanner.tsx