search
LoginSignup
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

結論

61757715-28a44800-ad98-11e9-9f58-555d2f187c50.png

 @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;
        }
    }

参考

 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3
Help us understand the problem. What are the problem?