Bangun Aplikasi Scanner Barcode Cordova: Panduan 2026

Anda mungkin berada di salah satu dua situasi. Atau Anda telah mewarisi aplikasi Cordova yang masih penting bagi bisnis, atau Anda menjaga aplikasi hybrid stabil hidup sementara tim perlahan-lahan bergeser ke alat yang lebih baru. Kemudian permintaan produk tiba: scan label inventori, tiket, paket, atau label rak dengan kamera ponsel.

Di mana scanner barcode Cordova pekerjaan menjadi menarik. Demo dasar mudah. Integrasi produksi tidak. Bagian sulit adalah memilih plugin yang sesuai dengan format barcode, mengonfigurasi izin native dengan bersih, dan menghadapi kekurangan platform yang hanya muncul pada perangkat asli. Jika aplikasi Anda juga menyentuh operasi lapangan atau aliran inventori, fitur scanning biasanya terhubung dengan kekhawatiran operasional yang lebih luas seperti menangani komponen IT kritis, di mana aplikasi mobile menjadi bagian dari aliran aset dan layanan yang lebih besar.

Cordova masih merupakan stack nyata dalam pekerjaan perawatan perusahaan. Pada pertengahan 2010-an, scanning barcode di Cordova telah bergerak jauh dari contoh mainan ke aplikasi hybrid bisnis yang dibangun untuk Android dan terhubung ke layanan backend, termasuk aliran yang terdokumentasi menggunakan cordova create, cordova platform add android, dan kode yang dihasilkan barcodeScanner-debug.apk di contoh pembangunan aplikasi nyata dari panduan skaning Cordova dariSitePoint . Jika tim Anda juga mempertimbangkan pilihan arsitektur jangka panjang, perbandingan ini dari aplikasi native vs aplikasi web

membantu menggambarkan mengapa aplikasi hybrid masih muncul di jalur pengiriman mobile yang serius.

• Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova Anda
  • Cordova masih relevan dalam mode perawatan
  • Nilainya ada dalam alur kerja, bukan demo
• Pilih Plugin Scanner Barcode Cordova Anda
  • Yang penting sebelum Anda menginstal apa pun
  • Tabel Perbandingan Plugin
• Pemasangan dan Konfigurasi Platform
  • Mulai dengan alur integrasi
  • Langkah-langkah instalasi Cordova
  • Konfigurasi native yang biasanya rusak pertama
• Mengimplementasikan Scanner di Aplikasi Anda Code
  • Contoh JavaScript sederhana
  • Contoh TypeScript
  • Apa yang dapat dilakukan dengan hasil scan
• Pengujian dan Mengatasi Kesalahan Umum
  • Pratinjau Android di balik bug aplikasi
  • Gagal izin dan hasil palsu negatif
  • Issue pengembangan dan pengujian perangkat
• Tips Kinerja dan Migrasi ke Capacitor
  • Jalan migrasi nyata ke Capacitor

Mengapa Menambahkan Scanner Barcode ke Aplikasi Cordova

Scanner mengubah apa yang dapat dilakukan aplikasi Cordova di lapangan. Sebaliknya dari meminta pengguna untuk mengetikkan serial, ID pesanan, atau kode produk, Anda biarkan kamera menjadi perangkat input. Itu mengurangi gesekan, tetapi kritis, itu mengurangi jumlah cara pengguna dapat memasukkan nilai yang salah.

Dalam prakteknya, scanning barcode muncul di mana aplikasi mobile bertemu operasi nyata. Penerimaan gudang, pencarian retail, validasi bagian layanan lapangan, pendaftaran pengunjung, dan pengawasan aset internal semua mendapat manfaat dari itu. Scanner juga mengubah harapan pengguna. Setelah kamera tersedia, pengguna berhenti menoleransi masukan manual code kecuali ada fallback yang jelas.

Aplikasi Cordova masih relevan dalam mode perawatan

Apa yang terjadi dengan Cordova? Ini tidak pernah hilang. Ini hanya berkembang menjadi portfolio perusahaan yang memerlukan perawatan berat, di mana mengganti aplikasi yang berfungsi lebih sulit daripada memperluasnya. Jika aplikasi sudah menghandle autentikasi, sinkronisasi, formulir, dan penyimpanan offline, menambahkan scanner seringkali lebih berisiko rendah daripada membangun produk secara keseluruhan.

