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

Question

我使用这个电容器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>

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上运行的(顺便说一句，这台pc有一个糟糕的卡马拉( camara) )

​

​

顺便说一句，闪光灯似乎也不起作用，但我不知道它是不是必须是图书馆，还是我做错了什么。

Answer 1

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

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

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

所以z-索引按按钮的顺序减少了。

第二，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);
  }