Probabilmente ti trovi in una delle due situazioni. O hai ereditato un'applicazione Cordova che ancora interessa l'azienda, o stai mantenendo un'applicazione ibrida stabile mentre il team si sposta gradualmente verso strumenti più nuovi. Poi arriva una richiesta di prodotto: scansione dei codici a barre degli etichetti degli inventari, dei biglietti, dei pacchi o delle etichette delle mensole con la fotocamera del telefono.
Quello è dove lettore di codici a barre Cordova Il lavoro diventa interessante. La demo base è facile. L'integrazione di produzione non lo è. Le parti difficili sono scegliere un plugin che corrisponda ai formati dei codici a barre, configurare le autorizzazioni native in modo pulito e gestire le caratteristiche dei singoli dispositivi che si manifestano solo su dispositivi reali. Se il tuo app tocca anche le operazioni di campo o i flussi di magazzino, la funzione di scansione si collega generalmente a preoccupazioni operative più ampie come gestire componenti IT critici, dove l'app mobile diventa parte di un flusso di attività e servizi più ampio.
Cordova è ancora una pila reale nel lavoro di manutenzione aziendale. A metà degli anni 2010, la scansione dei codici a barre in Cordova era già andata oltre gli esempi di giocattolo a hybrid enterprise app costruita per Android e collegata a servizi backend, compresa una documentazione del flusso utilizzando cordova create, cordova platform add android, e un barcodeScanner-debug.apk generato in un esempio di costruzione di app pratico daSitePoint’s Cordova scanning walkthrough . Se il tuo team sta anche valutando le scelte di architettura a lungo termine, questa comparazione di applicazioni native vs applicazioni web
aiuta a delineare perché gli app hybrid continuano a comparire nei pipeline di consegna mobile serie.
- Perché Aggiungere uno Scanner di Codici a Barre alla tua App Cordova
- Scegliere il tuo Plugin di Scanner di Codici a Barre per Cordova
- Installazione e Configurazione della Piattaforma
- Implementazione dello Scanner nella tua App Code
- Test e Risoluzione dei Problemi Comuni
- Suggerimenti di prestazioni e Migrazione a Capacitor
Perché Aggiungere uno Scanner di Codici a Barre alla Tua App Cordova
Uno scanner cambia ciò che un'app Cordova può fare sul campo. Invece di chiedere agli utenti di digitare i numeri di serie, gli ID degli ordini o i codici dei prodotti, si lascia che la camera diventi il dispositivo di input. Ciò riduce la frizione, ma criticamente, riduce anche il numero di modi in cui un utente può inserire un valore sbagliato.
In pratica, lo scanning dei codici a barre si presenta dove le app mobili incontrano operazioni reali. La ricezione dei magazzini, la ricerca dei dettagli dei prodotti, la validazione dei pezzi di servizio per il campo, l'iscrizione dei visitatori e la tracciatura degli asset interni ne beneficiano tutti. Uno scanner cambia anche le aspettative degli utenti. Una volta disponibile la camera, gli utenti smettono di tollerare l'ingresso manuale code a meno che non ci sia un fallback chiaro.
Cordova ancora ha senso in modalità di manutenzione
A molti team parlano di Cordova come se fosse scomparso. Non è così. È invecchiato nel mantenimento dei portafogli aziendali pesanti, dove sostituire un'applicazione funzionante è più difficile che estenderla. Se l'app già gestisce l'autenticazione, la sincronizzazione, i form e lo storage offline, aggiungere uno scanner è spesso più rischioso che ricostruire l'intero prodotto.
Regola pratica: Non trattare una richiesta di scansione come un trigger di ri-scrittura a meno che il resto dell'app non stia già fallendo l'operazione del tuo team.
Cordova ha guadagnato il suo posto perché i plugin espongono le capacità di dispositivo nativo in un modo che il web code può utilizzare. È per questo che la scansione dei codici a barre è diventata così comune negli app mobili ibridi. Si adattava esattamente al pattern per cui Cordova è stato costruito: mettere una capacità nativa dietro un API JavaScript e lasciare che il flusso dell'app rimanga principalmente basato sul web.
Il valore è nel workflow, non nel demo
Un pulsante di scansione che restituisce il testo è la parte facile. Il lavoro principale è tutto ciò che lo circonda:
- Scegliere le simbologie supportate: L'app potrebbe avere bisogno solo di QR, o potrebbe avere bisogno di codici di vendita e logistici.
- Gestire le autorizzazioni in modo pulito: Se l'accesso alla camera fallisce una volta, gli utenti spesso assumono che il feature sia rotto.
- Progettare l'azione post-scansione: La ricerca, la validazione, la navigazione e la gestione delle duplicazioni contano più della UI della camera.
- La pianificazione della modernizzazione: Se il tuo team sta muovendo verso Capacitor, hai bisogno di un approccio che non intrappoli la funzionalità in ipotesi di Cordova solo.
Questo punto è importante. Gli squadre spesso hanno successo con l'integrazione Cordova iniziale, poi incontrano problemi durante la migrazione perché il modello di rendering nativo cambia sotto il plugin. Lo scanner funziona ancora. La anteprima non mostra dove si aspetta.
Scegliere il tuo plugin di lettore di codici a barre di Cordova
Prima di scrivere qualsiasi app code, decidi cosa stai ottimizzando. Alcune squadre hanno bisogno di un supporto dei codici a barre ampio. Altre hanno bisogno solo di un overlay della fotocamera per i flussi QR. Scegliere il plugin sbagliato all'inizio crea lavoro di riparazione in seguito, specialmente quando il prodotto chiede un altro formato di codice a barre dopo il lancio.
Il plugin che più sviluppatori riconosceranno è cordova-plugin-barcodescanner. Il suo npm pacchetto documenta un scan(success, fail) API e supporto per le simbologie comuni, compresi QR_CODE, DATA_MATRIX, UPC_A, EAN_13, CODE_128, PDF_417, e AZTEC, il che è il motivo per cui si adatta sia ai casi di utilizzo retail che di logistica, anziché solo ai casi di utilizzo basati su QR, come mostrato nel documento di documentazione del pacchetto del plugin su npm.
Per le squadre che valutano la strategia del plugin più ampiamente, questa panoramica di cosa sapere sui plugin Capacitor è utile perché evidenzia le differenze tra le vecchie ipotesi di plugin Cordova e i nuovi modelli di ponte nativo.

