Can i create a camera view inside ion-content - html

Question

i am trying to create a QR code scanner app where I done by following ionic barcode plugin but when I click on the button i need to the camera view to be viewed inside my ion-item the camera should give a live feed of what it see.
<ion-content padding >
<ion-item style="background-color: transparent;">
<!--MY CAMERA VIEW INSIDE HERE SHOULD ALWAYS SHOW ME LIVE FEED -->
</ion-item>
<ion-item>
<!-- DATA FROM THE SCANNED QR CODE-->
</ion-item>
</ion-content>
constructor(public navCtrl: NavController,
public barcodeScanner: BarcodeScanner) {
}
ionViewWillEnter(){
this.open_bar();
}
open_bar(){
console.log("open camera clicked")
this.barcodeScanner.scan().then(barcodeData => {
console.log('Barcode data', barcodeData);
}).catch(err => {
console.log('Error', err);
});
}
}
when page loads 50% is for camera and 50% is for data from the QR code data the camera should always be live when page loads
I am expecting a view like this

Answer 1

You could somehow overwrite the barcode plugin's code to open camera with this other plugin instead of regular Cordova camera. This plugin lets you achieve this with little effort. What's complicated is to make that adaptation in barcode's plugin

Answer 2

You cannot do that with the BarcodeScanner plugin, instead, you should use the QRScanner module
Installation
ionic cordova plugin add cordova-plugin-qrscanner
npm install --save #ionic-native/qr-scanner
Add it to your providers in app.module.ts
#NgModule({
.....
providers: [
....
QRScanner
]
})
Use
In your .ts file, add QRscanner to your constructor
constructor(private qrScanner: QRScanner) {}
And call the QRScanner like this :
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// You can scan your QR Code
this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned value', text);
this.qrScanner.hide();
this.scanSub.unsubscribe();
});
this.qrScanner.show();
} else if (status.denied) {
console.log('Camera permission denied');
} else {
console.log('Permission denied for this runtime.');
}
})
.catch((e: any) => console.log('Error is', e));
}
QRScanner doesn't open a view to display camera (like BarcodeScanner does), but simply displays the view in background, so make sure to make the preview area transparent