Visual Builder

Get Involved. Join the Conversation.

Topic

    Sunil Kumar
    VBCS QR CODE SCAN APP NOT WORKING using TakePhoto & jsQR
    Topic posted August 26, 2019 by Sunil KumarRed Ribbon: 250+ Points, tagged Action Flows, Custom Code, JET, Layout, Mobile, Tip, UI, Web 
    21 Views, 3 Comments
    Title:
    VBCS QR CODE SCAN APP NOT WORKING using TakePhoto & jsQR
    Summary:
    VBCS QR CODE SCAN APP NOT WORKING using TakePhoto & jsQR
    Content:

    Hi All,

    I am trying to build a simple mobile app to scan QR code , I have gone through some links & found about Take Photo feature of VBCS & jsQR lib. I tried to use them to build the app but some how not able to scan. Please find below the issue I am facing

    1. Firstly TakePhoto returns a blob (https://docs.oracle.com/en/cloud/paas/integration-cloud/visual-developer/takephoto-action.html) , but jsQR  expects a imageData object (refer here -- https://github.com/cozmo/jsQR)  ==> I tried to convert blob to base64 & base64 to imageData object using canvas but below code is returning null

    const code = jsQR(imageData, width, height, options?);
    

    console.log(code) // this is out put to null

     

    If any one has done this can you please share the correct approach/code please.

    Thanks in advance

     

    Regards

    Sunil

     

     

     

    Version:
    VBCS 19.1.3
    Code Snippet:

    Comment

     

    • JT Thomas

      Hi Sunil,

      Take a look at this reply to the same question a few weeks back.

      https://cloudcustomerconnect.oracle.com/posts/7e325d6983?commentId=265639#265639

      ~/jt

      • Sunil Kumar

        Thank you JT Thomas , that link really helped. But while going through the link I noticed that the code used for JSQR to scan  is not using TakePhoto action of VBCS. Is there any specific reason of not using the TakePhoto feature & writing your own code to access camera????

         

        Regards

        Sunil

        • JT Thomas

          Hi Sunil,

          It depends on the user experience you want to provide. That example code will enable the camera to scan for a code, while take photo will require the user to center the code in the viewfinder and actually take a picture. 

          ~/jt