手机浏览器扫描Angular2+二维码

Question

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

我发现了一个很好的组件https://github.com/goergch/angular2-qrscanner，但它在我手机上的任何浏览器(火狐，Chrome，HTC浏览器，海豚)上都不能正常工作。不幸的是，没有任何信息表明是否支持任何移动浏览器。

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

提前感谢您的所有建议。

Answer 1

经过2天的调试，我刚刚得到了Android的支持。首先，它需要在SSL上运行，才能访问设备的摄像头(这是android上的Chrome和FF的最新版本的要求)。但从本质上讲，它在Android上运行的bug归结为画布的尺寸，该画布用于从相机的视频源生成图像。您传入的值实际上用于您在设备上看到的video元素。然而，它是一个隐藏的画布元素，用于从视频流生成图像，然后分析有效的二维码。在移动设备上，这个画布元素被放大到巨大的维度，而不管您传递给组件的是什么。因此，使用传入维度的扫描将只扫描在现在巨大的画布中渲染的图像的一小部分。

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