ionic ブラウザでもアプリでもQRスキャンを使用可能にする

結論

　@zxing/ngx-scanner を使用するのが良い。
URL: https://github.com/zxing-js/ngx-scanner

なぜ@zxing/ngx-scannerを選んだか。

• ionic（Angular）で使用できるため。
• ブラウザでもアプリでも使えるようにしたかったため。
• 実はcordovaのQR ScannerというプラグインのBrowserバージョンをビルドし使用した。しかし、実機のブラウザでは動かないという現象が起きたため。
  • 理由：このプラグインのBrowserバージョンは元々開発用に開発されたもので、実際プロダクトとして使用される想定ではなかったため動作の保障はされていない。
• 時間の都合から、実装が簡単なものが良かったため。

使い方

インストール

npm i @zxing/ngx-scanner@latest --save

使用方法

• html

html

<zxing-scanner class="scanner" [torch]="torchEnabled" [(device)]="currentDevice"
                   (scanSuccess)="onCodeResult($event)"
                   [tryHarder]="tryHarder" (permissionResponse)="onHasPermission($event)"
                   (camerasFound)="onCamerasFound($event)"></zxing-scanner>

• typescript

typescript

    availableDevices: MediaDeviceInfo[];
    currentDevice: MediaDeviceInfo = null;
    hasDevices: boolean;
    hasPermission: boolean;
    torchEnabled = false;
    tryHarder = false;

onCamerasFound(devices: MediaDeviceInfo[]): void {
        this.availableDevices = devices;
        this.hasDevices = Boolean(devices && devices.length);
    }

// このコンポーネントを立ち上げたコンポーネントで結果を受け取るようにしている。
    onCodeResult(resultString: string) {
        this.modalController.dismiss(resultString);
    }

//カメラへのアクセス許可をチェック
    onHasPermission(has: boolean) {
        if (!has) {
//アクセスを許可してほしい旨のメッセージ等を入れる。
            this.close();
        } else {
            close();
            this.hasPermission = has;
        }
    }

参考

• https://github.com/zxing-js/ngx-scanner