Creating a Custom Camera Preview Overlay with Ionic & Capacitor - ionic-framework

Question

I am trying to create custom camera with overlay. I have tried https://www.youtube.com/watch?v=JA8k738i9jQ&t=385s tutorial. Actually this tutorials output i needed. But when i click on the open camera it's opening native camera instead the in app camera. Am i doing anything wrong. this is my code. Thanks in advance.
camera.ts
import { Component, OnInit } from '#angular/core';
import { Plugins } from '#capacitor/core';
const { CameraPreview } = Plugins
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '#capacitor-community/camera-preview';
#Component({
selector: 'app-camera',
templateUrl: './camera.page.html',
styleUrls: ['./camera.page.scss'],
})
export class CameraPage implements OnInit {
image = null;
cameraActive = false;
constructor() { }
ngOnInit() {
}
openCamera() {
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'rear',
parent: "cameraPreview",
className: "cameraPreview"
};
CameraPreview.start(cameraPreviewOptions);
this.cameraActive = true;
}
async stopCamera() {
await CameraPreview.stop();
this.cameraActive = false;
}
async captureImage() {
const CameraPreviewPictureOptions: CameraPreviewPictureOptions = {
quality: 90
}
const result = await CameraPreview.capture(CameraPreviewPictureOptions)
this.image = `data:image/jpeg;base64, $(result.value)`
this.stopCamera()
}
flipCamera() {
CameraPreview.flip()
}
}
camera.html
<ion-header>
<ion-toolbar>
<ion-title>camera</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="cameraPreview" class="cameraPreview">
<div *ngIf="cameraActive">
<img src="assets/icon/guide.png" class="image-overlay">
<ion-button (click)="stopCamera()" expand="full" id="close">
<ion-icon name="close-circle" slot="icon-only"></ion-icon>
</ion-button>
<ion-button (click)="captureImage()" expand="full" id="capture">
<ion-icon name="camera" slot="icon-only"></ion-icon>
</ion-button>
<ion-button (click)="flipCamera()" expand="full" id="flip">
<ion-icon name="repeat" slot="icon-only"></ion-icon>
</ion-button>
</div>
</div>
<ion-img [src]="image" *ngIf="image && !cameraActive"></ion-img>
<ion-button (click)="openCamera()" expand="full" *ngIf="!cameraActive">Open Camera</ion-button>
<ion-button (click)="stopCamera()" expand="full" *ngIf="cameraActive">Open Camera</ion-button>
</ion-content>
camera.scss
ion-content {
--background: transparent !important;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
.cameraPreview {
display: flex;
position: absolute;
width: 100%;
height: 100%;
}
.image-overlay {
z-index: 1;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
#capture {
position: absolute;
bottom: 30px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
z-index: 11;
}
#close {
position: absolute;
bottom: 30px;
left: calc(50% - 175px);
width: 50px;
height: 50px;
z-index: 11;
}
#flip {
position: absolute;
bottom: 30px;
left: calc(50% + 125px);
width: 50px;
height: 50px;
z-index: 11;
}
#close::part(native) {
border-radius: 30px;
}
#capture::part(native) {
border-radius: 30px;
}
#flip::part(native) {
border-radius: 30px;
}

Answer 1

Use:
import { CameraPreview, CameraPreviewPictureOptions } from '#capacitor-community/camera-preview'
instead of:
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '#capacitor-community/camera-preview'