CameraPreview在Ionic 3应用中无法正常工作

Question

我使用了教程来构建相机应用。我想在第一个ion-slide标签内显示相机预览，然后在第二张幻灯片中加载“地图”。拍照后，滑动到下一张幻灯片。但相机预览已加载到全屏模式，并且工厂按钮未显示在相机预览中。点击声音听起来像是在拍照，但后退按钮不起作用。

ts

export class HomePage {
  public LatLng: any;
  public map: any;
  public picture;
  public shouldHide = false;
  localized: boolean = false;
  private cameraPreviewOpts = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: 'rear',
  toBack: false,
  tapPhoto: true,
  tapFocus: false,
  previewDrag: false
};

  @ViewChild('slides') slides: Slides;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public diagnostic: Diagnostic,
    private cameraPreview: CameraPreview

  ) {
    this.checkPermissions();
  }
  initializePreview() {
    this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }

  checkPermissions() {
    this.diagnostic.isCameraAuthorized().then((authorized) => {
      if (authorized){
        this.initializePreview();}
      else {
        this.diagnostic.requestCameraAuthorization().then((status) => {
          if (status == this.diagnostic.permissionStatus.GRANTED)
            this.initializePreview();
          else {
            this.toastCtrl.show(
              'Cannot access camera',
              '5000',
              'bottom',
            ).subscribe(
              toast => {
                console.log(toast);
              }
            );
          }
        });
      }
    });
  }    
  takePhoto() {
    const pictureOpts: CameraPreviewPictureOptions = {
      width: 1280,
      height: 1280,
      quality: 85
    };
    this.cameraPreview.takePicture(pictureOpts).then((imageData) => {
      this.picture = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      console.log(err);
      this.picture = 'assets/img/test.jpg';
    });    
  }    
  ionViewWillEnter() {
    this.slides.update();
    this.slides._allowSwipeToNext = false;
    this.slides._allowSwipeToPrev = false;
  }
  ngOnInit(): void {
    this.drawMap();
  } 
}

html

    <ion-content no-bounce>
      <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">
        <ion-slide>     
          <ion-fab right bottom>
            <button ion-fab color="primary" (click)="takePhoto()">
              <ion-icon name="md-camera"></ion-icon>
            </button>
          </ion-fab>
        </ion-slide>          

<ion-slide>
    <h2>slide 2</h2>
    </ion-slide>