TieMeasureFlow/src/frontend/flask_app/static/js/barcode.js

/**
 * Barcode Scanner Manager
 * Integration with html5-qrcode library
 * Supports QR codes, barcodes, and camera scanning
 */

function barcodeScanner() {
  const _t = (key) => (window.BARCODE_I18N && window.BARCODE_I18N[key]) || key;

  return {
    scanning: false,
    result: null,
    error: null,
    scanner: null,
    cameraId: null,

    async startScan() {
      this.scanning = true;
      this.result = null;
      this.error = null;

      // Check library availability
      if (!window.Html5Qrcode) {
        this.error = _t('scanner_lib_not_loaded');
        this.scanning = false;
        return;
      }

      try {
        // Get available cameras
        const devices = await Html5Qrcode.getCameras();

        if (!devices || devices.length === 0) {
          this.error = _t('no_camera_available');
          this.scanning = false;
          return;
        }

        // Prefer back camera
        const backCamera = devices.find(d => d.label.toLowerCase().includes('back'));
        this.cameraId = backCamera ? backCamera.id : devices[0].id;

        // Initialize scanner
        this.scanner = new Html5Qrcode("barcode-reader");

        // Start scanning
        await this.scanner.start(
          this.cameraId,
          {
            fps: 10,
            qrbox: { width: 250, height: 250 },
            aspectRatio: 1.0
          },
          (decodedText, decodedResult) => {
            // Success callback
            this.result = decodedText;
            this.stopScan();

            // Dispatch event for parent components
            this.$dispatch('barcode-scanned', {
              code: decodedText,
              format: decodedResult.result?.format?.formatName || 'unknown',
              timestamp: new Date().toISOString()
            });
          },
          (errorMessage) => {
            // Error callback - ignore continuous scanning errors
            // Only log non-routine errors
            if (!errorMessage.includes('NotFoundException')) {
              console.debug('Scan frame error:', errorMessage);
            }
          }
        );

      } catch (err) {
        console.error('Scanner initialization error:', err);
        this.error = _t('camera_access_error');
        this.scanning = false;
      }
    },

    async stopScan() {
      if (this.scanner) {
        try {
          await this.scanner.stop();
          await this.scanner.clear();
        } catch (err) {
          console.error('Stop scan error:', err);
        }
        this.scanner = null;
      }
      this.scanning = false;
    },

    clear() {
      this.result = null;
      this.error = null;
    },

    // Cleanup on component destroy
    destroy() {
      this.stopScan();
    }
  };
}

/**
 * Barcode Input Helper
 * For integrating barcode scanning into input fields
 */
function barcodeInput() {
  return {
    value: '',
    showScanner: false,

    openScanner() {
      this.showScanner = true;
    },

    handleScan(event) {
      this.value = event.detail.code;
      this.showScanner = false;

      // Dispatch value change event
      this.$dispatch('input', { value: this.value });
      this.$dispatch('change', { value: this.value });
    },

    clear() {
      this.value = '';
      this.$dispatch('input', { value: '' });
    }
  };
}