add the horizonal red line and yellow dots during codeReader.decodeFromVideoDevice

Hi, Is there away to add features to help user to better orient the phone in front of the barcode? I am thinking about the horizontal red line and the yellow dots, like in the android app. or CornerDetector

here a running example to use for.

Thanks

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

<!--
<script type="text/javascript" src="xzing.js"></script>
-->

  <script type="text/javascript">

    window.addEventListener('load', function () {
      let selectedDeviceId;

       // https://github.com/zxing-js/library/issues/374
       // enable TRY_HARDER using hints
        const hints = new Map(); // hints is a JS Map Object
        hints.set(ZXing.DecodeHintType.TRY_HARDER, true);
        // the code reader will enable try harder once it reads this

      // you gotta pass hints to the code reader to enable TRY_HARDER
      const codeReader = new ZXing.BrowserMultiFormatReader(
      // I broke this in new lines so I can comment and give you tips
            null,  // first param is a delay between scans
            hints // this allows you to customize code reader
        );


      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', () => {
            var audio = new Audio('beep.mp3');
            codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
              if (result) {
                audio.play();
                console.log(result)
                document.getElementById('result').textContent = result.text
                //Shiny.onInputChange("send_serialNumber_id",  result.text);
                Shiny.setInputValue("send_serialNumber_id",  result.text, {priority: "event"});
              }
              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>

[odahcam]

Transfering this issue to the browser repository. Once the main features are estabilished I can try to create such feature. Thanks.

[fydelio]

@kmezhoud, basically all you need to do is use the code provided and adapt for your needs. Bellows will give you a red horizontal line (not yet very stylish, but with some more css it’s easily improved). For dots basically just add further DIV elements with position: absolute and style them accordingly.

<div style="position: relative; width: 100%">
    <div style="position: absolute; height: 5px; background-color: red; top: 50%; left: 25%; right: 25%">
</div>