Question

我正在尝试使用Ionic 4构建相机应用程序，但无法加载相机预览插件。应用程序要求获得摄像头许可，猜测摄像头正在工作，但是我只得到了白屏。谁能解释它的工作原理和操作方法。

 cameraOpts: CameraPreviewOptions = {
    x: 20,
    y: 20,
    width: window.innerWidth,
    height: 50,
    camera: 'front',
    tapPhoto: true,
    previewDrag: true,
    toBack: true,
    alpha: 1
  }

  constructor(private cameraPreview: CameraPreview) {}

  ngOnInit() {
    this.startCamera();
  }

  startCamera() {
    this.cameraPreview.startCamera(this.cameraOpts)
    .then(response => {
    console.log('camera running!' + response)
    })
    .catch(error => {
    console.log('couldnt access camera' + error)
    }) 
  }

Answer 1

如果要使用IOS进行尝试，请在config.xml中的“平台IOS”部分下添加最下面的2个属性：-

<config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
    <string>Allow the app to access your photos</string>
</config-file>
<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
    <string>Allow the app to use your camera</string>
</config-file>


const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  correctOrientation: true,
  mediaType: this.camera.MediaType.PICTURE,
  ...useAlbum ? { sourceType: this.camera.PictureSourceType.PHOTOLIBRARY } : {}
}

this.camera.getPicture(options).then((imageData) => {
    // Do whats necessary
});

相机插件是使用相机的更好选择。

Answer 2

我解决了这个问题。

我添加了$ background-color：透明；到variable.scss

，然后将背景色设置为我正在使用此插件的页面透明，并且可以顺利使用。

如何正确使用Ionic相机预览插件

2 个答案: