电容相机预览的预览覆盖了动作按钮

Question

我正在使用这个Capacitor CameraPreview 库来使用设备的相机功能，但由于某些奇怪的原因，当导出到安卓设备时，相机按钮与预览重叠。这很奇怪，因为只发生在 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>

萨斯

img {
    width: 100%;
    height: auto;
}

ion-content {
    --background: transparent!important;
}

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

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

.image-overlay {
    z-index: 1;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
}

#capture {
    position: absolute;
    bottom: 25px;
    left: calc(50% - 37.5px);
    width: 72px;
    height: 72px;
    z-index: 11;
}

#close {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 150px);
    width: 50px;
    height: 50px;
    z-index: 11;
}

#flip {
    position: absolute;
    bottom: 30px;
    left: calc(50% + 97px);
    width: 50px;
    height: 50px;
    z-index: 11;
}

#flash {
    position: absolute;
    top: 30px;
    left: calc(50% + 97px);
    width: 50px;
    height: 50px;
    z-index: 11;
}

#close::part(native) {
    border-radius: 30px;
}

#capture::part(native) {
    border-radius: 45px;
}

#flip::part(native) {
    border-radius: 30px;
}

#flash::part(native) {
    border-radius: 30px;
}

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

这是在实际安卓设备上运行的图片

这是在 chrome 上运行的（顺便说一句，不要介意边框，这台电脑的摄像头很糟糕）

附带说明一下，flash 似乎也无法正常工作，但我不知道是图书馆还是我做错了什么。

Answer 1

我犯了句法和逻辑错误。首先在 CSS 中，需要将相机的叠加层设置为一个常数值。

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

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

因此，z-index 按按钮的顺序排列。

第二个闪光布尔女巫工作，但当我通过一个常量发送命令时，无论如何值不会从 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);
  }