zxing scanning from mobile web browser

[Athraa Faraj]

Hello zxing library,

I have used the zxing library to scan Qr code and barcode from web browser mobile.

 but, I faced problems to make focus or zooming into the barcode and QR.
How can I solve this issue?  

 I want to be like this idea in the picture, add this focus border and the red line to focus on the barcode and read it well and accurately.
 
 attached picture and my code  

       <div class="section_scanner">

                  <div class="btn_scanner">

                    <a class="button" id="startButton">أبدأ التشغيل</a>

                    <a class="button" id="resetButton">أعادةتشغيل</a>

                  </div>

           

           

              <div style="padding: 0px; width: 100%; max-height: 200px; overflow:hidden; border: 1px solid gray">

                    <video id="video" style="width: 100%;"></video>

                </div>

               

     

                  <div id="sourceSelectPanel" style="display:none">

                    <label for="sourceSelect" id="label_video">تغيير مصدر الفيديو</label>

                    <select id="sourceSelect" style="max-width:400px">

                    </select>

                  </div>

  </div>

    <form action="config369.php" method="post">

      <input type="text" name="scan2" id="result" value="">

      <button id="btn2" name="sub">start</button><br><br>

     

  </form>

    <!-- </main> -->

        <!--<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>-->

                      <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>

        <script type="text/javascript">

          window.addEventListener('load', function () {

            let selectedDeviceId;

            const codeReader = new ZXing.BrowserMultiFormatReader()

            console.log('ZXing code reader initialized')

            codeReader.listVideoInputDevices()

              .then((videoInputDevices) => {

                const sourceSelect = document.getElementById('sourceSelect')

                selectedDeviceId = videoInputDevices[0].deviceId

                if (videoInputDevices.length >= 1) {

                  videoInputDevices.forEach((element) => {

                    const sourceOption = document.createElement('option')

                    sourceOption.text = element.label

                    sourceOption.value = element.deviceId

                    sourceSelect.appendChild(sourceOption)

                  })

     

                  sourceSelect.onchange = () => {

                    selectedDeviceId = sourceSelect.value;

                  };

     

                  const sourceSelectPanel = document.getElementById('sourceSelectPanel')

                //   sourceSelectPanel.style.display = 'block'

                }

     

                document.getElementById('startButton').addEventListener('click', () => {

                  codeReader.decodeOnceFromVideoDevice(undefined, 'video').then((result) => {

                  // codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {

                    if (result) {

                      console.log(result)

                      document.getElementById('result').value= result.text

                    }

                    if (err && !(err instanceof ZXing.NotFoundException)) {

                      console.error(err)

                      document.getElementById('result').textContent = err

                    }

                  })

                  console.log(`Started continous decode from camera with id ${selectedDeviceId}`)

                })

     

                document.getElementById('resetButton').addEventListener('click', () => {

                  codeReader.reset()

                  document.getElementById('result').textContent = '';

                  console.log('Reset.')

                })

     

              })

              .catch((err) => {

                console.error(err)

              })

          })

        </script>

best regards,

Athraa