[ionic v3] Object(...) is not a function at CameraPreview.startCamera

@hn162 wrote:

Hi,

I’m developing an ionic 3 application in which I need to show the camera interface inside the app screen and camera-preview seems to be the right and only solution to go with at this moment. However, when I trigger the startCamera function, I always get the error ’ Object(…) is not a function at CameraPreview.startCamera’. Any help would be much appreciated.

Here are the steps I used for the installation:

1. From CLI:
   ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
   npm install @ionic-native/camera-preview

2.Add to the provider list in module.ts file

import { CameraPreview } from '@ionic-native/camera-preview/ngx';
.....
providers: [  
    CameraPreview, ...
]

Below is the page where I would use the plugin:

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';

@Component({
  selector: 'page-submitdata2',
  templateUrl: 'submitdata2.html',
})
export class Submitdata2Page {
  
  public getWidth: number;
  public getHeight: number;
  public calcWidth: number;
  cameraPreviewOpts: CameraPreviewOptions =
    {
      x: 40,
      y: 100,
      width: 220,
      height: 220,
      toBack: false,
      previewDrag: true,
      tapPhoto: true,
      camera: this.cameraPreview.CAMERA_DIRECTION.BACK
    }
  constructor(
    public cameraPreview: CameraPreview, private zone: NgZone,
    public navCtrl: NavController, public navParams: NavParams) {

    this.zone.run(() => {
      this.getWidth = window.innerWidth;

      this.getHeight = window.innerHeight;
    });
    console.log('width', this.getWidth);

    this.calcWidth = this.getWidth - 80; 

    console.log('calc width', this.calcWidth);
    }
  ionViewDidLoad() {
    console.log('ionViewDidLoad Submitdata2Page');
  }
  startCamera() {
    debugger
    this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }


  stopCamera() {
    this.cameraPreview.stopCamera();
  }
  takePicture() {
    this.cameraPreview.takePicture()
      .then((imgData) => {
        (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
      });
  }
  SwitchCamera() {
    this.cameraPreview.switchCamera();
  }
  showCamera() {
    this.cameraPreview.show();
  }
  hideCamera() {
    this.cameraPreview.hide();
  }
}

The HTML:

<ion-header>
    <ion-navbar>
        <ion-title>Preview Page</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>

    <h5>This is camera Preview Application..</h5>

    <div class="displaybottom">
        <button ion-button (click)="startCamera()"> Start Camera</button>
        <button ion-button (click)="stopCamera()"> Stop Camera</button>

        <button ion-button (click)="takePicture()"> Take Picture Camera</button>

        <button ion-button (click)="SwitchCamera()"> Switch  Camera</button>

        <button ion-button (click)="showCamera()"> Show Camera</button>

        <button ion-button (click)="hideCamera()"> Hide Camera</button>
    </div>

    <div class="pictures">
        <p><img id="previewPicture" width="200" /></p>
        <!--<p><img id="originalPicture" width="200"/></p>-->
    </div>

</ion-content>

My Development Enviroment:

Posts: 1

Participants: 1

Read full topic