首页 文章

从移动浏览器扫描Angular2 QR码

提问于
浏览 次
0

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

我找到了一个不错的组件https://github.com/goergch/angular2-qrscanner但是如果支持任何移动浏览器，它就没有信息't really work on any browser that I have on my phone(Firefox, Chrome, HTC Browser, Dolphin). And unfortunately there's .

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

提前感谢您提出的所有建议 .

android ios angular windows-phone qr-code

1 回答

  • 1

    经过2天的调试，我刚刚在Android上工作了 . 首先，它需要运行SSL以便能够访问您的deivce的相机（这是Android和Chrome和FF的最新版本中的一项要求） . 但实质上，它在Android上工作的错误归结为用于从相机的视频源生成图像的画布的尺寸 . 您传入的值实际上用于您在设备上看到的视频元素 . 然而，它是一个隐藏的画布元素，用于从视频流生成图像，然后分析有效的QR码 . 在移动设备上，这个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 .

    回复于

相关问题