Angular 如何使相机视图在ngx扫描仪中工作？

我正在制作一个使用二维码扫描仪的应用程序。我使用的是ngx扫描器组件，它是谷歌ZXing扫描库的移植版本。 问题是： 每次使用扫描仪组件时，我都没有收到任何错误，但扫描仪的摄像头视图不会加载，我只会得到与应用程序中背景相同的屏幕

这是我的HTML和TS导出类

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

---

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

在模板上，定义要阅读的格式，在我的例子中，我只想阅读二维码或EAN

在组件上：

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

---

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

在模板上，定义要阅读的格式，在我的例子中，我只想阅读二维码或EAN

在组件上：

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

---

我只是应用了你告诉我的更改，它们都很好用。在我的PC（我没有摄像头）中，有一条“找不到摄像头”的文字正在创建，而在我的手机中，有一条“找到摄像头”的文字。我还想指出，在我刷新页面后，两台设备上的消息都会显示出来。可能与CSS有关吗？这里有一个项目链接，如果它有帮助的话，我已经添加了一个scss代码，我在这个库的某个项目中使用它，这可能就是问题所在。我很确定，无论我使用什么样的scss，这个库都应该让摄像头视图出现。所以这不可能是我的问题。我将等待制作该库的人员进行一些更新。尽管如此，还是非常感谢您的帮助！我只是应用了你告诉我的更改，它们都很好用。在我的PC（我没有摄像头）中，有一条“找不到摄像头”的文字正在创建，而在我的手机中，有一条“找到摄像头”的文字。我还想指出，在我刷新页面后，两台设备上的消息都会显示出来。可能与CSS有关吗？这里有一个项目链接，如果它有帮助的话，我已经添加了一个scss代码，我在这个库的某个项目中使用它，这可能就是问题所在。我很确定，无论我使用什么样的scss，这个库都应该让摄像头视图出现。所以这不可能是我的问题。我将等待制作该库的人员进行一些更新。尽管如此，还是非常感谢您的帮助！