Angular 电容相机预览'；的预览被动作按钮覆盖

我使用这个库来使用设备的摄像头功能，但由于一些奇怪的原因，当导出到android设备时，摄像头的按钮与预览重叠。这很奇怪，因为只有在安卓系统中才会发生，而在chrome（甚至是chrome移动方面的模拟）上使用它时，效果很好

这是运行它的代码

组件

cameraStart() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      parent: 'cameraPreview',
      className: 'cameraPreview'
    }
    CameraPreview.start(cameraPreviewOptions)
    this.cameraActive = true
  }

  async stopCamera() {
    await CameraPreview.stop()
    this.cameraActive= false
  }

  async captureImage() {
    const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality:90
    }
    const result = await CameraPreview.capture(cameraPreviewPictureOptions)
    let image = `data:image/jpeg;base64,${result.value}`
    this.user.person.photo = image
    this.imgUploader.selectProfilePic(this.imgUploader.dataURLtoFile(image, `pp-img_${new Date().getTime()}`), this.user.firebase_id) 
    this.stopCamera()
  }

  async turnFlashOn() {
    const flashModes = await CameraPreview.getSupportedFlashModes();
    //const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
    //console.log(supportedFlashModes)
    this.flashActive = !this.flashActive
    const cameraPreviewFlashMode: CameraPreviewFlashMode = this.flashActive ? 'torch' : 'off'

    CameraPreview.setFlashMode(cameraPreviewFlashMode);
  }

  flipCamera() { CameraPreview.flip() }

<ion-header *ngIf="!cameraActive">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="dismiss()">
      <ion-button>
        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ 'image-editing' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div id="cameraPreview" class="cameraPreview">
    <div *ngIf="cameraActive">
      <ion-button color="light" (click)="stopCamera()" expand="block" id="close">
        <ion-icon name="arrow-undo" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="captureImage()" expand="block" id="capture">
        <ion-icon name="camera" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="flipCamera()" expand="block" id="flip">
        <ion-icon name="camera-reverse" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="turnFlashOn()" expand="block" id="flash">
        <ion-icon *ngIf="flashActive" color="warning" name="flash" slot="icon-only"></ion-icon>
        <ion-icon *ngIf="!flashActive" name="flash-off" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  </div>
</ion-content>

文档

cameraStart() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      parent: 'cameraPreview',
      className: 'cameraPreview'
    }
    CameraPreview.start(cameraPreviewOptions)
    this.cameraActive = true
  }

  async stopCamera() {
    await CameraPreview.stop()
    this.cameraActive= false
  }

  async captureImage() {
    const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality:90
    }
    const result = await CameraPreview.capture(cameraPreviewPictureOptions)
    let image = `data:image/jpeg;base64,${result.value}`
    this.user.person.photo = image
    this.imgUploader.selectProfilePic(this.imgUploader.dataURLtoFile(image, `pp-img_${new Date().getTime()}`), this.user.firebase_id) 
    this.stopCamera()
  }

  async turnFlashOn() {
    const flashModes = await CameraPreview.getSupportedFlashModes();
    //const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
    //console.log(supportedFlashModes)
    this.flashActive = !this.flashActive
    const cameraPreviewFlashMode: CameraPreviewFlashMode = this.flashActive ? 'torch' : 'off'

    CameraPreview.setFlashMode(cameraPreviewFlashMode);
  }

  flipCamera() { CameraPreview.flip() }

<ion-header *ngIf="!cameraActive">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="dismiss()">
      <ion-button>
        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ 'image-editing' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div id="cameraPreview" class="cameraPreview">
    <div *ngIf="cameraActive">
      <ion-button color="light" (click)="stopCamera()" expand="block" id="close">
        <ion-icon name="arrow-undo" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="captureImage()" expand="block" id="capture">
        <ion-icon name="camera" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="flipCamera()" expand="block" id="flip">
        <ion-icon name="camera-reverse" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button color="light" (click)="turnFlashOn()" expand="block" id="flash">
        <ion-icon *ngIf="flashActive" color="warning" name="flash" slot="icon-only"></ion-icon>
        <ion-icon *ngIf="!flashActive" name="flash-off" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  </div>
</ion-content>

以下是它在android studio上运行的图片：

下面是一张在实际android设备上运行的图片

这是在chrome上运行的（顺便说一句，不要介意边框，这台电脑有一个蹩脚的camara）

---

顺便说一句，flash似乎也不起作用，但我不知道它是否一定是库，或者我是否做错了什么。

我犯了一个语法和逻辑错误。首先，在CSS中，需要将相机的覆盖设置为常量

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.cameraPreview {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
}

因此，z索引的顺序与按钮的顺序相同

第二，flash boolean witch可以工作，但当我通过一个常量发送命令时，值无论如何不会从false变为false，只要将它变为变量，它就应该工作了

async turnFlashOn() {
    const flashModes = await CameraPreview.getSupportedFlashModes();
    //const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
    //console.log(supportedFlashModes)
    this.flashActive = !this.flashActive
    let cameraPreviewFlashMode: CameraPreviewFlashMode = this.flashActive ? 'on' : 'off'

    CameraPreview.setFlashMode(cameraPreviewFlashMode);
  }