@capacitor-community/barcode-scanner

条形码扫描器

@capacitor-community/barcode-scanner

快速高效(QR)条码扫描仪用于Capacitor.

目录

• 维护者
• 关于
• 安装
• 使用量
• 解决问题

维护者

关于

支持的条码

打开 iOS系统 这个库使用苹果自己的 AVFoundation。这意味着 此条码列表 应支持.

打开 机器人 此库使用 zxing-android-embedded 用于 zxing 在引擎盖下。 这意味着 此条码列表 被支持.

打开 网页 此库使用 zxing/browser这意味着 此条码列表 被支持。 网络实施正在进行中,可能存在问题,并非所有功能目前都得到支持!

关于所支持的电容版本的说明

v5.x.x-beta.x 基于支持Capacitor的ML-Kit的预发 v5.x

v4.x 支持电容 v5.x

v3.x 支持电容 v4.x

v2.x 支持电容 v3.x

v1.x 支持电容 v2.x

此软件包的所有发布都可以在 无 继续 GitHub 发布

安装

npm install @capacitor-community/barcode-scanner
npx cap sync

iOS系统

对于iOS,您需要在您的信息.plist文件中设置使用描述.

可以通过直接将其添加到源代码中或通过使用Xcode财产清单检查员来做到这一点.

直接添加到源代码

1. 打开Info.plist(用 Xcode 右键点击 > Open As > source 代码)
2. 与 <dict></dict> 更改如下:

<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>

注: "能够扫描条码"可以被任意替换.

使用 Xcode 属性列表检查器添加

1. 打开Info.plist xcode 编码 (右键单击 > 打开为 > 属性列表)
2. 在“信息属性列表”下点击小项 + 按钮.
3. 下 key,键入“隐私-相机使用描述”
4. 下 value,键入“能够扫描条码”

注: "能够扫描条码"可以被任意替换.

这里的更多信息 : https://developer.apple.com/documentation/bundleresources/information property list/nscamerausagepescription 互联网档案馆的存檔,存档日期2013-12-02

机器人

在你体内 AndroidManifest.xml 文件,修改如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
  package="com.example">

  <application
+    android:hardwareAccelerated="true"
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" />

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

使用量

可找到完整的 API 引用 这里。 。 。 .

扫描一个(QR)条码可以简单如:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const startScan = async () => {
  // Check camera permission
  // This is just a simple example, check out the better checks below
  await BarcodeScanner.checkPermission({ force: true });

  // make background of WebView transparent
  // note: if you are using ionic this might not be enough, check below
  BarcodeScanner.hideBackground();

  const result = await BarcodeScanner.startScan(); // start scanning and wait for a result

  // if the result has content
  if (result.hasContent) {
    console.log(result.content); // log the raw scanned content
  }
};

网络视频不透明

hideBackground() 将实现 <html> 内容透明,通过添加 background: 'transparent'; 页:1 style 属性.

如果您正在使用Ionic, 您也需要设置一些 Css 变量, 请检查 这里

如果您仍然无法看到相机视图, 请检查 这里

停止扫描

之后 startScan() 解析后,扫描视图将自动被销毁以保存电池。 但是,如果你想取消扫描之前 startScan() 已解决(AKA尚未识别代码),您必须拨打 stopScan() 手动. 示例

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const stopScan = () => {
  BarcodeScanner.showBackground();
  BarcodeScanner.stopScan();
};

考虑用户点击某种后键(硬件或软件)的情况也很重要. 建议打电话 stopScan() 在这类情况中也是如此.

在Vue.js中,你可以在使用扫描仪的特定视图中做这样的事情:

<script>
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

export default {
  methods: {
    stopScan() {
      BarcodeScanner.showBackground();
      BarcodeScanner.stopScan();
    },
  },

  deactivated() {
    this.stopScan();
  },

  beforeDestroy() {
    this.stopScan();
  },
};
</script>

正在准备扫描

提高性能和反应能力(略微),a prepare() 方法可用。 如果你知道你的剧本会打电话 startScan() 不久,你可以打电话 prepare() 将制作 startScan() 工作更快一点.

例如:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const prepare = () => {
  BarcodeScanner.prepare();
};

const startScan = async () => {
  BarcodeScanner.hideBackground();
  const result = await BarcodeScanner.startScan();
  if (result.hasContent) {
    console.log(result.content);
  }
};

const stopScan = () => {
  BarcodeScanner.showBackground();
  BarcodeScanner.stopScan();
};

const askUser = () => {
  prepare();

  const c = confirm('Do you want to scan a barcode?');

  if (c) {
    startScan();
  } else {
    stopScan();
  }
};

askUser();

这是完全可选的,将同:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const startScan = async () => {
  BarcodeScanner.hideBackground();
  const result = await BarcodeScanner.startScan();
  if (result.hasContent) {
    console.log(result.content);
  }
};

const askUser = () => {
  const c = confirm('Do you want to scan a barcode?');

  if (c) {
    startScan();
  }
};

askUser();

后者在用户看来会稍慢一些.

