Capacitor camera preview的预览被动作按钮覆盖

Question

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

Sass

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 工作室拍摄的照片：

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

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

附带说明一下，闪光灯似乎也没有工作，但我不知道它是否必须是图书馆，或者我做错了什么。

Answer 1

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

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

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

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

第二个 flash 布尔值有效，但是当我通过常量发送订单时，该值无论如何都不会从 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);
  }

Capacitor camera preview的预览被动作按钮覆盖

Capacitor camera preview's preview is overlaid with the action buttons

typescript

android-studio

ionic-framework

angular

capacitor