Users with multiple webcams cannot select which one to use for QR code scanning (Polkadot Vault)

[alecdwm]

It should be possible to get a list of video inputs using the enumerateDevices api.

With that list, we can show a dropdown when # of video inputs > 1.

If the user selects a device with the dropdown, we can use the deviceId parameter to getUserMedia:

getUserMedia({
  video: {
    deviceId: {
      exact: myExactCameraOrBustDeviceId,
    },
  },
})

The tricky part, is that our call to getUserMedia is nested inside of react-qr-reader, which in turn is nested inside of @polkadot/react-qr.

So, we need to fork react-qr-reader to add a deviceId property to its QrReader component (which is imported as just Reader inside of @polkadot/react-qr).

Then, we need to fork @polkadot/react-qr to expose this new property on the QrScanAddress and QrScanSignature components.

Maybe we can even get our forks PR'd back upstream?