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:
- 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:
![Capture]()
