angular - 离子相机预览不可见

Question

我有一个选项卡布局，在我的第一个选项卡中，我放置了一个带有名为“takePicture()”的单击事件的工厂。在这种方法中，我检查了相机权限，然后尝试使用相机预览插件。当我单击按钮时，相机预览不会出现。

takePicture() {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA).then(result => { 
  console.log(result.hasPermission);
  if(result.hasPermission) {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 10,
      y: 10,
      width: 100,
      height: 100,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: true,
      alpha: 1
    }

    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  } else {
    console.log('Could not access camera without permission');
  }
});
}

输出：

true
Camera started

即使它说相机已启动，预览也不可见。任何帮助表示赞赏！

标签： angulartypescriptcordovaionic-frameworkcamera

Answer 1

通过添加修复它

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

到选项卡的 scss 文件。