zxing invoking unepexected warning in browser console

Question

The browser console is reporting immediately after activating the camera on the device

Started continous decode from camera with id BGOlLyxMumeB0YGZoWhjlsR1atGM5DEXtxqIrhEmoqk=  
It was not possible to play the video.

The camera is however running in the <video tag.

The error references library@latest:15:31010 Error loading this URI: Unknown source

Follows is the HTML code on the page where the error is generated.

What could be the source of the error / or how could it be overcome?

<div id='security_check'></div>
<div class='grid-x grid-padding-x'>
  <div class='cell small-12 '>
    <label>scan:</label>
    <pre><code id="result"></code></pre>
  </div>
  <div class='cell small-2 '>
  </div>
</div>
<div class='grid-x grid-padding-x'>
  <div class='cell small-12 '>
    <div id="sourceSelectPanel" style="display:none">
      <label for="sourceSelect">change_video_source:</label>
      <select id="sourceSelect" style="max-width:400px">
      </select>
    </div>
  </div>
</div>
<div class='grid-x grid-padding-x'>
  <div class='cell small-6'>
    <a class="button" id="resetButton">Stop</a>
  </div>
  <div class='cell small-6'>
    <a class="button" id="startButton">Go</a>
  </div>
</div>
<div class='grid-x grid-padding-x'>
    <video id="video" width="320" height="180" style="border: 1px solid gray"></video>
  </div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

<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.getVideoInputDevices()
      .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.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
            if (result) {
              console.log(result)
              document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
code_data: result.text,
item_id: item.id
};
formData.append("code_json_data", JSON.stringify(CodeParams));
Rails.ajax({
url: "update_q",
type: "post",
data: formData
});
            }
            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>

zxing invoking unepexected warning in browser console

0 Answers0