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

【问题标题】：Angular2+ QR code scanning from mobile browsers从移动浏览器扫描 Angular2+ 二维码
【发布时间】：2023-04-07 04:20:02
【问题描述】：

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

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

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

提前感谢您的所有建议。

【问题讨论】：

标签： android ios angular windows-phone qr-code

【解决方案1】：

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

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

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

<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。

【讨论】：