Aturan praktis: Tidak perlu menganggap permintaan scan sebagai trigger pengulangan kecuali aplikasi lainnya sudah gagal dalam operasional tim Anda.

Cordova juga mendapatkan tempatnya karena plugin mengekspos kemampuan perangkat native dalam cara yang dapat digunakan oleh web code. Itulah mengapa scanning barcode menjadi sangat umum dalam aplikasi mobile hybrid. Ini sesuai dengan pola yang dibangun Cordova: letakkan kemampuan native di belakang JavaScript API dan biarkan aplikasi tetap berbasis web.

Nilainya ada dalam alur kerja, bukan demo

Tombol scanner yang mengembalikan teks adalah bagian yang mudah. Kerja utama adalah segala sesuatu di sekitarnya:

• Pemilihan simbolologi yang didukung: Aplikasi Anda mungkin hanya memerlukan QR saja, atau mungkin memerlukan kode logistik dan retail juga.
• Pengelolaan izin dengan bersih: Jika akses kamera gagal sekali, pengguna sering kali menganggap fitur itu rusak.
• Desain aksi setelah scan: Pencarian, validasi, navigasi, dan pengelolaan duplikat lebih penting daripada antarmuka kamera.
• Perencanaan modernisasi: Jika tim Anda sedang bergerak menuju Capacitor, Anda membutuhkan pendekatan yang tidak memasukkan fitur ke dalam asumsi Cordova saja.

Poin terakhir itu penting. Banyak tim berhasil dengan integrasi Cordova awal, lalu mengalami kesulitan selama migrasi karena model rendering native berubah di bawah plugin. Scanner masih berfungsi. Tapi preview tidak menampilkan seperti yang diharapkan.

Pemilihan Plugin Barcode Cordova

Sebelum menulis aplikasi code, putuskan apa yang Anda optimalkan. Beberapa tim membutuhkan dukungan barcode yang luas. Lainnya hanya membutuhkan overlay kamera untuk alur QR. Memilih plugin yang salah di awal akan menciptakan rework di kemudian hari, terutama ketika produk meminta satu format barcode lagi setelah peluncuran.

Plugin yang paling banyak pengembang akan mengenali adalah cordova-plugin-barcodescanner. Paket npm plugin ini mendokumentasikan npm dan dukungan untuk simbologi umum termasuk scan(success, fail) QR_API, DATA_MATRIX, UPC_A, EAN_13, __CAPGO_KEEP_1___128, PDF_417, dan AZTEC QR_CODE, DATA_MATRIX, UPC_A, EAN_13, CODE_128, PDF_417, and AZTECpembahasan dokumentasi paket plugin pada __CAPGO_KEEP_0__ plugin package documentation on npm.

Perencanaan modernisasi: apa yang perlu diketahui tentang Capacitor plugin bermanfaat karena menyoroti perbedaan antara asumsi plugin Cordova yang lebih tua dan model jembatan asli yang lebih baru

Apa yang penting sebelum Anda menginstal apa pun

Tidak mulai dengan popularitas sendiri. Mulai dengan pekerjaan pemindaian Anda

Jika aplikasi harus membaca kode barcode keluarga yang berbeda di konteks operasional yang berbeda, dukungan simbolologi yang luas lebih penting daripada API yang minimal. Jika aplikasi hanya membutuhkan QR check-in, Anda dapat menerima alat yang lebih sempit jika memberikan pengalaman kamera yang lebih sederhana. Apa yang developer junior sering melewatkan adalah bahwa pekerjaan pemindaian kurang tentang 'apakah dapat memindai' dan lebih tentang 'apakah dapat memindai label yang tepat yang digunakan oleh operasi tanpa kerja sekitar yang tidak nyaman'

Daftar pemeriksaan yang baik seperti ini:

• Koverasi kode barcode: Konfirmasi format yang tepat yang digunakan di produksi.
• Harapan platform: Tentukan apa yang tim masih mendukung hari ini, bukan apa yang plugin mendukung secara historis.
• Model UI: Beberapa plugin membuka alur scanner native. Lainnya mengharapkan pendekatan pratinjau terintegrasi.
• Makanan toleransi migrasi: Tanyakan apakah plugin ini akan menjadi menyakitkan jika aplikasi berpindah ke Capacitor nanti.

