Ionic Barcode Scanner 扫描成功时不隐藏答案

【问题标题】：Ionic Barcode Scanner not to hide when scan is successIonic Barcode Scanner 扫描成功时不隐藏
【发布时间】：2018-09-27 12:29:21
【问题描述】：

我正在尝试使用本机的离子条形码扫描仪实现 QR 扫描仪。

https://ionicframework.com/docs/native/barcode-scanner/

我想扫描 QR 并停留在扫描仪视图中，该视图在相机叠加层顶部显示模态。

  ionViewDidLoad() {
    this.scan()
  }


  scan(){
    this.barcodeScanner.scan(this.options).then(barcodeData => {
      this.scannedData = barcodeData;
      this.modal.create("ScannerResultPage").present();
      console.log('Barcode data', barcodeData);
     }).catch(err => {
         console.log('Error', err);
     });
  }

有可能实现吗？

【问题讨论】：

我认为这是不可能的，除非你调整原生代码。
您需要为此自定义需求编写自定义插件。
如何调整这段代码？我正在使用 npm 安装这个库。

标签： angular ionic-framework ionic3 barcode-scanner

【解决方案1】：

除非您从离子条形码扫描仪调整本机代码，否则您无法做到这一点。

无论如何，您都可以使用 QuaggaJS（这显然是比调整 NPM 模块更好的选择）

它适用于 Web 和移动设备（也适用于 Ionic）。我在我的一些项目中使用了它，它运行良好，但不适用于 Native iOS，因为 Native iOS Safari 不支持 GetUserMedia API（您可以检查支持的浏览器 here），这是 QuaggaJS 正常工作所必需的。在 Android、移动浏览器、桌面和桌面浏览器上完美运行。

【讨论】：

非常感谢，您知道是否可以使用它自定义相机叠加层？
是的，你可以。例如，您可以指定一个<div id="cameraWrapper">，您的相机将在其中流式传输，您可以围绕它创建自己的布局。你想做什么，就可以做什么。您甚至可以在相机上方叠加卡片、Div 或任何您想要的内容。 Quagga JS 还支持所有类型的二维码和条形码，甚至可以一次扫描多个代码。您可能需要一些时间来了解它，但使用 Quagga（除了在 iOS 移动设备上使用它）您可以做任何事情