Vanilla JS

[djabif]

Hey, did anyone manage to use this plugin in an Ionic project without any framework (using vanilla javascript) ?

My code is:

async function scanQR() {
    if (Capacitor.isNativePlatform()) {
        Capacitor.Plugins.BarcodeScanner.hideBackground(); // make background of WebView transparent
        const result = await Capacitor.Plugins.BarcodeScanner.startScan(); // start scanning and wait for a result

        // if the result has content
        if (result.hasContent) {
           console.log(result.content); // log the raw scanned content
        } else {
            console.log("no content");
        }
}; 

I'm trying it on an android emulator but I can't make the startScan() function to work... I already tried what is suggested in https://github.com/capacitor-community/barcode-scanner/issues/26

Any help? 🙏🏻 Thanks

[mster81]

As one who is in the process of converting an app over, I ran into a similar issue ( New to Capacitor here)

Without knowing what you are seeing (errors, no errors etc) what I experienced was

1) Add all manifest settings as per the docs 2) Ran the app (on device) but emulator typically will give you a dummy camera image 3) Noticed the screen went 'gray' from the 'hidebg' call

After further review ( rookie mistake here ) I forgot to give it permissions.. Once I gave it permissions it showed the camera image.

So, assuming your in the same boat here, you need to

1) Create an ask permissions function like below ( this is boiler plate from docs )

`const didUserGrantPermission = async () => { // check if user already granted permission const status = await Capacitor.Plugins.BarcodeScanner.checkPermission({ force: false });

if (status.granted) {
    // user granted permission
    return true;
}

if (status.denied) {
    // user denied permission
    return false;
}

if (status.asked) {
    // system requested the user for permission during this call
    // only possible when force set to true
}

if (status.neverAsked) {
    // user has not been requested this permission before
    // it is advised to show the user some sort of prompt
    // this way you will not waste your only chance to ask for the permission
   /*const c = confirm(
        'We need your permission to use your camera to be able to scan barcodes',
    );
    if (!c) {
        return false;
    }
    */
    const statusRequest = await Capacitor.Plugins.BarcodeScanner.checkPermission({ force: true });
}

if (status.restricted || status.unknown) {
    // ios only
    // probably means the permission has been denied
    return false;
}

// user has not denied permission
// but the user also has not yet granted the permission
// so request it
const statusRequest = await Capacitor.Plugins.BarcodeScanner.checkPermission({ force: true });

if (statusRequest.asked) {
    // system requested the user for permission during this call
    // only possible when force set to true
}

if (statusRequest.granted) {
    // the user did grant the permission now
    return true;
}

// user did not grant the permission, so he must have declined the request
return false;

};`

2) When you call the function to scan you can always check for the permission first like didUserGrantPermission().then(result => { if (result === true) { startScan(); }else{ alert('You need to all to allow access to your camera!') } });

3) The start scan function is the actual call to trigger the scan so like `const startScan = async () => {

Capacitor.Plugins.BarcodeScanner.hideBackground(); // make background of WebView transparent
const result = await Capacitor.Plugins.BarcodeScanner.startScan(); // start scanning and wait for a result

// if the result has content
if (result.hasContent) {
    console.log(result.content); // do something with the results
}

};`

This is really more testing code for now to get a better understanding of how everything works but this is framework agnostic

[thegnuu]

@mster81 thank you for pointing out a few details!

@djabif What exactly do you mean with "not work" :) Are you getting any errors or something? Or do you have an example repo which might help to see the exact issue?

By definition this plugin comes without any UI and hideBackground() might not be enough in your setup if you have any overlaying div or something which are not transparent...

[thegnuu]

@djabif I have not heard back so I will close this issue for now. Feel free to reopen it if you still have issues!

Thanks!