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