Неточное и ненадежное сканирование штрих -кодов в веб -приложении iOS (React / TypeScript) - Barcodedetector / zxing ⇐ Javascript

[Anonymous]

Я разрабатываю веб-приложение React/TypeScript (развернутое в виде опыта, подобного PWA), которое включает в себя функцию сканера штрих-кода. Пользователи могут сканировать штрих-коды продукта (в первую очередь EAN-13, UPC-A), чтобы искать информацию о продукте. Если Barcodectector не поддерживается или не может инициализироваться, он возвращается к ZXING/Library для декодирования программного обеспечения. Устройства, где это работает довольно хорошо. < /p>
наблюдаемое поведение: < /h2>

[*] устройства Android: < /strong>, как правило, быстрое, точное и надежное в различных условиях освещения и качества штрих -коды. /> Частое «Нет Читать»: Сканер часто не может обнаружить какой -либо штрих -код, даже когда штрих -код четко видна в ViewFinder.
naccurate считывает: , когда наканируется, он иногда возвращает неверный код) (например, неверный код, или совершенно неверный код, или совершенно неверный код), или совершенно неверный код), или совершенно неверный код). /> Проблемы с фокусировкой: < /strong> На новых моделях iPhone (например, iPhone 13 Pro, 14 Pro, 15 Pro), камера изо всех сил пытается сосредоточиться на штрих-кодах крупным планом, что приводит к размытым изображениям, которые трудно декодировать. Пользователи инстинктивно пытаются приблизиться, что, кажется, ухудшает проблему. Камера и конкретный идеал и min (например, 1280x720) для обеспечения четкого видеопотока для обнаружения штрих-кода>. Шаридочные коды EAN/UPC сканируют. Я часто испытываю сканер, который вообще не обнаруживает штрих -коды, даже если они четко видны в подаче камеры. Когда на iPhone происходит сканирование, он часто неточно, возвращая неправильное прочтение или совершенно неверное значение штрих -кода. Кроме того, камера на более новых моделях iPhone в значительной степени борется с сосредоточением на штрих-кодах крупным планом, что приводит к размытым изображениям, которые невозможно для декодера. Это приводит к разочарованию медленного и ненадежного опыта для пользователей iOS по сравнению с плавной работой на Android. < /P>
Моя текущая реализация сканера: < /p>
import { useState, useRef, useCallback, useEffect } from 'react';
import { BrowserMultiFormatReader, IScannerControls } from '@zxing/library';

interface BarcodeResult {
code: string;
format: string;
}