权限

此插件不会自动处理权限 。 不过插件 已经 拥有检查和请求许可的实用方法。 您必须请求 JavaScript 的许可 。 下面是一个简单的例子:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const checkPermission = async () => {
  // check or request permission
  const status = await BarcodeScanner.checkPermission({ force: true });

  if (status.granted) {
    // the user granted permission
    return true;
  }

  return false;
};

一个更详细、更能优化UX的例子:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const didUserGrantPermission = async () => {
  // check if user already granted permission
  const status = await BarcodeScanner.checkPermission({ force: false });

  if (status.granted) {
    // user granted permission
    return true;
  }

  if (status.denied) {
    // user denied permission
    return false;
  }

  if (status.asked) {
    // system requested the user for permission during this call
    // only possible when force set to true
  }

  if (status.neverAsked) {
    // user has not been requested this permission before
    // it is advised to show the user some sort of prompt
    // this way you will not waste your only chance to ask for the permission
    const c = confirm('We need your permission to use your camera to be able to scan barcodes');
    if (!c) {
      return false;
    }
  }

  if (status.restricted || status.unknown) {
    // ios only
    // probably means the permission has been denied
    return false;
  }

  // user has not denied permission
  // but the user also has not yet granted the permission
  // so request it
  const statusRequest = await BarcodeScanner.checkPermission({ force: true });

  if (statusRequest.asked) {
    // system requested the user for permission during this call
    // only possible when force set to true
  }

  if (statusRequest.granted) {
    // the user did grant the permission now
    return true;
  }

  // user did not grant the permission, so he must have declined the request
  return false;
};

didUserGrantPermission();

如果用户拒绝给予良好许可, status.denied 将被设定为真实。 在Android上,这只有在用户检查盒子时才会发生 never ask again。无论如何,要获得许可,您必须将用户重定向到应用程序的设置上。 这样做可以简单地做到以下几点:

import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const checkPermission = async () => {
  const status = await BarcodeScanner.checkPermission();

  if (status.denied) {
    // the user denied permission for good
    // redirect user to app settings if they want to grant it anyway
    const c = confirm('If you want to grant permission for using your camera, enable it in the app settings.');
    if (c) {
      BarcodeScanner.openAppSettings();
    }
  }
};

只针对特定条码

您可以设置扫描仪, 只识别特定类型的条码 :

import { BarcodeScanner, SupportedFormat } from '@capacitor-community/barcode-scanner';

BarcodeScanner.startScan({ targetedFormats: [SupportedFormat.QR_CODE] }); // this will now only target QR-codes

若为 targetedFormats 实值 未指定 或者说 留为空, (中文(简体) ), 所有类型 条形码将被锁定.

仅针对特定类型可带来以下好处:

• 改进性能( 因为解码器只需查找指定的条码)
• 改进用户经验(因为扫描一个没有您大小写支持的条码,不会奏效)

支持下列类型:

页:1 UPC_A 支持在 iOS 上,但根据函数 苹果文档 它属于 EAN_13。所以您应当指定 EAN_13 可以扫描这个。 如果要将它们区分开来,应当在得到结果后手动进行.

解决问题

Ionic CSS 变量

Ionic将增加额外的CSS变量,从而阻止扫描仪出现. 要解决这个问题, 在您的全球 cs 结尾处添加以下片段 .

body.scanner-active {
  --background: transparent;
  --ion-background-color: transparent;
}

完成后,在使用扫描仪前,需要先将这一类加入到体内.

document.querySelector('body').classList.add('scanner-active');

完成扫描工作后,可以简单地去掉这个课.

document.querySelector('body').classList.remove('scanner-active');

我有一个 Error: Plugin BarcodeScanner does not respond to method call iOS 上的错误消息

在Xcode 点击 Product > 翻译: Clean Build Folder 并尝试再建设.

我有一个 Cannot resolve symbol BarcodeScanner android 工作室中的错误消息

在 Android 工作室点击 File > 翻译: Sync Project with Gradle Files 并尝试再建设.

扫描视图没有显示

如果您无法在取景口看到扫描仪,请遵循这些步骤:

1. 检查是否正确授予相机权限
2. 检查扫描仪元素是否出现在DOM内部,某处 body 标签
   • 不在这
3. 检查扫描仪上是否有一些 DOM 元素
   • 搜索导致问题的元素 7号
   • 玩 Javascript 26号

我找不到DOM的扫描仪

这应该在 DOM 运行时显示 BarcodeScanner.startScan() 方法.

<body>
  <!-- ... -->
  <div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;">
    <span
      style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;"
      >BESbswy</span
    >
  </div>
  <!-- ... -->
</body>

如果不是,则可能由于组件被加载到DOM树深处而成为出错. 您可以尝试通过在您的插件中添加以下内容来查看插件是否正常工作 app.component.ts 文档.

BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();

它没有出现

可能意味着你错过了一步 插件配置。 。 。 .

我做了正确的配置

请 打开一个问题

开始

非详尽的待办事宜列表:

• 相机间切换支持
• 网络支持