Ionic 4：Cordova Camera Preview 隐藏了 html 个元素，即使 "toBack" 设置为 "true"

Question

对于一个大学项目，我必须使用 Ionic 4 实现一个 Ionic 应用程序。

该应用程序使用地理定位在地图中显示街头艺术的位置。

在另一个菜单选项卡中，您可以扫描 QR 码，它提供有关来自 .json 的特定街头艺术的数据，并使用 cordova 插件将其显示在相机预览中。

扫描工作正常，之后相机预览打开，但我看不到 .html 中的对象，即使 "toBack" 设置为 "true"。

我真的被这个问题困住了，找不到任何解决方案。

import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { JsonDataService } from '../../json-data.service';
import { DOCUMENT } from '@angular/common';
import { Toast } from '@ionic-native/toast/ngx';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';
import { CameraPreview, CameraPreviewOptions } from '@ionic-native/camera-preview/ngx';
import { Platform } from '@ionic/angular';


@Component({
  selector: 'app-ar',
  templateUrl: './ar.page.html',
  styleUrls: ['./ar.page.scss'],
})
export class ArPage implements OnInit {

  datenData = [];
  selectedProduct: any;
  productFound = false;


  constructor(
    private barcodeScanner: BarcodeScanner,
    private datenService: JsonDataService,
    private toast: Toast,
    private router: Router,
    public navCtrl: NavController, private cameraPreview: CameraPreview, private platform: Platform,
    @Inject(DOCUMENT) private _document) {
    fetch('../../../assets/data/data.json').then(res => res.json())
      .then(data => {
        this.datenData = data.jsondata;
        this.datenService.setJsondata(this.datenData);
        console.log(data);
      });
  }
  ngOnInit() {
    this.qrscan();
  }

  qrscan() {
    this.datenData = this.datenService.getJsondata();
    this.selectedProduct = {};
    this.barcodeScanner.scan().then((barcodeData) => {
      this.selectedProduct = this.datenData.find(daten => daten.qrcode === barcodeData.text);
      if (this.selectedProduct !== undefined) {
        this.productFound = true;
        this.camerapreview();
      } else {
        this.productFound = false;
        this.router.navigate(['/tabs/tab2']);
        this.toast.show(`Product not found`, '5000', 'center').subscribe(
          toast => {
            console.log(toast);
          }
        );
      }
    }, (err) => {
      this.toast.show(err, '5000', 'center').subscribe(
        toast => {
          console.log(toast);
          this.router.navigate(['/tabs/tab2']);
        }
      );
    });
  }

  camerapreview() {
    const cameraPreviewOpts: CameraPreviewOptions = {
      width: window.screen.width,
      height: window.screen.height,
      previewDrag: true,
      toBack: true,
      alpha: 1,
      x: 0,
      y: 0,
      camera: 'rear',
    }
    // start camera
    this.cameraPreview.startCamera(cameraPreviewOpts);
  }
}

html, body, .ion-app, .ion-content, .nav-decor {
  background-color: transparent !important;
}

<ion-header>
  <ion-toolbar text-center>
    <ion-buttons slot="start" defaultHref="/tabs/tab2">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>ar</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
</ion-content>

如果有人能帮助我解决这个问题，我将不胜感激。

真的谢谢你！

编辑：

这是它的 github 存储库：https://github.com/alexandrasophiapetersen/ARapp。

在 Pages/ar 中是一个示例 QR 码。

当前页面的屏幕截图（可以看出，html-对象在相机预览后面）：

Answer 1

tl;dr: cordova-camera-preview 插件与电容器不兼容，请参阅：capacitor/issues/1732 and cordova-plugin-camera-preview/issues/563

旧答案：您是否确定您的css确实生效并且将所有重要图层设置为透明？

如果您将像 html 这样的选择器放在除主应用程序组件之外的任何地方，它们将无法开箱即用，因为 angular 默认启用 ViewEncapsulation。

如果确实是这种情况，您可以通过将 css 移动到主应用程序组件的样式表或禁用相关页面的 ViewEncapsulation 来解决它：

@Component({
  selector: 'app-ar',
  templateUrl: './ar.page.html',
  styleUrls: ['./ar.page.scss'],
  encapsulation: ViewEncapsulation.None
})

更新：尝试添加

app-ar ion-content {
  --background: transparent;
}

ion-content 否则会隐藏实时预览：

Ionic 4：Cordova Camera Preview 隐藏了 html 个元素，即使 "toBack" 设置为 "true"

Ionic 4: Cordova Camera Preview is hiding html-elements, even though "toBack" is set to "true"

cordova

ionic-framework

cordova-plugins

ionic4

capacitor