2019年8月30日金曜日

monacaを使ったQRコードリーダー作成


前回まではmonacaの「BarcodeScanner」というCordovaプラグインを使ったところスマホでのQRコードの認識率が悪く実用をあきらめていたのだが、新たにCordovaのver. 7.1 から「PhoneGap BarcodeScanner」というものが追加されており、これを使うことによってAndroidにてQRコードの認識率が大幅に向上していることが確認できた。




iphoneユーザーのみ
iOS 10以降、info.plistに使用に関する説明を設定してやらないとアプリが強制終了するようだ。

NSCameraUsageDescriptionには、アプリがユーザーのカメラにアクセスする理由を記述します。
この設定を info.plist に追加するには、config.xml ファイルの <edit-config> タグに以下のように設定します。

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>To scan barcodes</string>
</edit-config>


iphone、androidユーザー共通


monacaは最小限の設定でプラグインを有効化しindex.htmlを下記のように書き換えるだけで使用することが出来る。詳しくはプラグインの名前から公式サイトに飛べます。
<!DOCTYPE HTML>
<html>
<head>
    <title>Barcode Scanner DEMO</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">

    <script type="text/javascript">

    function scanBarcode() {
        window.plugins.barcodeScanner.scan( function(result) {
                alert("We got a barcode\n" +
                          "Result: " + result.text + "\n" +
                          "Format: " + result.format + "\n" +
                          "Cancelled: " + result.cancelled);
            }, function(error) {
                alert("Scanning failed: " + error);
            }
        );

    }
    </script>
</head>

<body>
    <hr> BarcodeReader DEMO <hr><br>
    <input type="button" onClick ="scanBarcode()" value ="Scan" />
</body>
</html>
                                                                                                                        

参考文献

[1]Monaca Docs

0 件のコメント:

コメントを投稿