javascript - MeteorJs 将 Cordova 条码扫描仪放在固定 div 内

Question

在我的 meteor 中，我需要实现一个二维码扫描仪。 我正在尝试使用cordova 条形码扫描仪包用于 meteor 。扫描仪在 Android 手机上运行良好。 但我的要求是把这个扫描仪放在一个固定的div内，这样也可以保留其他 Action 来执行其他功能。

例如，在屏幕的右上角，将有一个取消按钮，在其下方将有一个带有一些文本的标题，在其下方应放置扫描仪。

这整个事情将在模板内。问题是，当我尝试实现此操作时，扫描仪占据了整个屏幕。我需要帮助来实现这个目标，我搜索了很多论坛，但找不到有用的东西来满足我的要求。

任何帮助将不胜感激。

这是我的模板:

  <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>

并在js文件中

   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

cordova 条码扫描仪插件基于 zxing，在 Android 中，控制权传递给插件应用程序(即 zxing)。在 zxing 应用程序中，相机扫描占据整个屏幕，其输出不会或不能强制进入 div 或浏览器 View 。