MeteorJs putting Cordova barcode scanner inside a

Question

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);
       }
    );
  };

Answer 1

The cordova barcode scanner plugin is based on zxing and in Android the control is passed to the plugin app (ie zxing). In the zxing app, the camera scan takes over the entire screen and its output is not or cannot be forced into a div or browser view.