I have been trying to implement barcode reader on my web page hosted in localhost iis.

• The library that I am using is : <script type="text/javascript" src="https://unpkg.com/@@zxing/library@latest"></script>

• My Code is:

  const codeReader = new ZXing.BrowserMultiFormatReader();

   codeReader.decodeFromVideoDevice(undefined, 'webcam-preview', (result, err) => {
       if (result) {
           // properly decoded qr code
           console.log('Found QR code!', result)
           document.getElementById('result').textContent = result.text
       }
  
       if (err) {
           // As long as this error belongs into one of the following categories
           // the code reader is going to continue as excepted. Any other error
           // will stop the decoding loop.
           //
           // Excepted Exceptions:
           //
           //  - NotFoundException
           //  - ChecksumException
           //  - FormatException
  
           if (err instanceof ZXing.NotFoundException) {
               console.log('No QR code found.')
           }
  
           if (err instanceof ZXing.ChecksumException) {
               console.log('A code was found, but it\'s read value was not valid.')
           }
  
           if (err instanceof ZXing.FormatException) {
               console.log('A code was found, but it was in a invalid format.')
           }
       }
   })
  

My barcode reader is working on desktop browser 'chrome' however not opening the camera on any mobile browsers. I have tried chrome, firefox, opera.

When I check from chrome://inspect

I am getting this error from the dev. console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUserMedia')
at t.BrowserMultiFormatReader.<anonymous> (library@latest:15:29847)
at Generator.next (<anonymous>)
at library@latest:15:27264
at new Promise (<anonymous>)
at P (library@latest:15:27009)
at t.BrowserMultiFormatReader.decodeFromConstraints (library@latest:15:29776)
at t.BrowserMultiFormatReader.<anonymous> (library@latest:15:29708)
at Generator.next (<anonymous>)
at library@latest:15:27264
at new Promise (<anonymous>)

Trying on Chrome 98.0.4758.87

Samsung Galaxy S10+ Android 12

I thought the problem can be because of I am using http not https on localhost. But I am not sure.

Any ideas?

Thanks in advance.