zxing-js / browser

ZXing for JS's browser layer with decoding implementations for browser.
MIT License
222 stars 44 forks source link

Select box: videoInputSelectTarget --> retrieve only back end scanners #43

Open fydelio opened 3 years ago

fydelio commented 3 years ago

II've looked at this example Scan 1D/2D Code from Video Camera and noticed, that the select box only shows environment facing cameras. I looked at the code of it, copied it and just don't understand why. I copied the code from there (made slight modifications), but I always get all input devices.

let selectElement = this.videoInputSelectTarget

codeReader = new BrowserMultiFormatReader();
codeReader.listVideoInputDevices()
  .then((videoInputDevices) => {
       if (videoInputDevices.length >= 1) {
          videoInputDevices.forEach((element) => {
            const sourceOption = document.createElement('option')
            sourceOption.text = element.label
            sourceOption.value = element.deviceId
            selectElement.appendChild(sourceOption)
        })
    }
})

What modifications would I need to make to only get environment-facing cameras?

Overall, one good documentation with a documented example would really benefit this library.

odahcam commented 3 years ago

I always filter the elements by it's label values, like this: https://github.com/zxing-js/ngx-scanner/blob/42e6ad4f58fd235bd15d688d36050a4ea25fdc01/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L621-L630

It may be an impression of yours, but that page returns all the devices.

Overall, one good documentation with a documented example would really benefit this library.

Yeah, PRs are always welcome.