Cosa conta prima di installare qualcosa
Non iniziare con la popolarità da sola. Inizia con il tuo lavoro di scansione.
Se l'app deve leggere più famiglie di codici a barre in diversi contesti operativi, la copertura dei simboli è più importante di un minimo API. Se l'app ha bisogno solo di QR check-in, puoi accettare uno strumento più ristretto se offre un'esperienza della camera più semplice. Cosa che i giovani sviluppatori spesso trascurano è che il lavoro dello scanner è meno
può scansionare
- e più può scansionare gli esatti etichette utilizzate dalle operazioni senza lavorare intorno a loro.
- Una buona lista di controllo di selezione dovrebbe assomigliare a questo: Copertura dei codici a barre:
- Conferma gli esatti formati utilizzati in produzione. Piattaforma di aspettative: Verifica cosa il team supporta ancora oggi, non cosa il plugin supportava storicamente. Modello di interfaccia utente: Alcuni plugin aprono un flusso di scansione nativa. Altri aspettano un approccio di anteprima incorporata.
- Tolleranza di migrazione: Domanda se questo plugin diventerà fastidioso se l'app si sposta in Capacitor in seguito.
Un plugin che funziona in un demo ma combatte la tua layout, il ciclo di vita o il percorso di migrazione dell'app è di solito il plugin sbagliato.
Tabella di confronto dei plugin
| Caratteristica | phonegap-plugin-barcodescanner | cordova-plugin-qrscanner |
|---|---|---|
| Utilizzo principale | Scanning dei codici a barre ampio e across multipli formati | Flussi di scansione focalizzati su QR |
| API style | Pattern di callback familiare in molti progetti Cordova di vecchia data | Spesso scelto per casi d'uso di anteprima della camera in tempo reale |
| Scopo del formato del codice a barre | Meglio adatto quando il prodotto ha bisogno di più di QR | Meglio adatto quando QR è l'unica richiesta di hard |
| Rischio di migrazione | Può funzionare, ma le vecchie assunzioni possono emergere durante le migrazioni del ponte moderno | Le approcci con anteprima possono esporre più velocemente gli issue di rendering |
| Miglior adatto | Flussi di lavoro dei codici a barre per il retail, la logistica, gli asset e misti | Flussi di controllo, URL, autenticazione e solo QR |
Quella tabella riflette la compatibilità pratica, non un punteggio. Se hai bisogno di simbologie per il retail e la logistica, la categoria del plugin più ampia è spesso la scelta più sicura. Se invece scansioni solo QR e vuoi un'esperienza di anteprima più controllata, un percorso orientato a QR può essere più leggero.
La maggior parte degli errori che vedo è scegliere uno strumento focalizzato sui codici QR perché la prima versione ha bisogno solo di QR, poi costringere a UPC o Code 128 per lavorare in seguito. Se c'è anche solo una possibilità che i vostri utenti aziendali scanneranno etichette da stampanti, scaffali, contenitori o documenti di spedizione, scegliete per quel futuro ora.
Installazione e Configurazione della Piattaforma
L'integrazione si rompe di solito prima della prima scansione, non dopo. La maggior parte degli errori deriva da una deriva di configurazione tra le aspettative JavaScript e la configurazione della piattaforma nativa. Trattate questa parte come un elenco di controllo, non come un'installazione rapida.
Un flusso di implementazione solido inizia con l'aggiunta del plugin o SDK, la creazione del contesto di cattura, la riduzione delle simbologie ai codici che si utilizzano in produzione, la configurazione dell'interfaccia utente e solo quindi l'iscrizione di un ascoltatore di scansione. Questa sequenza è indicata nella guida di Scandit per Cordova per SparkScan, e corrisponde a come le integrazioni di scanner professioniste rimangono mantenibili negli app ibridi, come descritto nella guida dello sviluppatore di Scandit per il Cordova di scansione dei codici a barre. Se il vostro app è ancora fortemente ibrido a livello di architettura, questa guida a sviluppo di app ibride di Cordova è un utile compagno.

