listVideoInputDevices returns 'undefined' device id

[andydingfelder]

Description The function listVideoInputDevices() returns a empty (undefined) deviceID when calling under MacOS Chrome/Safari. Chrome and Safari are allowed to access Camera on MacOS security settings.

Under Window 10 (latest chrome version) it´s working.

To Reproduce

this._oMultiCodeDecoder = new ZXing.BrowserMultiFormatReader();
var aDevices = await this._oMultiCodeDecoder.listVideoInputDevices();

Desktop (MacBook Pro 16")

• MacOS BigSur
• Chrome (90.0.4430.93), Safari (
• Version [e.g. 22]

[andydingfelder]

After adding the side manually in chrome security settings the deviveId is filled properly and the video is shown. So I´m missing the popup which asks whether the site should be allowed for accessing camera.

[iainad]

I've recently experienced this too with v0.18.5. It was all fine on Brave [V1.24.86 (May 20, 2021)] (but on Safari it failed (not tested Chrome).

My work around is to explicitly request permission before enumerating the video devices. Something like this ensures that the permissions are explicitly checked seems to do the trick.

import { BrowserMultiFormatReader } from '@zxing/library/esm'
const codeReader = new BrowserMultiFormatReader()
navigator.mediaDevices.getUserMedia({ video: true })
  .then(() => {
    codeReader.listVideoInputDevices()
      .then((videoInputDevices) => {
        // store the video devices for select options that can then be used to start the scan
      })
  })

anyway just in case anyone else is stuck thought it might help. More info here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

[github-actions[bot]]

Stale issue message