export function useBarcodeScanner() {
const [state, setState] = useState({
isScanning: false,
error: null,
lastResult: null
});

const videoRef = useRef(null);
const zxingControlsRef = useRef(null);
const isInitializedRef = useRef(false);
const codeReaderRef = useRef
(null);

const getCodeReader = useCallback(() => {
if (!codeReaderRef.current) {
codeReaderRef.current = new BrowserMultiFormatReader();
}
return codeReaderRef.current;
}, []);

const stopScanning = useCallback(() => {
if (zxingControlsRef.current) {
zxingControlsRef.current.stop();
zxingControlsRef.current = null;
} else if (videoRef.current && videoRef.current.srcObject) {
const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
tracks.forEach(track => { if (track.readyState === 'live') track.stop(); });
}
isInitializedRef.current = false;
setState(prev => ({ ...prev, isScanning: false }));
}, []);

const startScanning = useCallback(async (onResult: (result: BarcodeResult) => void) => {
if (isInitializedRef.current) return;

setState(prev => ({ ...prev, isScanning: true, error: null }));
isInitializedRef.current = true;

try {
if ('BarcodeDetector' in window) {
// --- Native BarcodeDetector Logic ---
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
width: { ideal: 1280, min: 640 },
height: { ideal: 720, min: 480 }
}
});
if (videoRef.current) {
videoRef.current.srcObject = stream;
videoRef.current.setAttribute('playsinline', 'true');
await videoRef.current.play();

const barcodeDetector = new (window as any).BarcodeDetector({
formats: ['ean_13', 'ean_8', 'code_128', 'code_39', 'upc_a', 'upc_e']
});

let scanLoopInterval: NodeJS.Timeout;
const scanLoop = async () => {
if (!videoRef.current || videoRef.current.paused || videoRef.current.ended || !isInitializedRef.current) {
if (scanLoopInterval) clearInterval(scanLoopInterval);
return;
}
try {
const barcodes = await barcodeDetector.detect(videoRef.current);
if (barcodes.length > 0) {
const barcode = barcodes[0];
const result: BarcodeResult = { code: barcode.rawValue, format: barcode.format };
setState(prev => ({ ...prev, lastResult: result }));
onResult(result);
stopScanning(); // Stop after successful scan
}
} catch (err) { }
};
scanLoopInterval = setInterval(scanLoop, 300);
}
} else {
// --- ZXing Fallback Logic ---
const codeReader = getCodeReader();
const videoElement = videoRef.current;
if (!videoElement) throw new Error('Video element not found for ZXing scanner.');

codeReader.decodeFromVideoDevice(undefined, videoElement, (result, error, controls) => {
if (result) {
const barcodeData: BarcodeResult = { code: result.getText(), format: result.getBarcodeFormat().toString() };
setState(prev => ({ ...prev, lastResult: barcodeData }));
onResult(barcodeData);
controls.stop();
zxingControlsRef.current = null;
isInitializedRef.current = false;
}
if (error && !error.message.includes('No MultiFormat Readers were able to decode')) {
setState(prev => ({ ...prev, error: `Camera-Error: ${error.message}` }));
stopScanning();
}
})
.then(controls => { zxingControlsRef.current = controls; })
.catch(err => {
setState(prev => ({ ...prev, isScanning: false, error: err.message || 'Fehler beim Starten des Scanners mit ZXing.' }));
stopScanning();
});
}
} catch (err: any) {
setState(prev => ({ ...prev, isScanning: false, error: err.message || 'Kamera-Zugriff oder Wiedergabe fehlgeschlagen' }));
stopScanning();
}
}, [stopScanning, getCodeReader]);

useEffect(() => { return () => stopScanning(); }, [stopScanning]);

return { ...state, videoRef, startScanning, stopScanning };
}
< /code>
Крюк usebarcodescanner используется в модальном компоненте (barcodescanner.tsx), который отображает элемент для подачи камеры. < /p>
import React, { useEffect, useState } from 'react';
import { X, Camera, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
import { useBarcodeScanner } from '../hooks/useBarcodeScanner';
import { useOpenFoodFacts } from '../hooks/useOpenFoodFacts';

interface BarcodeScannerProps {
onProductFound: (productData: any) => void;
onClose: () => void;
}

const BarcodeScanner: React.FC = ({ onProductFound, onClose }) => {
const { isScanning, error: scanError, videoRef, startScanning, stopScanning } = useBarcodeScanner();
const { loading: fetchingProduct, error: fetchError, fetchProduct, clearError } = useOpenFoodFacts();
const [scanResult, setScanResult] = useState(null);
const [productFound, setProductFound] = useState(false);

useEffect(() => {
if (!scanResult && !isScanning) {
startScanning(async (result) => {
setScanResult(result.code);
const productData = await fetchProduct(result.code);
if (productData) {
setProductFound(true);
setTimeout(() => onProductFound(productData), 1500);
}
});
}
return () => stopScanning();
}, [startScanning, stopScanning, fetchProduct, onProductFound, scanResult, isScanning]);

......

export default BarcodeScanner;
< /code>
Эта проблема непоследовательного и неточного сканирования штрих -кодов на веб -приложениях для iOS, особенно по сравнению с Android, представляется общей болевой точкой для многих разработчиков. Точность сканирования в веб -приложениях для iOS? (Я знаю о HTML5-QRCode и его интеграции штрих-кодиторе, но я пытаюсь понять основную причину и потенциальные улучшения на более низком уровне, если это возможно, или если HTML5-QRCode действительно предлагает значительное преимущество за пределами просто просто упаковки). < /P>
Любые проведения, примеры кода или объяснения технических ограничений, специально подходящих для IOS. Спасибо!


Подробнее здесь: https://stackoverflow.com/questions/796 ... script-bar