Inizia con il flusso di integrazione
Una funzionalità di scanner funziona meglio quando decidi questi elementi per primi:
- Quali tipi di codici a barre l'app dovrebbe accettare.
- Se lo scansionamento è un'azione a schermo intero o fa parte di un flusso di lavoro integrato.
- Cosa l'applicazione dovrebbe fare dopo una lettura riuscita.
- Cosa esiste come fallback quando la camera non può essere utilizzata.
Quello che mantiene l'installazione del plugin legata a un flusso di lavoro reale invece di una capacità di dispositivo generica.
I passaggi di installazione di Cordova
Per una configurazione tradizionale di Cordova utilizzando il plugin di scansione del codice a barre comune, il punto di partenza è il comando di installazione standard documentato dal pacchetto:
cordova plugin add cordova-plugin-barcodescanner
Una sequenza di configurazione del progetto tipica assomiglia a questo:
cordova create barcodeScannerApp
cd barcodeScannerApp
cordova platform add android
cordova platform add ios
cordova plugin add cordova-plugin-barcodescanner
cordova build android
cordova build ios
Quella sequenza è semplice, ma non fermarti lì. Costruisci immediatamente dopo l'installazione del plugin per catturare le questioni di dipendenza nativa prima di collegare l'interfaccia utente code. Se la costruzione fallisce, risolvi quella prima.
La configurazione nativa che rompe di solito per prima
Sul iOS, l'accesso alla camera deve essere dichiarato correttamente nelle impostazioni dei progetti nativi. Se la descrizione dell'utilizzo delle autorizzazioni manca o è vaga, lo scanner non comporterà come una funzione funzionante per gli utenti. Aggiungi una descrizione di privacy della camera chiara in Info.plist che spiega perché l'app necessita della fotocamera.
Su Android, revisiona le voci del manifesto e le autorizzazioni relative ai plugin dopo l'installazione. Il plugin potrebbe aggiungere ciò di cui ha bisogno, ma i progetti più vecchi spesso contengono modifiche di configurazione accumulate, impostazioni Gradle personalizzate o sovrapposizioni di plugin che causano avvisi di compilazione o confusione di esecuzione. Non assumere che il manifesto sia pulito solo perché il plugin è stato installato con successo.
Usa questo elenco di controllo rapido:
- Verifica le versioni delle piattaforme: I progetti Cordova più vecchi spesso contengono pacchetti di piattaforma obsoleti.
- Revisiona le richieste di autorizzazione: La formulazione e il momento sono importanti per la fiducia dell'utente.
- Testa su un dispositivo reale presto: Gli emulatori non ti diranno abbastanza sul comportamento della fotocamera.
- Mantieni lo scopo dello scanner stretto: Abilita solo i tipi code accettati dal tuo workflow.
Se il tuo scanner ha bisogno di solo uno o due formati, configura per quelli prima. La scansione ampia sembra flessibile, ma spesso rende la debug molto più lento perché ogni etichetta non leggibile diventa ambigua.
Per i giovani sviluppatori, la lezione chiave è questa: l'installazione non è solo un comando del terminale. È l'allineamento del progetto nativo. Se Android e iOS non sono configurati intenzionalmente, il layer JavaScript non ti salverà.
Implementare lo Scanner nella tua App Code
Una volta installato il plugin e l'app è stata costruita, mantieni la prima implementazione noiosa. Metti l'azione di scansione dietro un pulsante, logga il risultato completo e dimostra che il flusso di callback funziona prima di progettare un'interfaccia utente accattivante.
Il modello di scansione Cordova comune utilizza il metodo del plugin. Quel tipo di callback è vecchio, ma è affidabile nei codici di base legacy e facile da avvolgere in seguito se il tuo app ha spostato verso promesse o astrazioni di TypeScript. Se desideri un modello mentale più chiaro per capire come le chiamate web __CAPGO_KEEP_0__ chiamano native __CAPGO_KEEP_1__ in questi progetti, questa spiegazione di come __CAPGO_KEEP_0__ collega web e native __CAPGO_KEEP_1__ ti aiuterà, anche se sei ancora a codificare in Cordova oggi. scan(success, fail) method. That callback style is old, but it’s dependable in legacy codebases and easy to wrap later if your app has moved toward promises or TypeScript abstractions. If you want a clearer mental model for how web code calls native code in these projects, this explanation of how Capacitor bridges web and native code Ecco una implementazione minima per un'app Cordova più vecchia:

