Not be able to scan barcodes in vue 3 version?

[chathurainc]

In vue3-qrcode-reader version not be able to scan barcodes.
there are any way to scan barcodes using this library?
Do you know any supported library for scan barcodes in i**onic7 vue 3** project

[gruhn]

Not sure what you mean but the npm package vue3-qrcode-reader is a third party fork that was created before vue-qrcode-reader supported Vue 3, but now it does. I suggest you try vue-qrcode-reader proper.

[chathurainc]

I have tried vue-qrcode-reader, but camera not detected the barcode,
This is the way i implemented

---

</ion-page>

<script lang="ts"> import { defineComponent, ref } from "vue"; import { IonPage, // IonHeader, IonToolbar, // IonContent, useBackButton, useIonRouter, IonFooter, IonButton, onIonViewWillEnter, onIonViewDidEnter } from "@ionic/vue"; import { App } from "@capacitor/app"; import { isNil, isEmpty } from "lodash"; import router from "@/router"; import { useStore } from "vuex"; import { useRoute } from "vue-router"; import QrScanDto from "@/dtos/QrScanDto"; import { translate } from "@/locales"; import Analytics from "@capacitor-community/appcenter-analytics"; import AppcenterService from "@/utils/AppcenterService"; import moment from "moment"; import { BarcodeScanner } from '@capacitor-community/barcode-scanner'; import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'; import { async } from "rxjs";

export default defineComponent({
name: "BarcodeScanner",
components: {
IonPage,
// IonHeader,
// IonContent,
IonToolbar,
IonFooter,
IonButton,
QrcodeStream
},
methods: {
translate
},
setup() {
const scanOutput = ref("");
const hasResult = ref(false);
const store: any = useStore();
const route = useRoute();
const qrObj = ref({} as QrScanDto);
const ionRouter = useIonRouter();
const isSupported = ref(false);
const isPermissionGranted = ref(false);
const scanActive = ref(false);

const onDetect = async (detectedCodes: any) => {
  const result = await detectedCodes;
  console.log('file: Scanner.vue:109 ~ onDetect ~ result:', result);
  scanOutput.value = result.content;
  // await processScan(result.content);
};



onIonViewWillEnter(async () => {
  try {
    await Analytics.trackEvent({ name: "onIonViewWillEnter" });
  } catch (error) {
    AppcenterService.reportErrorToAppCenter(error);
  }
});

onIonViewDidEnter(async ()=>{
  // await askUser();
});


return {
  scanOutput,
  hasResult,
  navigateBack,
  isSupported,
  isPermissionGranted,
  processScan,
  onDetect,
  handleCancel,
  scanActive
};

}
});
</script>

<style scoped> .scanner-active { --background: #00000000; --ion-background-color: transparent; } </style>

[ianalexis]

Same here, using vue3 but this package.

[ianalexis]

I think is related with
import { setZXingModuleOverrides } from 'barcode-detector/pure';
VS tells that cannot find 'barcode-detector/pure'.
BUT (@chathurainc try this)
I fixed it with:formats="barcodeFormats"
and const barcodeFormats = ["aztec", "code_128", "code_39", "code_93", "codabar", "data_matrix", "ean_13", "ean_8", "itf", "pdf417", "qr_code", "upc_a", "upc_e", "unknown"];
I thought that if the format was not specified it would accept all of them.

[Sec-ant]

A detailed explanation of the error you encounter, or a minimal repo/demo to reproduce the issue is always favorable, which can save us considerable amount of time chasing in the wrong direction.

To import modules exported as subpath exports like barcode-detector/pure, you need to set moduleResolution option to bundler, nodenext or node16 in tsconfig.json. bundler is the most forgiving one and should be the default choice in most frameworks/boilerplates since TS 5.0.

[gruhn]

Also, correct me if I'm wrong @Sec-ant but I think setting :formats="all_the_available_formats" has performance implications. I suspect, the more formats you select the slower scanning gets.

[ianalexis]

@gruhn Maybe, i will try to limit to the only ones i need.
@Sec-ant as i said, the "problem" is that I thought (maybe chathurainc too) that by default if the format was not specified, all would be read.
My component now (working) looks something (obfuscated) like this:

<template>
  <div>
    <p class="decode-result">
    </p>

    <qrcode-stream :formats="barcodeFormats" :paused="paused" @detect="onDetect" @error="onError"
      @camera-on="resetValidationState">
      <div v-if="validationSuccess" class="validation-success">
        OK
      </div>

      <div v-if="validationFailure" class="validation-failure">
        ERROR
      </div>

      <div v-if="validationPending" class="validation-pending">
        READING
      </div>
      <div class="loading-indicator" v-if="!cameraDetected">
        <p class="text-secondary">Accepting the camera permissions allows you to scan the code and avoid typing it manually.</p>
      </div>
    </qrcode-stream>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { QrcodeStream } from "vue-qrcode-reader";

const barcodeFormats = [
  "aztec",
  "code_128",
  "code_39",
  "code_93",
  "codabar",
  "data_matrix",
  "ean_13",
  "ean_8",
  "itf",
  "pdf417",
  "qr_code",
  "upc_a",
  "upc_e",
  "unknown",
]; /* https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API#supported_barcode_formats */

const isValid = ref(undefined);
const paused = ref(false);
const result = ref(null);
const cameraDetected = ref(false);

const instance = getCurrentInstance();

const validationPending = computed(
  () => isValid.value === undefined && paused.value,
);
const validationSuccess = computed(() => isValid.value === true);
const validationFailure = computed(() => isValid.value === false);

const onError = console.error;

const resetValidationState = () => {
  isValid.value = undefined;
  cameraDetected.value = true;
};

const onDetect = async ([firstDetectedCode]) => {
  result.value = firstDetectedCode.rawValue;
  paused.value = true;
  instance.emit("Ok", firstDetectedCode.rawValue);

  await timeout(2000);
  isValid.value = result.value.length > 5;

  await timeout(1500);
  paused.value = false;
};

const timeout = (ms) => {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms);
  });
};
</script>

<style scoped>
.validation-success,
.validation-failure,
.validation-pending {
  position: absolute;
  width: 100%;
  height: 100%;

  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  color: black;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.validation-success {
  color: green;
}

.validation-failure {
  color: red;
}
</style>

[gruhn]

The default is :formats="['qr_code']". Which reflects the setting before the formats prop was available.

@ianalexis so you have no issue with import errors and only adjusting formats was sufficient?

[Sec-ant]

Ah there must be some misunderstanding.

@ianalexis By saying "barcodes" you meant only 1D barcodes, correct? Qr Code, DataMatrix ... are also considered barcodes.

Judging by the title and your previous comments I always thought this issue was about this component not functioning at all in Vue3 (which is strange because it is written in Vue3), or there were some typing problems.

@gruhn Performance penalties are for sure, but I'm too insensitive to benchmark it 🫣

[ianalexis]

@gruhn Yes, with the format is working.
@Sec-ant i know but i didn't want to be thaaat technical. I asume that we can understand "barcodes" as the one with the bars and not the "squarecodes" XD.
The first comment was because i saw this marked at vue-qrcode-reader:

Still looks like that but is working so thanks boths.
Still dont know whats going on with chathurainc but you can close the issue for me XD.

As performance penalty i cannot see any difference but still limit the format to the only ones i need.

[github-actions]

This issue has been marked as stale. If there is no further activity it will be closed.