Plugin yang berfungsi di demo tetapi bertempur dengan tata letak aplikasi, siklus hidup, atau jalur migrasi biasanya adalah plugin yang salah.

Meja perbandingan plugin

Jangan lupa bahwa tabel tersebut mencerminkan kenyamanan praktek, bukan skor. Jika Anda memerlukan simbolologi retail dan logistik, kategori plugin yang lebih luas biasanya pilihan yang lebih aman. Jika Anda hanya memindai QR dan ingin pengalaman preview yang lebih terkendali, jalur yang berorientasi QR dapat lebih ringan.

Kesalahan yang paling sering saya lihat adalah memilih alat QR karena rilis pertama hanya memerlukan QR, kemudian memaksa alat tersebut untuk UPC atau Code 128 bekerja kemudian. Jika ada kemungkinan pengguna bisnis Anda akan memindai label dari printer, rak, wadah, atau dokumen pengiriman, pilih untuk masa depan sekarang.

Instalasi dan Konfigurasi Platform

Integrasi biasanya gagal sebelum skanner pertama kali digunakan, bukan setelahnya. Banyak kegagalan berasal dari pergeseran konfigurasi antara harapan JavaScript dan konfigurasi platform native. Tatal bagian ini seperti daftar checklist, bukan instalasi cepat.

Alur implementasi yang solid dimulai dengan menambahkan plugin atau SDK, membuat konteks tangkap, mempersempit simbologi untuk kode yang digunakan dalam produksi, mengonfigurasi UI, dan hanya kemudian mendaftarkan listener skanner. Urutan tersebut disebutkan dalam panduan Cordova Scandit untuk SparkScan, dan sesuai dengan cara integrasi skanner profesional tetap dapat dipelihara dalam aplikasi hybrid, seperti yang dijelaskan dalam Panduan pengembang Scandit untuk Cordova skanning barcode. Jika aplikasi Anda masih sangat hybrid pada tingkat arsitektur, panduan ini untuk Pengembangan aplikasi hybrid Cordova adalah mitra yang sangat membantu.

Mulai dengan alur integrasi

Fitur skanner akan lebih baik jika Anda memutuskan hal-hal berikut terlebih dahulu:

1. Jenis kode barcode yang aplikasi harus menerima.
2. Apakah penginderaan adalah aksi layar penuh atau bagian dari alur kerja yang diintegrasikan.
3. Apakah aplikasi harus melakukan apa setelah membaca sukses.
4. Apakah ada fallback ketika kamera tidak dapat digunakan.

Yang menjaga plugin instalasi terikat pada alur kerja nyata daripada kemampuan perangkat umum.

Langkah instalasi Cordova

Untuk pengaturan Cordova tradisional menggunakan plugin pemindai kode batang umum, titik awalnya adalah perintah instalasi standar yang dokumentasi oleh paket:

cordova plugin add cordova-plugin-barcodescanner

Sebuah urutan pengaturan proyek biasa terlihat seperti ini:

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

Urutan itu sederhana, tapi jangan berhenti di sana. Bangunlah segera setelah instalasi plugin untuk menangkap masalah dependensi native sebelum Anda menghubungkan UI code. Jika bangun gagal, selesaikan itu terlebih dahulu.

Konfigurasi native yang biasanya patah pertama

On iOS, penggunaan akses kamera harus dideklarasikan dengan benar dalam pengaturan proyek native. Jika deskripsi penggunaan privasi kamera kosong atau kabur, pemindai tidak akan berperilaku seperti fitur yang berfungsi kepada pengguna. Tambahkan deskripsi privasi kamera yang jelas di Info.plist itu menjelaskan mengapa aplikasi membutuhkan kamera.

On Android, tinjau entri manifest dan izin plugin setelah instal. Plugin mungkin menambahkan apa yang diperlukan, tetapi proyek lama sering kali mengandung perubahan konfigurasi yang terkumpul, pengaturan Gradle yang disesuaikan, atau penggunaan plugin yang berlebihan yang menyebabkan peringatan pembangunan atau kebingungan waktu runtime. Jangan asumsikan manifest bersih hanya karena plugin terinstal dengan sukses.

Pilih checklist cepat ini:

• Tinjau versi platform: Proyek Cordova yang lebih tua sering kali membawa paket platform yang ketinggalan zaman.
• Tinjau permintaan izin: Penyebutan dan waktu penting untuk kepercayaan pengguna.
• Uji pada perangkat nyata awal: Emulator tidak akan memberitahu Anda cukup tentang perilaku kamera.
• Tetapkan ruang skanner sempit: Aktifkan hanya jenis code yang diterima oleh alur kerja Anda.

