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.);

}