Hello!
I am having a real trouble with implementing QR code scanning. I tried to use cordova-plugin-qrscanner (here). It does scan the qr codes reliably, but I cannot figure out, how can I constrain the preview.
Currently it works as follows:
Upon clicking “Try camera show”, the QRscanner show command is fired. My goal is to get it inside div that says “Camera preview should go here”:
But Instead the preview takes over the whole body, like so:
Code for component:
export default () => {
useEffect(() => {
if (Meteor.isCordova) {
QRScanner.prepare();
}
}, [])
return (
<div>
.
.
<div className="upper-center camera-preview">Camera preview should go here</div>
.
.
<div className="bottom">
<button onClick={() => Meteor.isCordova && QRScanner.show()} >Try camera show</button>
<button onClick={() => Meteor.isCordova && QRScanner.hide()} >Try camera hide</button>
<button onClick={() => Meteor.isCordova && QRScanner.destroy()} >Try camera destroy</button>
</div>
</div>
)
}
Any ideas, how could I find a solution to my problem? May be different QR scanner Cordova package or some ideas, how could I get this one to work?
For all the answers, thanks in advance! Cheers!