Se il tuo scanner ha bisogno di solo uno o due formati, configura per quelli prima. La scansione ampia sembra flessibile, ma spesso rende la debug molto più lento perché ogni etichetta non leggibile diventa ambigua.
Per i giovani sviluppatori, la lezione chiave è questa: l'installazione non è solo un comando del terminale. È l'allineamento del progetto nativo. Se Android e iOS non sono configurati intenzionalmente, il layer JavaScript non ti salverà.
<button id="scan-button">Scan barcode</button>
<div id="scan-result"></div>
document.addEventListener('deviceready', function () {
var button = document.getElementById('scan-button');
var resultEl = document.getElementById('scan-result');
button.addEventListener('click', function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
if (result.cancelled) {
resultEl.textContent = 'Scan cancelled';
return;
}
resultEl.textContent =
'Text: ' + result.text +
' | Format: ' + result.format;
},
function (error) {
resultEl.textContent = 'Scan failed: ' + error;
}
);
});
});
Fa tre cose utili. Aspetta per deviceready, lega la scansione a un'azione dell'utente intenzionale e gestisce sia il successo che il fallimento in modo esplicito. Non saltare il caso annullato. Gli utenti si allontanano dalle flussi della camera tutto il tempo.
Esempio di TypeScript
Se il tuo progetto utilizza TypeScript, definisci la forma del risultato da te stesso in modo che il resto dell'app possa consumarlo in modo pulito:
interface BarcodeScanResult {
text: string;
format: string;
cancelled: boolean;
}
function scanBarcode(): void {
cordova.plugins.barcodeScanner.scan(
(result: BarcodeScanResult) => {
if (result.cancelled) {
renderStatus('Scan cancelled');
return;
}
handleScannedCode(result);
},
(error: unknown) => {
renderStatus(`Scan failed: ${String(error)}`);
}
);
}
function handleScannedCode(result: BarcodeScanResult): void {
renderStatus(`Scanned ${result.format}: ${result.text}`);
if (!result.text) {
renderStatus('Empty scan result');
return;
}
lookupItemByCode(result.text);
}
function renderStatus(message: string): void {
const el = document.getElementById('scan-result');
if (el) el.textContent = message;
}
function lookupItemByCode(code: string): void {
console.log('Lookup code:', code);
}
Questa versione separa la scansione dalla logica commerciale. Ciò conta perché il plugin dello scanner dovrebbe catturare solo l'input. La validazione, la ricerca e la navigazione appartengono altrove.
Cosa fare con il risultato della scansione
Un buon flusso post-scansione è di solito uno di questi:
- Flusso di ricerca: Utilizza il testo scansito per estrarre un record di prodotto, ordine o asset.
- Flusso di validazione: Confronta il valore scansito con un code atteso già sullo schermo.
- Flusso di navigazione: Ridireziona l'utente in una task legata all'oggetto scansito.
- Cattura flusso: Salva il valore localmente per una sincronizzazione successiva.
Non lasciare che il callback dello scanner diventi un contenitore per chiamate API, aggiornamenti DOM, analisi e navigazione. Passa il valore velocemente.
Anche, registra il risultato raw durante le prime fasi di testing. Anche se la tua UI di produzione ha bisogno solo di text, il valore restituito format è utile per la risoluzione dei problemi di etichette non corrispondenti. Se le operazioni dicono “lo scanner non può leggere questo code,” il formato dei dati spesso ti dice se il problema è il tipo di codice a barre, non la qualità del codice a barre.
Testing e Risoluzione dei Problemi Comuni
Most barcode scanner Cordova issues don’t come from the scan API itself. They come from the boundary between web UI, native views, and device permissions. Here, clean demos turn into confusing bug reports.
The hardest issue to diagnose is the Android rendering bug that shows up during Capacitor migrations or mixed Cordova-Capacitor setups. A developer in Capacitor issue #1213 described it plainly: “Ho provato questo plugin sul mio capacitor app ma sembra che lo scanner sia dietro l'app”, e la soluzione richiede rendere il background del webview nativo trasparente insieme alle modifiche di trasparenza DOM, che le guide standard di Cordova non coprono, come documentato nel Capacitor problema di rendering Android. Se stai debuggando una migrazione ibrida, questa guida al debugging Capacitor app è utile tenere aperta.
Il bug del preview Android
Sintomo
Avvii lo scanner. I permessi sembrano essere a posto. Non accade nessun crash evidente. Ma il preview della camera appare invisibile, bloccato o 'dietro' l'interfaccia utente dell'app.
Causa
La vista dello scanner nativo e la vista web sono strati in modo diverso rispetto al plugin Cordova originale aspettato. Su Android nei settaggi Capacitor-style, il background della vista web può rimanere opaco, quindi il preview nativo esiste ma rimane nascosto sotto di esso.
Soluzione
Applica un setup di vista trasparente su entrambi i lati:
- Lato nativo: Imposta il background della vista web a trasparente.
- Sito web: Elimina i background opachi dagli elementi del contenitore che si trovano sopra la preview dello scanner.
- Lato layout: Controlla i contenitori delle pagine di framework, le conchiglie modal e i wrapper a schermo intero per i colori di sfondo predefiniti.
- Lato di testing: Valida su un dispositivo Android fisico perché il comportamento del layout può essere ingannevole nelle conchiglie di sviluppo.
Questo è il bug che fa pensare ai developer che il plugin sia rotto quando in realtà è un problema di composizione della vista.
Fallimenti e falsi negativi delle autorizzazioni
Gli errori di autorizzazione falliscono in modi che sembrano bug dello scanner.
Se l'utente rifiuta l'accesso alla camera, il callback potrebbe visualizzare un errore generico o lo scanner potrebbe non presentarsi come previsto. Tratta la negazione delle autorizzazioni come un ramo normale nella UI. Informati l'utente su cosa è successo e come riprovare dopo aver abilitato l'accesso. Soprattutto su iOS, il testo delle autorizzazioni poco chiaro crea disaffezione prima che l'utente veda lo scanner.
Alcune abitudini aiutano:
- Attiva lo scanning da un'azione utente chiara: Le richieste di permesso sembrano meno sospette.
- Mostra l'input di fallback: L'ingresso manuale mantiene la workflow in vita.
- Testa le vie di negazione e di retry: Molti team testano solo la via felice una volta.
Problemi di build e di testing su dispositivi
Alcuni errori si manifestano solo su certi ambienti.
| Problema | Causa probabile | Soluzione pratica |
|---|---|---|
| Lo scanner si apre ma non restituisce risultati utili | Formato di codice a barre non supportato o inaspettato | Testa con etichette note che corrispondono al tuo caso d'uso configurato |
| La costruzione si interrompe dopo l'installazione del plugin | Drift di piattaforma o dipendenza in un progetto più vecchio | Riconcilia i pacchetti di piattaforma prima di modificare l'app code |
| Funziona in un contenitore di app ma non in un altro | Interferenza di layer di visualizzazione o CSS | Riduci la schermata a un layout minimale e aggiungi gli stili gradualmente |
| Il comportamento dell'emulatore è ingannevole | La simulazione della camera non riflette la realtà del dispositivo | Testa su hardware Android e iPhone fisico presto |
Riduci la pagina a un solo bottone e un elemento di risultato quando si debugga. Se il lettore funziona lì, il tuo problema è di solito il layout o il contenitore di app code, non il plugin
Consigli di prestazioni e Migrazione a Capacitor
Un lettore di codici a barre può decodificare correttamente e fallire comunque l'utente nella pratica. Il problema si manifesta spesso come rallentamento, scintille, glitch della anteprima della fotocamera o una schermata Android che si comporta in modo diverso su dispositivi dello stesso pool di test.
In vecchie applicazioni Cordova, il decoder è spesso il punto debole. La view web, la layering della view e il code che reagisce ai risultati di scansione causano più problemi del riconoscimento dei codici a barre stesso.
Inizia a mantenere la schermata di scansione ristretta nel campo di applicazione. Se la schermata è destinata a scansionare etichette di inventario, lasciala scansionare etichette di inventario. I filtri aggiuntivi, le finestre animate e gli aggiornamenti di stato ampi aggiungono lavoro di ridisegno proprio dove la rendering della view web di Android è già fragile.
Un paio di modifiche tendono a dare risultati rapidi:
- Limitare i formati di codici a barre accettati se il tuo plugin lo supporta. Ciò riduce le letture false e rende più facile da ragionare sulla copertura dei test.
- Tenere la logica post-scansione breve. Analizza, validati e aggiorna la parte UI più piccola possibile.
- Blocca le letture duplicate per un momento. Alcuni dispositivi invieranno lo stesso risultato diverse volte prima che l'utente sposti la fotocamera.
- Progettare l'ingresso manuale nel flusso. Etichette danneggiate, scarsa illuminazione e imballaggio riflettente ancora accadono in ambienti di produzione.
- Segui attentamente il costo di ripainting di Android. Overlays pesanti, transizioni CSS e componenti stratificati possono destabilizzare la preview della telecamera all'interno di un webview Cordova.

