离子:不显示CameraPreview

时间:2017-09-08 09:44:43

标签: android angularjs cordova ionic-framework cross-platform

我已经设置了一个不想显示CameraPreview的相机应用程序。代码检查相机的授权并返回true。

当我启动应用程序时,它会要求获得许可,然后就不会发生任何事情。

问题:我还能检查什么?

在运行应用程序时,我使用adb shell打开了一个终端。 可以给出提示的唯一一行(但我不明白为什么):

09-08 11:30:34.336  4590  8923 W ExynosCamera1Parameters: [CAM_ID(0)][ParametersBack]-ERROR(getPreviewBayerCropSize[5777]): current BNS size(4032x3024) is NOT same with Hw BNS size(4032x2268)

我安装的插件 - cordova plugin list

cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-camera-preview 0.9.0 "cordova-plugin-camera-preview"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova.plugins.diagnostic 3.6.7 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"

该应用只包含一个名为" home"的页面。

home.ts:

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { Diagnostic } from '@ionic-native/diagnostic';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public toastCtrl: ToastController,
    public diagnostic: Diagnostic,
    public cameraPreview: CameraPreview
    ) {
      this.checkPermissions();
  }

  async checkPermissions(): Promise<void> {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 0,
      y: 0,
      width: window.screen.width,
      height: window.screen.height,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: true,
      alpha: 1
    };

    // picture options
    const pictureOpts: CameraPreviewPictureOptions = {
      width: 1280,
      height: 1280,
      quality: 85
    }

    const authorized = await this.diagnostic.isCameraAuthorized();

    if(authorized) {
      // start camera
      try {
        const result = await this.cameraPreview.startCamera(cameraPreviewOpts);
      // the program runs into here
        console.log("Camera Preview authorized: " + result);
      }
      catch (err) {
        console.log("Camera Preview authorized: " + err)
      }
    }
    else {pictureOpts
      const status = await this.diagnostic.requestCameraAuthorization();

      if(status == this.diagnostic.permissionStatus.GRANTED)
      {
        // start camera
        try {
          const result = await this.cameraPreview.startCamera(cameraPreviewOpts);
          console.log(result);
        }
        catch (err) {
          console.log(err)
        }
      }
      else {
          // Permissions not granted
          // Therefore, create and present toast
          this.toastCtrl.create({
            message: "Cannot access camera",
            position: "bottom",
            duration: 5000
          }).present();
      }
    }

  }

}

和home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-fab right top>
      <button ion-fab color="secondary" >
          <ion-icon name="md-color-wand"></ion-icon>
      </button>
  </ion-fab>

  <ion-fab right bottom>
      <button ion-fab color="primary" >
          <ion-icon name="md-camera"></ion-icon>
      </button>
  </ion-fab>
</ion-content>

我已将所有内容导入app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Diagnostic } from '@ionic-native/diagnostic';
import { CameraPreview } from '@ionic-native/camera-preview';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Diagnostic,
    CameraPreview,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

0 个答案:

没有答案