pantry-management-frontend/quagga2/quagga2-1.12.1/docs/how-to-guides/tips-and-tricks.md

Tips and Tricks

Practical advice for getting the best results with Quagga2.

Camera Setup

Choosing the Right Camera

• Use the back camera on mobile devices (higher resolution, autofocus)
• Request environment-facing camera: facingMode: "environment"
• Avoid wide-angle cameras for barcode scanning

Optimal Distance

• Barcode should fill 50-80% of the frame width
• Too close: barcode may be out of focus
• Too far: insufficient resolution for small bars

Lighting

• Ensure even lighting across the barcode
• Avoid harsh shadows or reflections
• Enable torch/flash for dark environments:

await Quagga.CameraAccess.enableTorch();

User Experience

Visual Feedback

Show users the scan area:

inputStream: {
  area: {
    top: "25%",
    right: "10%",
    bottom: "25%",
    left: "10%",
    borderColor: "rgba(0, 255, 0, 0.7)",
    borderWidth: 2
  }
}

Audio Feedback

Play a sound on successful scan:

Quagga.onDetected(function(result) {
  new Audio('/beep.mp3').play();
  processBarcode(result.codeResult.code);
});

Performance

Reduce CPU Usage

Quagga.init({
  frequency: 10,           // Limit to 10 scans/second
  inputStream: {
    size: 640              // Reduce processing resolution
  }
});

Stop When Not Needed

// Stop scanning when modal closes
Quagga.stop();

// Remove event handlers
Quagga.offDetected();
Quagga.offProcessed();

Handling Results

Debounce Detections

Avoid processing the same barcode multiple times:

let lastScanned = '';
let lastTime = 0;

Quagga.onDetected(function(result) {
  const code = result.codeResult.code;
  const now = Date.now();
  
  if (code === lastScanned && now - lastTime < 2000) {
    return;  // Same barcode within 2 seconds
  }
  
  lastScanned = code;
  lastTime = now;
  processBarcode(code);
});

Related

• Optimize Performance - Detailed performance guide
• Handle Difficult Barcodes - Improve detection
• Camera Access API - Camera control

---

← Back to How-To Guides