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

Question

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

我发现了一个不错的组件https://github.com/goergch/angular2-qrscanner，但它实际上不适用于我手机上的任何浏览器（Firefox、Chrome、HTC 浏览器、Dolphin）。不幸的是，没有任何信息是否支持任何移动浏览器。

有谁知道我可以为此目的测试的库/组件？或者我应该忘记它，只使用 Ionic（或者 NativeScript）构建系统并编译本机应用程序？

预先感谢您的所有建议。

Answer 1

经过 2 天的调试，我刚刚在 Android 上工作了。首先，它需要通过 SSL 运行，以便能够访问您设备的摄像头（现在这是 Android 上最新版本的 Chrome 和 FF 的要求）。但本质上，它在 Android 上运行的错误归结为用于从相机的视频源生成图像的画布的尺寸。您传入的值实际上用于您在设备上看到的视频元素。然而，它是一个隐藏的画布元素，用于从视频流生成图像，然后分析有效的二维码。在移动设备上，无论您传递给组件的内容如何，​​此画布元素都会被放大到巨大的尺寸。因此，使用传入的尺寸进行扫描只会扫描现在巨大画布中渲染的图像的一小部分。

修复是为了确保您将值传递到可以在智能手机屏幕上呈现的组件模板，例如 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。