iOS 12 Safari: Is there a way to make web-based QR Scanning work?

13,552

After an extensive conversation with the developer of JsQRScanner, we were able to make QR Scanning work on Safari.

Share:
13,552
RubbelDieKatz
Author by

RubbelDieKatz

Developer at a fairly prestigious company. Recently completed my apprenticeship.

Updated on June 04, 2022

Comments

  • RubbelDieKatz
    RubbelDieKatz almost 2 years

    There are a few working examples of web-based QR scanners out there, notably Instascan (repo) and JsQRScanner (repo). Both of these work flawlessly on Android. On Safari with iOS 12 on an iPhone however, both the examples and my code fails horrendously, producing a black box where the video feed should be or nothing at all. I have no way to debug this without a mac, since I can't catch javascript promises if I have no access to the promise object.

    I tried both of these libraries and I even communicated with one of the developers, but logs would simplify the process. I can't produce these logs without proper tools on Safari.

    Is there any way to make things work properly on Safari?

    Here's a part of my JsQRScanner code. I also kept my old InstaScan code, in case anyone needs it.

    /**
     * Sets up the QR scanner.
     * this function will be called when JsQRScanner is ready to use
     * @see https://github.com/jbialobr/JsQRScanner
     */
    function JsQRScannerReady() {
        try {
            //create a new scanner passing to it a callback function that will be invoked when
            //the scanner succesfully scan a QR code
            var jbScanner = new JsQRScanner(scanEvent);
            setResult("Constructed JsQRScanner object.");
            //reduce the size of analyzed images to increase performance on mobile devices
            jbScanner.setSnapImageMaxSize(300);
            setResult("setSnapImageMaxSize completed.");
            var scannerParentElement = document.getElementById("videoBoundingBox");
            if (scannerParentElement) {
                //append the jbScanner to an existing DOM element
                jbScanner.appendTo(scannerParentElement);
                setResult("Appended jbScanner to div.");
            }   
        } catch (e) {
            setResult("Caught exception in the camera initialisation.");
            setResult(e.message);
        }
        setResult("initialisation complete.");
    }