How to install Google Barcode Scanner Module in Ionic project?

Question

I am making a barcode scanner with capacitor-mlkit/barcode-scanner and vue3. I installed the mlkit barcode scanner package, I am testing it on my android device, but when I am trying to call BarcodeScanner.scan(), the console output in android studio is

File: https://localhost/assets/index-DFex7xUL.js - Line 13 - Msg: Error: The Google Barcode Scanner Module is not available. You must install it first.

I know that error clearly states what is wrong, but I just dont get what exactly is missing.

My vue component:

<script setup lang="ts">
import { Barcode, BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";

const startScanning = async () => {
  const { barcodes } = await BarcodeScanner.scan();
};
</script>
<template>
<ion-page>
    <ion-content>
      <ion-fab-button @click="startScanning()">
        <ion-icon :icon="scan"></ion-icon>
      </ion-fab-button>
    </ion-content>
  </ion-page>
</template>

android/app/build.gradle:

apply plugin: 'com.android.application'

android {
    namespace "io.ionic.starter"
    compileSdk rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "io.ionic.starter"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    buildFeatures {
        dataBinding true
    }
    dataBinding {
        enabled = true
    }
}

repositories {
    flatDir{
        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
    implementation project(':capacitor-android')
    testImplementation "junit:junit:$junitVersion"
    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
    implementation project(':capacitor-cordova-android-plugins')
}

apply from: 'capacitor.build.gradle'

try {
    def servicesJSON = file('google-services.json')
    if (servicesJSON.text) {
        apply plugin: 'com.google.gms.google-services'
    }
} catch(Exception e) {
    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
}

I tried making changes to android/app/build.griddle by adding

buildFeatures {
    dataBinding true
}
dataBinding {
   enabled = true
}

, I made changes to AndroidManifest.xml as per documentation.

Answer 1

You need to call the installGoogleBarcodeScannerModule() method.