Un percorso di migrazione pratico per Capacitor
La migrazione più pulita da Cordova a Capacitor è in fasi, non eroica. Gli squadri si mettono in difficoltà quando scambiano il contenitore dell'app, il plugin di scansione, il flusso di autorizzazioni e gli overlay di interfaccia utente in un'unica passata, poi non riescono a capire quale cambiamento ha causato il guasto.
Usa questo ordine invece:
-
Esegui un audit dei plugin attuali
Elencare tutti i plugin Cordova e segnare ogni uno come attivo, sostituibile o a rischio perché dipende da comportamenti di piattaforma più vecchi. -
Sposta il contenitore dell'app per primo
Esegui l'app web esistente all'interno di Capacitor prima di sostituire il plugin di scansione code. Ciò separa le questioni relative al contenitore da quelle relative ai plugin. -
Conserva i plugin Cordova per una breve transizione se necessario
La compatibilità temporanea è spesso più sicura che non riscrivere lo scanner, l'accesso ai file e la gestione delle autorizzazioni nello stesso momento. -
Sostituire le parti dello scanner fragili in anticipo
Gli plugin vecchi che dipendono da overlay personalizzati, comportamento Android non documentato o gestione della fotocamera obsoleta dovrebbero essere messi in coda.
La bug della preview della fotocamera Android merita una particolare attenzione perché spreca molto tempo di debug. Ho visto schermate dello scanner fallire perché la preview nativa si trova dietro la view web, si taglia ai bordi o si rende nero su dispositivi Android specifici. In quel momento, il plugin del codice a barre viene incolpato per primo, anche se la composizione della view è l'aspetto sottostante.
Trattalo come un'indagine di rendering e non solo come un'indagine dello scanner. Elimina gli overlay decorativi. Riduci la pagina al preview, un trigger e un campo di risultato. Se il preview diventa stabile dopo questo, il problema è di solito la tua struttura dello schermo o il CSS, non il decoding.
Questo è anche dove inizia a giustificarsi la migrazione a Capacitor. Capacitor non elimina ogni bug della fotocamera, ma di solito ti dà una frontiera più pulita tra la gestione delle view native e la UI web code. Per la scansione dei codici a barre, @capgo/camera-preview visualizza una feed di fotocamera in tempo reale come overlay nativo con controlli personalizzabili, quindi puoi decodificare le frame in JavaScript senza che la preview si trovi dietro la view web. Per la scansione aziendale su dispositivi Zebra, @capgo/capacitor-zebra-datawedge gestisce i profili DataWedge e i trigger di scansione. Per i flussi di lavoro dei tag NFC, @capgo/capacitor-nfc gestisce la scoperta, la lettura e la scrittura di tag nativi su iOS e Android.
I progetti Cordova tendono a rompersi a causa dell'età dei plugin, della deriva di piattaforma e delle assunzioni nascoste all'interno delle integrazioni più vecchie. Capacitor i progetti espongono problemi diversi, soprattutto intorno alla gestione del ciclo di vita e alla layering nativa, ma quelle fallite sono più facili da tracciare perché il lato nativo è più esplicito.
Se il tuo attuale scanner Cordova funziona solo dopo una pila di correzioni specifiche per dispositivo, smetti di aggiungere patch. Stabilizza lo schermo di scansione, conferma se il bug di anteprima Android è veramente un problema di layering webview e poi migra in passaggi controllati. Quel percorso è più lento per una settimana e più veloce per il resto del progetto.