ngx-scannerを使った時に苦労したこと

はじめに

Angularでngx-scannerを使ってQRを読み取るアプリケーションを作りました。
これをiPadで起動してみると、インカメを使いたいのに背面カメラが起動してしまいました。
CSSもうまくきかず、苦労したので忘れないようにメモを残します( ..)φメモメモ

iPadで背面カメラが起動してしまう

iPadのOSは17.2です。執筆時最新です。

参考にしたサイトに助けられました。
使用できるカメラがMediaDeviceInfoの配列の中に入ってくるのですが、起動時はこの配列の最後に入っているカメラが選ばれてしまうみたいです。

iOS17.2では配列の最後は背面カメラでした。

<zxing-scanner [(device)]="currentDevice" (camerasFound)="onCamerasFound($event)" (autostarted)="onAutoStarted()"></zxing-scanner>

availableDevices: MediaDeviceInfo[] = [];
currentDevice: MediaDeviceInfo | undefined;

onCamerasFound(result: MediaDeviceInfo[]): void {
    this.availableDevices = result;
}

onAutoStarted(): void {
    for (let i = 0; i < this.availableDevices.length; i++) {
      const device = this.availableDevices?.[i];
      if (device.kind === 'videoinput' && device.label.includes('前面カメラ')) {
        this.currentDevice = device;
      }
    }
  }

camerasFound
デバイスで使用できるカメラをリストで表示してくれる。

autoStarted
スキャナが自動起動されたときにイベントが走る。

console.logをすることでiPadのカメラのラベルを調べたところ、インカメは「前面カメラ」となっていました。
(外側のカメラは「背面カメラ」)

参考サイト

cssが効かない

ngx-scannerのカメラの表示される部分(?)のサイズを変える方法がわからずに苦労しました。
videoタグのスタイルをいじればいいというところまでたどり着くもうまくいかず…
stack overflowを見て辿り着いた答えは「!important」という禁じ手でした…。本当はたぶんもっといい方法がある…と思われる…。
(::ng-deepは書き方が悪かったのかもしれないが、効かなかった)

video {
    width: 100%;
    height: 550px !important;
    object-fit: contain;
}

参考サイト

おわりに

Mac普段使わないので、iPadのデバック苦労した🤪