如何在ngx-scanner中使用相机视图？

如何解决如何在ngx-scanner中使用相机视图？

我正在制作一个使用QR码扫描仪的应用程序。我正在使用ngx-scanner组件，该组件是Angular的Google ZXing扫描库的移植版本。 问题： 每次使用扫描仪组件时，都不会出现任何错误，但是不会加载扫描仪的相机视图，并且只会显示与背景相同的屏幕。

这是我的HTML和TS导出类

<zxing-scanner [enable]="scannerEnabled" (scanSuccess)="onScanSuccess($event)"></zxing-scanner>
<h1><strong> {{ result }} </strong></h1>

export class QrScannerComponent implements OnInit {
  scannerEnabled = true;
  result: string

  constructor() {}

  ngOnInit(): void {}

  onScanSuccess(result: string) {
    this.result = result
  }
}

解决方法

以防万一，您是否尝试过甚至从该组件记录扫描失败？

在模板上，定义要读取的格式，在我的情况下，我也只想读取QR码或EAN。

<zxing-scanner
  #scanner
  [formats]="['QR_CODE','EAN_13']"
  (camerasFound)="cameraFound($event)"
  (camerasNotFound)="camerasNotFound($event)"
  (scanSuccess)="scanSuccessHandler($event)"
>
</zxing-scanner>

在组件上：

  camerasNotFound(e: Event) {
    // Display an alert modal here
  }

  cameraFound(e: Event) {
    // Log to see if the camera was found
  }

  onScanSuccess(result: string) {
    console.log(result);
  }

请问您使用哪个版本？

编辑

:host zxing-scanner ::ng-deep video{
  height: 15rem;
  width: 100vw;
  object-fit: contain;
}

video {
  height: 15rem !important;
}