update qr code

app/assets/stylesheets/CRM.scss

@@ -81,4 +81,16 @@
     padding-top: 5%;
     border-radius: 100px;
     z-index: 1101;
+}
+
+#container {
+    margin: 0px auto;
+    width: 480px;
+    height: 375px;
+
+}
+#videoElement {
+    width: 480px;
+    height: 375px;
+    
 }

app/views/crm/customers/_new_form.html.erb

@@ -138,7 +138,29 @@
 <div id="sxModal">
     <div id="sxModal-Content"><h3>Card Tap</h3></div>
 </div>
+<!-- The modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
+  <div class="modal-dialog modal-lg" style="margin-left:-380px">
+    <div class="modal-content">
 
+      <!-- <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
+      </div> -->
+
+      <div class="modal-body">
+        <div id="container">
+            <video autoplay="true" id="videoElement">
+             
+            </video>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
 <script type="text/javascript">
   $(function() {
     // Read Card Reader

app/views/crm/customers/index.html.erb

@@ -33,6 +33,9 @@
                       </div>
                     <% end %>
                     <button id="member_acc_no" class="btn btn-success btn-md"><span class="fa fa-credit-card"></span> Member Card</button>
+                    <button id="qr_code" class="btn btn-danger btn-md" data-toggle="modal" data-target="#myModal"><span class="fa fa-credit-card"></span> QR CODE</button>
+                   
+    
                  </td>
               </tr>
               <tr>
@@ -91,6 +94,30 @@
 <script type="text/javascript">
 
 $(function() {
+
+    var video = document.querySelector("#videoElement");
+ 
+    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
+     
+    if (navigator.getUserMedia) {       
+        navigator.getUserMedia({video: true}, handleVideo, videoError);
+    }
+     
+    function handleVideo(stream) {
+        video.src = window.URL.createObjectURL(stream);
+        video.addEventListener('loadeddata', function (content) {
+            console.log(content);
+          });
+
+        // video.addEventListener('loadeddata', function() {
+        // console.log('Video dimensions: ' + video.videoWidth + ' x ' + video.videoHeight);
+        // }, false);
+    }
+     
+    function videoError(e) {
+        // do something
+    }
+
     $('.datepicker').datepicker({
         format : 'dd-mm-yyyy',
         autoclose: true
@@ -108,6 +135,28 @@ $(function() {
         $("#filter_form").submit();
       },100);
     });
+
+    // QR Code Reader
+    $("#qr_code").on('click', function(e){
+        var code = "";
+        $("#sxQRModal").show();
+        setTimeout(function(){
+          console.log("hi")
+           getQRCode();
+          $("#sxQRModal").hide();
+        },100);
+    });
+
+    // Read qrcode from java
+    function getQRCode(){
+      code2lab.readQRCode();
+    }
+
+    // get CardNo from Java
+    function QRCodeNo(code){
+      alert(code);
+    }
+
 });
 
 $(document).on('click',".customer_tr",function(){