title: iOS 12 Safari: Is there a way to make web-based QR Scanning work?
body: <p>There are a few working examples of web-based QR scanners out there, notably <a href="https://schmich.github.io/instascan/" rel="nofollow noreferrer">Instascan</a> (<a href="https://github.com/schmich/instascan" rel="nofollow noreferrer">repo</a>) and <a href="https://jbialobr.github.io/JsQRScanner/" rel="nofollow noreferrer">JsQRScanner</a> (<a href="https://github.com/jbialobr/JsQRScanner" rel="nofollow noreferrer">repo</a>). 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.</p>
  
  <p>I tried both of these libraries <a href="https://github.com/jbialobr/JsQRScanner/issues/3" rel="nofollow noreferrer">and I even communicated with one of the developers</a>, but logs would simplify the process. I can't produce these logs without proper tools on Safari.</p>
  
  <p>Is there any way to make things work properly on Safari?</p>
  
  <p>Here's a part of my JsQRScanner code. I also kept my old InstaScan code, in case anyone needs it.</p>
  
  <pre><code>/**
   * 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.");
  }
  </code></pre>