モバイルブラウザからのAngular2 + QRコードのスキャン

Question

Android、iOS、おそらくWindows Phone上のブラウザを使用してQRコードをスキャンする方法について、いくつかの調査を行っています。理想的なソリューションは、モバイルとフルサイズの両方のコンピュータ画面で動作する単一のAngular2 +対応アプリを用意することです。アプリ全体は、アイテムを識別するQRコードのステッカーに基づいて、ある種の在庫になっているはずです。

私は素晴らしいコンポーネントを見つけましたが、携帯電話（Firefox、Chrome、HTC Browser、Dolphin）に搭載されているブラウザでは実際に動作しません。残念ながら、モバイルブラウザがサポートされていれば、情報はありません。

私はこの目的のためにテストできるライブラリ/コンポーネントについて知っていますか？または、私はそれを忘れて、単にIonic（あるいはおそらくNativeScript）を使ってシステムを構築し、ネイティブのアプリケーションをコンパイルする必要がありますか？

ご協力いただきありがとうございます。

Answer 1

私はちょうど2日間のデバッグ後にAndroid用にこの機能を持っています。まず、あなたのカメラにアクセスできるようにするためには、SSL経由で実行する必要があります（これはアンドロイド上のChromeとFFの最新リリースでは現在必要になります）。しかし、本質的に、Androidで動作しているバグは、カメラのビデオフィードから画像を生成するために使用されているキャンバスの寸法になります。あなたが渡した値は、実際にあなたのデバイスで見られるビデオ要素に使用されました。ただし、ビデオストリームから画像を生成し、有効なQRコードを分析するために使用される隠されたキャンバス要素です。モバイルデバイスでは、このキャンバス要素は、コンポーネントに渡すものを無視して、巨大な次元まで吹き飛ばされていました。したがって、渡された次元を使用したスキャンは、現在の巨大なキャンバスにレンダリングされた画像のわずかな部分だけをスキャンします。

スマートフォンの画面にレンダリングできるコンポーネントテンプレートに値を渡すように修正しました。たとえば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; 
} 

..

この修正はChromeで動作するようになりましたアンドロイド上のFF。