Ionic vue 框架（CAPACITOR），二维码扫描器问题答案

【问题标题】：Ionic vue framework (CAPACITOR), QRCode Scanner IssueIonic vue 框架（CAPACITOR），二维码扫描器问题
【发布时间】：2021-05-31 08:32:50
【问题描述】：

在我的 ionic vue.js 项目中，我使用了电容器，我想从相机中读取 QR 码，但我无法在搜索中找到关于 ionic vue.js 的任何内容。我尝试了比我发现这个小东西'https://www.npmjs.com/package/vue3-qrcode-reader'。有了这个小东西，我可以从网络和 Android 手机上读取 QR 码，但 iOS 设备无法使用它。我尝试使用电容器条形码扫描仪。如果我尝试使用电容器条码扫描器 Xcode 给我错误，例如“您需要升级开发目标版本”并升级到。请告诉我，无法使用 IONIC - VUE WITH CAPACITOR 构建 QR 码扫描仪应用程序？ ;

这是我对vue3-qrcode-reader 的错误

这是我使用的代码

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

【问题讨论】：

标签： vue.js ionic-framework mobile qr-code capacitor

【解决方案1】：

一种解决方法可能是拍摄一张照片，然后使用不同的包解析它：https://www.npmjs.com/package/qrcode-reader，但最好使用实时解决方案。

【讨论】：

【解决方案2】：

您使用的是哪个 iOS 版本？早于 14.2 的 iOS 版本不允许在 web 视图中使用 WebRTC。

你可以试试这样的电容插件：capacitor-plugin-dynamsoft-barcode-reader

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。