QR Not Show in UMD Javascript

Describe the bug QR scanner not showing in UMD Javascript but camera indicator is on. Last used was yesterday

Expected behavior Scanner QR show with indicator camera on.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 107

Smartphone (please complete the following information):

• Device: Xiaomi 4X
• OS: Android 7.1
• Browser Chrome
• Version 98

Additional context qr.blade.php

@section(‘content’)

<div class="fl scanner">
      <div id="reader" maxWidth="600px" MaxHeight="600px" width="100%"></div>
</div>

@edsection

@section(‘js’)

<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script type="text/javascript">
   // function onScanSuccess(decodedText, decodedResult) {
   //    // handle the scanned code as you like, for example:
   //    console.log(`Code matched = ${decodedText}`, decodedResult);
      
   //    document.querySelector('#idPartner').value = decodedText;
      
   //    document.querySelector('.form-scan').style.display = 'inline';
   //    document.querySelector('.scanner').style.display = 'none';
   // }

       
   // let config = {
   //    fps: 10,
   //    qrbox : { width: 400, height: 300 },
   //    rememberLastUsedCamera: true,
   //    // Only support camera scan type.
   //    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
   // };
       
   // let html5QrcodeScanner = new Html5QrcodeScanner(
   //    "reader", config, /* verbose= */ false);
   // html5QrcodeScanner.render(onScanSuccess);
   const formatsToSupport = [
      Html5QrcodeSupportedFormats.QR_CODE
   ];
   const html5QrCode = new Html5Qrcode("reader");
   const qrCodeSuccessCallback = (decodedText, decodedResult) => {
      /* handle success */
      console.log(`Code matched = ${decodedText}`, decodedResult);
      
      document.querySelector('#idPartner').value = decodedText;
      
      document.querySelector('.form-scan').style.display = 'inline';
      document.querySelector('.scanner').style.display = 'none';
   };
   const config = { fps: 10, qrbox: { width: 250, height: 250, formatsToSupport: formatsToSupport} };
   html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
</script>

@endsection

[khoirulbads]

please help us, Khalid Perwira is my Dev team, this apps built by Laravel. so html 5 works in blade, a few days ago this is worked, but i dont know yesterday camera not opened

[khalidperwira]

Hello Mebjas, Thank you for your attention. We tried your first solution. It helped us a lot. We tracked down the problem and found out that problem was with a div with the class fl scanner. We don’t know why it happened. It seems like a dumb mistake.

By the way, the first solution was a simple way to make a back camera-first scanner, right? I will post our code below.

Once again, thank you very much for your attention, and keep up the best work.

qr.blade.php

@section('content')
<div style="max-height: 400px;max-width: 400px;">
      <div id="reader"></div>
</div>
@endsection

@section('js')
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script type="text/javascript">
   const qrCodeSuccessCallback = (decodedText, decodedResult) => {
      /* handle success */
      console.log(`Code matched = ${decodedText}`, decodedResult);
   };
   const formatsToSupport = [
      Html5QrcodeSupportedFormats.QR_CODE
   ];

   const html5QrCode = new Html5Qrcode("reader", {formatsToSupport: formatsToSupport});
   const config = { fps: 10, qrbox: { width: 250, height: 250} };
   html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
</script>
@endsection