search

capacitor-community / barcode-scanner

A fast and efficient (QR) barcode scanner for Capacitor
MIT License
436 stars 172 forks source link

"BarcodeScanner" plugin is not implemented on android #232

Closed aekasitt closed 1 year ago

aekasitt commented 1 year ago

Describe the bug Not at liberty to share the repo at the moment. The bug is the fact that BarcodeScanner plugin itself, not its functions, never get defined or attached to the built CapacitorJS app. I have followed through every step on the README and make sure to use the right version of lib and capacitor (see below).

To Reproduce I set my codebase to toast error message using vue-toastification So when I mount the vue component with the "BarcodeScanner" the modal pops up and begin scanning. Attached codebase below:

import { BarcodeScanner, SupportedFormat } from '@capacitor-community/barcode-scanner'
import { modalController } from '@ionic/vue'
import { onMounted } from 'vue'
import { useToast } from 'vue-toastification'
...
// funcs
let dismiss = async () => {
  await Promise.all([
    BarcodeScanner.stopScan().catch(() => void 0),
    modalController.dismiss(null, 'cancel')
  ])
}

// lifecycle hooks
onMounted(async () => {
  let hasPermission = await BarcodeScanner.checkPermission({ force: true })
    .then((permission: { granted?: boolean }) => permission.granted)
    .catch((err: {message: string}) => toast.error(err.message) || false)
  if (!!hasPermission) {
    let prepared = await BarcodeScanner.prepare()
      .then(() => true)
      .catch((err: { message: string }) => toast.error(err.message) || false)
    if (!prepared) return await dismiss()
    let mask = document.getElementById('mask')
    let videoNode = document.getElementById('video')
    let container = videoNode ? videoNode.parentElement : null
    if (!!mask && !!videoNode) {
      mask.insertAdjacentElement('beforeend', videoNode)
    }
    if (!!container) {
      document.body.removeChild(container)
    }
    let result = await BarcodeScanner
      .startScan({ targetedFormats: [SupportedFormat.QR_CODE] })
      .catch(err => toast.error('Errored scanning') || false)
    if (!result) return await dismiss()
    // @ts-ignore
    if (result.hasContent) {
      await BarcodeScanner.stopScan().catch(() => void 0)
      // @ts-ignore
      await modalController.dismiss(result.content, 'success')
    }
  } else {
    toast.warning('Not permitted')
    await dismiss()
  }
})

Expected behavior To make sure this bug does not get dismissed for faulty process setup or ionic visibility, I make sure to get it working on web environment. (Chrome only, not Firefox) Attached is the expected behavior.

web-barcode-scanner

Screenshots

android-barcode-scanner

Version

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Seems I may be redirected toward having multiple package.json file on my monorepo but I can assure that is not the case. Attached is the outputs of the npx cap sync process.

capacitor-plugins
thegnuu commented 1 year ago

@aekasitt We already encountered this issue before and the issue was never related to the plugin itself. It usually happens after updating capacitor or ionic to a new version. Unfortunately, I am not really sure what can cause this issue other than some "wrong" capacitor configurations, dependencies, or whatever.

I had it once in my code and after "cleaning up" my node_modules and re-adding the Android project the issue was gone.

Without the possibility of looking at your complete project, I can't help you in this case. There are a few people online with the same problem with other plugins, maybe some of those solutions can point you in the right direction without sharing your project. If you are able to create a minimal setup to reproduce the issue I can have a look at it, but I was not able to do so as I had the issue previously.

aekasitt commented 1 year ago

Noted with thanks. You can also assume I had been testing "clean-ups" with the following setup permutations as well. Node version: [16, 18] (unable to use node v14 because vue-tsc does not build) Package manager: [npm, yarn] @ionic/core & @ionic/vue & @ionic/vue-router: [6.7.3, 6.7.4, 7.0.3] @capacitor/android & @capacitor/cli & @capacitor/core: [4.1.1, 4.3.0, 4.5.0, 4.6.0, 4.7.0, 4.8.0]

With no luck.

If you have any idea what is the culprit for the unexpected build behavior, whether it's using an aarch64 build environment, or including a cordova plugin, using latest @capacitor/ libs or latest @ionic/, it would be very helpful.

aekasitt commented 1 year ago

The more I look into it, the more I find that my android build has none of the plugins defined in build steps.

Will pursue workaround recommended by Ionic Troubleshooting recommendations instead.

thegnuu commented 1 year ago

@aekasitt I think this is a good place to start with yes, I am pretty sure it has something to do with the Android setup. One thing came to my mind that helped me once I had this issue was to resync my android studio project with the gradle files. Maybe this might help in your case as well. Unfortunately I don't really have other suggestions.

If you can resolve your issue, it would be awesome if you could post a quick note here, it might really help if someone else runs into this problem in the future!

Thanks!

aekasitt commented 1 year ago

@thegnuu Not kidding, this has caused me much gripe in the past few days and narrowed down the culprit after hours in Logcat....

My template did not have <head></head> tag.

Acknowledgements