Jika scanner Anda hanya memerlukan satu atau dua format, konfigurasi untuk format tersebut terlebih dahulu. Penggunaan skanner yang luas terdengar fleksibel, tetapi seringkali membuat debugging lebih lambat karena setiap label yang tidak dapat dibaca menjadi ambigu.

Untuk para pengembang junior, pelajaran utama adalah ini: instalasi bukan hanya perintah terminal. Ini adalah penyesuaian proyek native. Jika Android dan iOS tidak dikonfigurasi secara sengaja, lapisan JavaScript tidak akan menyelamatkan Anda.

Mengimplementasikan Scanner di Aplikasi Anda Code

Setelah plugin diinstal dan aplikasi dibangun, jaga implementasi pertama sederhana. Letakkan aksi scan di belakang tombol, log hasil penuh, dan buktikan alur panggilan callback berfungsi sebelum mendesain UI yang terpolish.

Gaya skanner Cordova yang umum menggunakan metode scan(success, fail) Gaya callback ini sudah kuno, tetapi masih dapat diandalkan dalam kodebasis legasi dan mudah diaplikasikan lagi jika aplikasi Anda telah berpindah ke promes atau abstraksi TypeScript. Jika Anda ingin memiliki model mental yang lebih jelas tentang bagaimana web code memanggil native code dalam proyek-proyek ini, penjelasan tentang bagaimana Capacitor menghubungkan web dan native code membantu, bahkan jika Anda masih mengkode dalam Cordova hari ini.

Contoh JavaScript sederhana

Berikut adalah implementasi minimal untuk aplikasi Cordova yang lebih tua:

<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;
      }
    );
  });
});

ini melakukan tiga hal yang berguna. Ini menunggu devicereadymengikat skanning ke tindakan pengguna yang sengaja, dan mengatasi baik kesuksesan maupun kegagalan secara eksplisit. Jangan lewatkan kasus dibatalkan. Pengguna keluar dari aliran kamera semua waktu.

Contoh TypeScript

Jika proyek Anda menggunakan TypeScript, definisikan bentuk hasil sendiri sehingga bagian lain aplikasi dapat mengonsumsinya dengan bersih:

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);
}

Versi ini memisahkan skanning dari logika bisnis. Hal ini penting karena plugin scanner hanya harus menangkap input. Validasi, pencarian, dan navigasi milik tempat lain.

Apa yang harus dilakukan dengan hasil scan

Aliran post-scan yang baik biasanya salah satu dari ini:

• Aliran pencarian: Menggunakan teks yang di-scan untuk mengambil rekaman produk, pesanan, atau aset.
• Aliran validasi: Menggambarkan nilai yang di-scan terhadap nilai yang diharapkan code yang sudah ada di layar.
• Aliran navigasi: Arahkan pengguna ke tugas yang terkait dengan item yang di-scan.
• Alur Perekaman: Simpan nilai secara lokal untuk sinkronisasi nanti.

Jangan biarkan callback scanner menjadi tempat pembuangan untuk API panggilan, pembaruan DOM, analisis, dan navigasi. Tukarkan nilai dengan cepat.

Selain itu, log hasil mentah selama tes awal. Bahkan jika UI produksi hanya memerlukan textnilai yang dikembalikan format bermanfaat untuk debugging label yang tidak sesuai. Jika operasi mengatakan “scanner tidak dapat membaca code ini,” format data seringkali memberitahu Anda apakah masalahnya adalah jenis barcode, bukan kualitas barcode.

Pengujian dan Mengatasi Kesalahan Umum

Masalah scanner barcode Cordova paling tidak berasal dari proses scan API itu sendiri. Mereka berasal dari batasan antara UI web, tampilan native, dan izin perangkat. Di sini, demo yang bersih berubah menjadi laporan bug yang membingungkan.

