TypeError: undefined is not an object (evaluating 'e.QR_CODE')

[samvandamme]

Describe the bug After getting the camera's and when you run html5QrCode.start, I'm getting the error Safari: TypeError: undefined is not an object (evaluating 'e.QR_CODE') Chrome: TypeError: Cannot read properties of undefined (reading 'QR_CODE')

To Reproduce Using the "hard" version import { Html5Qrcode } from "html5-qrcode"

startCertainCameraButtonClicked(event) {
    event.preventDefault()
    const cameraId = event.target.dataset["camera-id"]

    const html5QrCode = new Html5Qrcode(cameraDivId);
    html5QrCode.start(
      cameraId,
      {
        fps: 20, // Optional, frame per seconds for qr code scanning
        qrbox: { width: 250, height: 250 },  // Optional, if you want bounded box UI
        // formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ]
      },
      (decodedText, decodedResult) => {
        // do something when code is read
        console.log("decodedText:   " + decodedText);
        console.log("decodedResult: " + decodedResult);
      },
      (errorMessage) => {
        // parse error, ignore it.
        console.log("error message 1: " + errorMessage);
      })
    .catch((err) => {
      // Start failed, handle it.
      console.log("error message 2: " + err);
    });
  }

Expected behavior Not getting the error, but filling the div with the camera stream.

Desktop (please complete the following information):

• OS: Mac OSX 13.0
• Browser Chrome & Safari
• Version 2.2.8
• Stimulus on Ruby on Rails

[gioggi]

Confirm

[tarmotalu]

Confirm

[mebjas]

Which version of the library?

[tarmotalu]

Hi!

Version 2.3.7. I'm loading through importmap script type. Do I use it correctly or missing something? Loading html5-qrcode.min.js directly works as expected.

<script type="importmap">{
      "imports": {"html5-qrcode": "https://ga.jspm.io/npm:[email protected]/esm/index.js"}
}</script>

And use it as

import { Html5Qrcode } from "html5-qrcode"
...
let scanner = new Html5Qrcode("reader")

Which results

TypeError: undefined is not an object (evaluating 'e.QR_CODE')
ZXingHtml5QrcodeDecoder — zxing-html5-qrcode-decoder.js:6
Html5QrcodeShim — code-decoder.js:52
Html5Qrcode — html5-qrcode.js:104

[melvinTmk]

Hello, have you found any solutions? @samvandamme

[samvandamme]

Hello, have you found any solutions? @samvandamme

No, we started using another library: https://github.com/nimiq/qr-scanner