In my meteor, I need to implement a qr code scanner. I am trying to use cordova barcode scanner package for meteor. The scanner is running fine on the android phone. But my requirement is to put this scanner inside a fixed div, so that other actions can also be kept to perform other functions.
For example, at the top right corner in the screen, there will be a cancel button, and below that there will be an header with some text, and below that should be placed the scanner.
This whole thing will be inside a template. The problem is that when I am trying to implement this, the scanner is occupying the entire screen. I need help to achieve this goal, I have searched many forums but could not found something useful to meet my requirements.
Any help would be greatly appreciated.
Here is my template:
<template name="home_modal">
{{> init_modal}}
{{> pay_modal}}
</template>
<template name="init_modal">
<div id="modal2" class="modal home-modal">
<div class="modal-content">
<a><h4 class="center modal-scan-done">
Scan the product's Code</h4>
</a>
<div id="qr-scanner">
<input type="button" value="cancel"/>
</div>
{{> scan_modal}}
</div>
</div>
</template>
<template name="scan_modal">
//on rendering of this template , the Cordova plugin is called
</template>
<template name="pay_modal">
//code for this template goes here
</template>
And in the js file
Template.scan_modal.rendered = function () {
cordova.plugins.barcodeScanner.scan(
function (result) {
Session.set('scannedCode',result.text);
console.log(Session.get('scannedCode'));
},
function (error) {
alert("Scanning failed: " + error);
}
);
};