Masalah yang paling sulit untuk didiagnosis adalah bug rendering Android yang muncul selama Capacitor migrasi atau pengaturan mixed Cordova-Capacitor . Seorang pengembang di Capacitor issue #1213 menggambarkannya dengan jelas: Saya mencoba plugin ini pada aplikasi capacitor saya, tapi tampaknya scanner berada di belakang aplikasi, dan perbaikan memerlukan membuat latar webview native transparan bersama dengan perubahan transparansi DOM yang sesuai, yang biasanya tidak dibahas dalam tutorial Cordova standar, seperti yang terdokumentasi di Capacitor Masalah Rendering Android. Jika Anda sedang debugging migrasi hybrid, panduan debugging __CAPGO_KEEP_0__ aplikasi ini patut Anda simpan terbuka. debugging Capacitor apps Masalah Android di Balik Aplikasi

Gejala

Mengaktifkan scanner. Izin tampaknya baik-baik saja. Tidak ada crash yang jelas terjadi. Namun, preview kamera tampaknya tidak terlihat, terblokir, atau 'tersembunyi' di balik UI aplikasi.
Penyebab

Tampilan scanner native dan tampilan webview berlapis berbeda dengan plugin Cordova asli yang diharapkan. Pada Android dalam konfigurasi __CAPGO_KEEP_0__-style, latar belakang webview dapat tetap transparan, sehingga preview native ada tetapi tetap tersembunyi di bawahnya.
The native scanner view and the webview are layered differently than the original Cordova plugin expected. On Android in Capacitor-style setups, the webview background can remain opaque, so the native preview exists but stays hidden beneath it.

Solusi
Terapkan pengaturan tampilan transparan pada kedua sisi:

• Sisi Native: Atur latar belakang WebView menjadi transparan.
• Sisi web: Hapus latar belakang yang tidak transparan dari elemen-elemen kontainer yang berada di atas preview scanner.
• Sisi tata letak: Periksa pembungkus layar penuh, kerangka modal, dan kontainer halaman framework untuk warna latar belakang default.
• Sisi pengujian: Validasi pada perangkat Android fisik karena perilaku tata letak dapat menipu dalam shell pengembangan.

Masalah ini membuat pengembang berpikir plugin ini rusak ketika sebenarnya masalah komposisi tampilan.

Kegagalan izin dan hasil palsu

Izin gagal dalam cara yang terlihat seperti bug scanner.

Jika pengguna menolak akses kamera, callback Anda mungkin menampilkan kesalahan umum, atau scanner mungkin tidak menampilkan sebagai yang diharapkan. Tangani penolakan izin sebagai cabang normal dalam UI. Beritahu pengguna apa yang terjadi dan bagaimana untuk mencoba lagi setelah mengaktifkan akses. Pada iOS terutama, teks izin yang tidak jelas menciptakan ketidakpercayaan sebelum pengguna melihat scanner.

Beberapa kebiasaan membantu:

• Mengaktifkan pemindaian dari aksi pengguna yang jelas: Prompt izin terkesan kurang mencurigakan.
• Tampilkan input cadangan: Penginputan manual menjaga alur kerja tetap hidup.
• Uji tolak kemudian coba lagi jalur: Banyak tim hanya menguji jalur bahagia sekali.

Masalah pembangunan dan perangkat pengujian

Beberapa gagal hanya menampilkan pada lingkungan tertentu.

Stripping halaman ke satu tombol dan satu elemen hasil ketika debugging. Jika scanner bekerja di sana, masalah Anda biasanya adalah tata letak atau shell aplikasi code, bukan plugin.

Tips dan Migrasi ke Capacitor

Scanner barcode dapat mengkode dengan benar dan masih gagal dalam praktek. Masalah biasanya muncul sebagai lag, kilauan, gangguan preview kamera, atau layar Android yang berbeda dari perangkat yang sama dari pool tes.

Ini adalah aplikasi Cordova yang lebih tua, decoder sering tidak menjadi titik lemah. Webview, layering view, dan code yang bereaksi terhadap hasil scan biasanya menyebabkan lebih banyak masalah daripada pengenalan kode barcode sendiri.

Mulai dengan membatasi layar scan dalam skop yang sempit. Jika layar dimaksudkan untuk memindai label stok, biarkan memindai label stok. Filter tambahan, panel animasi, dan pembaruan status luas menambahkan pekerjaan meredupkan di mana rendering webview Android sudah rapuh.

Beberapa perubahan dapat memberikan hasil yang cepat:

