Visual Builder

Get Involved. Join the Conversation.

Topic

    Janani Kannan
    QR code scanner in VBCS
    Topic posted July 3, 2019 by Janani Kannan, tagged Action Flows, Custom Code, JET, Mobile, Process, REST, Stage / Publish / DevOps 
    96 Views, 1 Comment
    Title:
    QR code scanner in VBCS
    Summary:
    QR code scanner in VBCS
    Content:

    Hi,

    I would like to implement QR Code Scanner in oracle VBCS Mobile Application.  I have tried implementing take photo action using camera but i don't know how to add JS code. 

    I checked the the below reference URL.

    https://cloudcustomerconnect.oracle.com/posts/dc56dd0405

    Here there is a JS library called jsQR, from where i can import this JS library.

    Kindly anyone help me to implement QR Code scanner in Oracle VBCS.

    Thanks in advance,

    Regards,

    Janani

    Comment

     

    • John Graves

      Janani,

      This has been discussed in this post:

      https://cloudcustomerconnect.oracle.com/posts/8336c4085c

       

      I've done this in a couple of different ways.  You could use the cordova plugin in a similar way as ViJay does for Facial Recognition: https://medium.com/@vijaykumar.yenne/media-capture-using-oracle-visual-builder-for-facial-recognition-app-f5049ea2564a

      Then use a bit of JS to get it to work:

        PageModule.prototype._showBarcodeScanner = function () {
          
          var barcodeScannerPromise = new Promise(function (resolve, reject) {
                  window.cordova.plugins.barcodeScanner.scan
                      (function (result) {
                        console.log(result.text);
                          resolve(result.text);                    
                      },
                      function (err) {
                          console.error(err);
                      reject(err);
                  });
              });
              return barcodeScannerPromise;
          
        };
      

       

       

       

      OR use the jsQR library.  Here is some sample JS code to use the library after you get it installed.

      define(["resources/jsQR"], function(jsQR) {
        'use strict';
      
        var PageModule = function PageModule(context) {
          PageModule.prototype.eventHelper = context.getEventHelper();
        };
      
        PageModule.prototype.setupCamera = function() {
          var video = document.createElement("video");
      
          // Get access to the camera!
          if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // Not adding `{ audio: true }` since we only want video now
            navigator.mediaDevices.getUserMedia({
              video: {
                facingMode: "environment"
              }
            }).then(function(stream) {
              //video.src = window.URL.createObjectURL(stream);
              video.srcObject = stream;
              video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
              video.play();
              requestAnimationFrame(function() {
                PageModule.prototype.tick(video);
              });
      
            });
          };
        };
      
        PageModule.prototype.tick = function(video) {
          //var video = document.getElementById("video");
          var canvasElement = document.getElementById("canvas");
          var canvas = canvasElement.getContext("2d");
          var keepGoing = true;
          if (video.readyState === video.HAVE_ENOUGH_DATA) {
            canvasElement.hidden = false;
            canvasElement.height = video.videoHeight;
            canvasElement.width = video.videoWidth;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            var imageData = canvas.getImageData(0, 0, canvasElement.width,
              canvasElement.height);
            var code = jsQR(imageData.data, imageData.width, imageData.height, {
              inversionAttempts: "dontInvert",
            });
            if (code) {
              PageModule.prototype.drawLine(canvas, code.location.topLeftCorner,
                code.location.topRightCorner, "#FF3B58");
              PageModule.prototype.drawLine(canvas, code.location.topRightCorner,
                code.location.bottomRightCorner, "#FF3B58");
              PageModule.prototype.drawLine(canvas, code.location.bottomRightCorner,
                code.location.bottomLeftCorner, "#FF3B58");
              PageModule.prototype.drawLine(canvas, code.location.bottomLeftCorner,
                code.location.topLeftCorner, "#FF3B58");
              
              console.log("JRG: Found QR code: ", code);
              var strCode=code.data;
              console.log("JRG: Found QR strcode: "+strCode);
              console.log("JRG: in tick.");
              var eventHelper = PageModule.prototype.eventHelper;
              console.log("In STR Code",strCode );
              eventHelper.fireCustomEvent("DisplayResultsEvent", strCode);
              keepGoing=false;
            }
          }
          if(keepGoing) {
              requestAnimationFrame(function() {
                PageModule.prototype.tick(video);
              });
            }
      
        };
      
        PageModule.prototype.drawLine = function(canvas, begin, end, color) {
          canvas.beginPath();
          canvas.moveTo(begin.x, begin.y);
          canvas.lineTo(end.x, end.y);
          canvas.lineWidth = 4;
          canvas.strokeStyle = color;
          canvas.stroke();
        }
      
        return PageModule;
      });