2

I am trying to use jsqrcode in a Lightning component but I am getting an error when the page loads and another when I try to scan an image. I have added qcode-decoder.min.js as a static resource in my org. Any help or tips are greatly appreciated. Here is the code:


BarcodeApp.app

<aura:application >
     <ltng:require scripts="/resource/BarcodePageResources/qcode-decoder.min.js" />
     <c:BarcodeScanner />
</aura:application>


BarcodeScanner.cmp

<aura:component >
     <aura:attribute name="codeOutput" type="String" />

     <input type="file" accept="image/*;capture=camera" aura:id="file" />
     <ui:button label="Scan" press="{!c.scan}"/>
     <br />
     Output : <ui:outputText value="{!v.codeOutput}" />
</aura:component>


BarcodeScannerController.js

({
    scan : function(component, event, helper) { 

        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0];

        var App = {
            init: function() {
                App.attachListeners();
            },
            attachListeners: function() {
                 if(file)
                 {
                     var imgURL = URL.createObjectURL(file);
                     App.decode(imgURL);
                 }else{
                     component.set("v.codeOutput","Error: Select file to scan.");
                 }
            },
            decode: function(src) {

                QCodeDecoder().decodeFromImage(src, function (err, result) {
                if (err) throw err;
                component.set("v.codeOutput",result);
                });
            }
        };
        App.init();

    }
})


Error #1

This is the error shown when the page loads: enter image description here


Error #2

This is the error shown when the scan button is clicked: Error shown when page first loads.



I believe it is also worth mentioning that this decoder works in a normal html file, this code is working for me:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QCodeDecoder - Image</title>
</head>
<body>

    <h1>QCode Decoder also decodes directly from an image</h1>

    <img src="chart.png" alt="qr code">
    <button id="decode">Decode!</button>

    <script src="qcode-decoder.min.js"></script>
    <script>

    var qr = new QCodeDecoder();

    if (!(qr.isCanvasSupported() && qr.hasGetUserMedia())) {
        alert('Your browser doesn\'t match the required specs.');
        throw new Error('Canvas and getUserMedia are required');
    }

    var btn = document.querySelector('button#decode');
    var img = document.querySelector('img');

    btn.onclick = function () {
        qr.decodeFromImage(img, function (err, result) {
            if (err) throw err;

            alert(result);
        });
    };
    </script>
</body>
</html>
-1

The issue is resolved after going into my Salesforce org and navigating to Setup > Critical Updates and deactivating Locker Service. Does anyone know how to make this code work without having to deactivate Locker Service?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.