• Pilih format kode barcode yang diterima Jika plugin Anda mendukungnya. Ini mengurangi bacaan palsu dan membuat penutupan tes lebih mudah untuk dipahami.
• Jaga logika setelah scan singkat. Analisis, validasi, dan perbarui bagian UI yang paling kecil.
• Block bacaan duplikat selama beberapa saat. Beberapa perangkat akan mengirim hasil yang sama beberapa kali sebelum pengguna bergerak kamera.
• Desain entri manual ke dalam alur. Dalam lingkungan nyata, label rusak, pencahayaan buruk, dan pengemasan reflektif masih terjadi.
• Perhatikan biaya repaint Android dengan cermat. Overlays berat, transisi CSS, dan komponen yang berlapis dapat merusak preview kamera di dalam webview Cordova.

Rute migrasi yang praktis ke Capacitor

Pemindahan yang paling bersih dari Cordova ke Capacitor dilakukan secara bertahap, bukan heroik. Tim akan mengalami kesulitan ketika mereka mengganti kontainer aplikasi, plugin pemindai, aliran izin, dan overlay UI sekaligus, lalu tidak dapat mengetahui perubahan mana yang menyebabkan aplikasi rusak.

Gunakan urutan ini:

1. Audit plugin saat ini
   Daftar semua plugin Cordova dan tandai setiap plugin sebagai aktif, dapat diganti, atau berisiko karena bergantung pada perilaku platform yang lebih tua.

2. Pindahkan shell aplikasi terlebih dahulu
   Jalankan aplikasi web yang ada di dalam Capacitor sebelum mengganti plugin pemindai code. Ini memisahkan masalah kontainer dengan masalah plugin.

3. Tetapkan plugin Cordova selama transisi singkat jika diperlukan
   Kompatibilitas sementara seringkali lebih aman daripada merevisi scanner, akses file, dan pengaturan izin pada saat yang sama.

4. Gantilah bagian scanner yang rapuh sebelumnya.
   Plugin lama yang bergantung pada overlay khusus, perilaku Android yang tidak terdokumentasikan, atau pengaturan kamera yang sudah ketinggalan zaman harus diprioritaskan.

Bug kamera Android memerlukan perhatian khusus karena menghabiskan banyak waktu debugging. Saya telah melihat layar scanner gagal karena preview native berada di belakang webview, memotong di tepi, atau menampilkan hitam pada perangkat Android tertentu. Pada titik itu, plugin barcode pertama kali dipertimbangkan, meskipun masalahnya adalah komposisi tampilan.

Tangani hal ini sebagai investigasi rendering, bukan hanya investigasi scanner. Hapus overlay dekoratif. Kurangi halaman ke preview, satu trigger, dan satu bidang hasil. Jika preview menjadi stabil setelah itu, masalah biasanya adalah struktur layar atau CSS Anda, bukan decoding.

Hal ini juga merupakan titik dimana migrasi ke Capacitor mulai membenarkan dirinya. Capacitor tidak menghilangkan setiap bug kamera, tetapi biasanya memberikan batasan yang lebih jelas antara pengelolaan tampilan native dan UI web code. Untuk skenario barcode scanning, @capgo/camera-preview menampilkan feed kamera hidup sebagai overlay native yang dapat disesuaikan dengan kontrol, sehingga Anda dapat menerjemahkan frame dalam JavaScript tanpa preview berada di belakang webview. Untuk skenario scanning bisnis pada perangkat Zebra, @capgo/capacitor-zebra-datawedge menangani profil DataWedge dan trigger scan. Untuk skenario alur kerja tag NFC, @capgo/capacitor-nfc mengatasi penemuan, pembacaan, dan penulisan tag asli pada iOS dan Android.

Proyek Cordova cenderung rusak dari usia plugin, pergeseran platform, dan asumsi tersembunyi di dalam integrasi yang lebih tua. Capacitor proyek mengungkapkan masalah yang berbeda, sebagian besar di sekitar pengelolaan siklus hidup dan layering native, tetapi kegagalan-kegagalan tersebut lebih mudah untuk ditemukan karena sisi native lebih eksplisit.

Jika scanner Cordova Anda saat ini hanya berfungsi setelah menambahkan patch perangkat khusus, berhenti menambahkan patch. Stabilkan layar scan, konfirmasikan apakah bug pratinjau Android sebenarnya adalah masalah layering webview, dan kemudian migrasi dalam langkah-langkah yang terkendali. Jalur tersebut lebih lambat selama seminggu dan lebih cepat untuk proyek yang lebih besar.