Ionic vue framework (CAPACITOR), QRCode Scanner Issue

Issue

In my ionic vue.js project I using capacitor and I want to read QR Code from camera but there is no way I found on search about nothing for ionic vue.js especially. I tried more than I found this little thing 'https://www.npmjs.com/package/vue3-qrcode-reader'. With this little thing I can read QR Code from web and Android phones but iOS devices not work with that. I try capacitor-barcode-scanner to. If I try with capacitor-barcode-scanner Xcode give me error like 'you need to upgrade development target version' and upgrade to. Please tell me there is no way for build QR Code scanner app with IONIC - VUE WITH CAPACITOR? ;

Here is my errors with vue3-qrcode-reader

and here is my code which I use

<template>
  <ion-page>
    <ion-header class="ion-no-border" >
      <ion-toolbar style="--background: var(--primary)">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title style="color: white">Please Read Barcode</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <qr-stream @decode="onDecode" class="mb">
        <div style="color: yellow;" class="frame"></div>
      </qr-stream>

    </ion-content>
    <div style="background-color: var(--primary); width: 100%; position: fixed; bottom: 0; padding: 20px">
      <p style="color: blue; text-align: center; color: white">Please Read Barcode On Paper</p>
    </div>
  </ion-page>
</template>

<script >

import { QrStream } from 'vue3-qr-reader';
import { Camera } from '@capacitor/camera';

import { defineComponent } from 'vue';
import {IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";

export default defineComponent({
  name: 'barcode-read',
  components: {
    QrStream,
    IonContent,
    IonPage,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonBackButton,
    IonButtons,
  },
  created() {
    Camera.requestPermissions();
  },
  methods: {
    onDecode(data) {
      console.log("Decoder = "+data);
      this.$router.push('Welcome')
    }
  },
});

</script>

Solution

guys ı solve my problem with background issue. The point is ı forget to give my background color. so the issue is camera appear in app but cant see the camera mode. just use

body {
  background-color: transparent;
}

with this ı solve my problem thanks for your help

Answered By - mustafa dilmaç