android - 从移动浏览器扫描 Angular2+ 二维码

Question

我正在研究使用 Android、iOS 和可能的 Windows Phone 上的浏览​​器扫描二维码的可用方法。理想的解决方案是拥有一个既可以在移动设备屏幕上又可以在全尺寸计算机屏幕上运行的 Angular2+ 响应式应用程序。整个应用程序应该是某种基于 QR 代码贴纸识别项目的库存。

我找到了一个不错的组件 https://github.com/goergch/angular2-qrscanner但它在我手机上的任何浏览器(Firefox、Chrome、HTC Browser、Dolphin)上都不起作用。不幸的是，没有关于是否支持任何移动浏览器的信息。

有人知道我可以为此测试的库/组件吗？或者我应该忘记它而只使用 Ionic(或者 NativeScript)构建系统并编译 native 应用程序？

预先感谢您的所有建议。

Answer 1

经过 2 天的调试，我刚刚让这个适用于 Android。首先，它需要通过 SSL 运行，以便能够访问您设备的相机(现在这是 Android 上最新版本的 Chrome 和 FF 的要求)。但本质上，它在 Android 上运行的错误归结为用于从相机的视频源生成图像的 Canvas 的尺寸。您传入的值实际上用于您在设备上看到的视频元素。然而，它是一个隐藏的 Canvas 元素，用于从视频流中生成图像，然后分析有效的二维码。在移动设备上，这个 Canvas 元素被放大到巨大的尺寸，而不管你传递给组件的是什么。因此，使用传入的尺寸进行扫描只会扫描现在巨大 Canvas 中呈现的图像的一小部分。

修复是为了确保您将值传递给可以在智能手机屏幕上呈现的组件模板，例如 320 x 480。然后在您的组件 css 文件中对 canvas 元素强制执行此限制。

因此，您的组件模板应该具有如下内容:...

<qr-scanner
(onRead)="captureScan($event)"
facing="environment"
[mirror]="true"
[stopAfterScan]="true"
[updateTime]="1000"
[canvasWidth]="320"
[canvasHeight]="480"
></qr-scanner>

...

在你的 css 文件中:...

canvas {
    width: 320px !important;
    height: 480px !important;
}

..

此修复程序现在适用于 Android 上的 Chrome 和 FF。