Can I know if the library supports Ionic framework? Thank you.

[dmoyadev]

It does. I'm using it with latest Ionic v6.6.2 and Capacitor's camera plugin (v4.1.4) and it works fine if using the 3.1.0-vue3-compatibility.4 version (install it with npm install vue-qrcode-reader@3.1.0-vue3-compatibility.4)

[AndreasZiagl]

@dmoyadev could you explain how exactly you implemented this? I now also use the vue-qrcode-reader in an Ionic app. But I don't have an Ionic camera implemented.

<qrcode-stream :camera="camera" @decode="onDecode"></qrcode-stream>
...
import { QrcodeStream} from "vue3-qrcode-reader";
...
onDecode(result) { ... }

Now it works already, but the picture of the camera lags extremely on my real mobile phone (Pixel 6a). Generally, the camera image is frozen. Only when you touch the image with your finger does it update. But then it is also very slow. So apparently the image is only updated when it registers a user input. Although the image is not updated, the QR code recognition works though. Therefore, I hold a QR code in front of the camera, this is also recognized.

On my emulator and also on my Windows device (ionic serve) there is no problem. So it's some problem that only occurs with a real Android device.

[dmoyadev]

@AndreasZiagl Actually I'm using the 3.1.0-vue3-compatibility.7 version. I also have the @capacitor/camera package installed, but I'm not sure if it is really needed since the project is a bit old and I have not implemented this. I'm using Vue 3.2.47 and Vite 4.2.0 as well as Ionic 6.6.2 if that helps.

Now, for the part of the actual component, this is mostly what I have

<script setup lang="ts">
    import { QrcodeStream } from 'vue-qrcode-reader';

    const camera = ref<'front' | 'rear' | 'auto' | 'off'>('auto');
    function onInit(promise) {
        promise
            .catch((error) => {
                const cameraMissingError = error.name === 'OverconstrainedError';
                if(cameraMissingError) {
                    switch(camera.value) {
                        case 'auto':
                        camera.value = 'rear';
                        break;
                    case 'rear':
                        camera.value = 'front';
                        break;
                    }
                } else {
                    console.error('🔴 Something went wrong: ', error);
                    emit('close-scanner', error.name);
                }
            });
    }

    function onDecode(value: string) {
        emit('parsed-value', value);
        emit('close-scanner');
    }
</script>

<template>
    <QrcodeStream
        id="scanner"
        key="scanner"
        :camera="camera"
        @decode="onDecode"
        @init="onInit"
    >
        <!-- Things I need over the camera, like a switch camera button or so -->
    </QrcodeStream>
</template>

I think this is most of it. I haven't tried if it works just with this, but if now, I can give you my full package.json if needed.

[AndreasZiagl]

@dmoyadev Thanks for your help. Unfortunately, this did not solve the problem. I have now used a trick so that the camera image is updated. It is not a nice trick but it works.

I just let a timer count and output it hidden. This ensures that Vue updates the screen and thus the image of the camera is also redrawn.

<p style="color: white; font-size: 1px">{{time}}</p>

data() {
  return {
      timer: null,
      time: 0,
   };
},
mounted: function () {
    this.timer = setInterval(() => {
      this.time++;
      if(this.time > 1000) {
        this.time = 0;
      }
    }, 30)
},
beforeUnmount() {
    clearInterval(this.timer)
},

[pavva91]

@dmoyadev I'm trying your solution but I'm getting the error:

• DOMException: Starting videoinput failed

I have the capacitor camera installed. This is my package.json:

{
  "name": "wallet-ui",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/android": "^4.8.0",
    "@capacitor/app": "^4.1.1",
    "@capacitor/browser": "^5.0.2",
    "@capacitor/camera": "^5.0.2",
    "@capacitor/core": "^4.8.0",
    "@capacitor/dialog": "^5.0.2",
    "@capacitor/geolocation": "^5.0.2",
    "@capacitor/haptics": "^4.1.0",
    "@capacitor/ios": "4.8.0",
    "@capacitor/keyboard": "^4.1.1",
    "@capacitor/status-bar": "^4.1.1",
    "@capacitor/toast": "^5.0.2",
    "@ionic-native/barcode-scanner": "^5.36.0",
    "@ionic-native/qr-scanner": "^4.20.0",
    "@ionic/core": "^7.0.10",
    "@ionic/pwa-elements": "^3.1.1",
    "@ionic/vue": "^7.0.10",
    "@ionic/vue-router": "^7.0.10",
    "@vueuse/core": "^10.1.2",
    "axios": "^1.4.0",
    "cordova-plugin-qrscanner": "^3.0.1",
    "core-js": "^3.6.5",
    "ionicons": "^6.0.3",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "pinia": "^2.1.3",
    "rxjs-compat": "^6.6.7",
    "vue": "^3.3.4",
    "vue-qrcode-reader": "^3.1.0-vue3-compatibility.4",
    "vue-router": "^4.2.2",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^4.8.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-vue": "^9.8.0",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7"
  },
  "description": "An Ionic project"
}

[github-actions[bot]]

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