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 ionic7 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

---

[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[bot]]

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