I am building a project that uses the ZXing library to scan barcodes. Currently the code I have is working for iOS device opening up the rear camera but when testing using android device it opens up the front camera. Is there a way I can always force the rear camera to be used on any device? Please see working code below:

    <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) => {
                    if (videoInputDevices.length < 1) {
                        console.log('No video devices found');
                        return;
                    }

                    selectedDeviceId = videoInputDevices[0].deviceId;

                    codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
                        if (result) {
                            console.log(result);
                            var barcode = result;
                            //this.window.alert(barcode);
                            if (String(barcode).charAt(0) == 'L') {
                                document.getElementById('result').textContent = result.text;
                                document.getElementById('result').style.color = "green";
                                var previousurl = document.referrer;
                                window.location.href = previousurl + "&BarCode=" + result.text;
                            }
                            else {

                                document.getElementById('result').textContent = result.text;
                                document.getElementById('result').style.color = "red";
                                window.alert("Incorrect Barcode scan value.  Please try again.")
                            }

                        }
                        if (err && !(err instanceof ZXing.NotFoundException)) {
                            console.error(err);
                            document.getElementById('result').textContent = err;
                        }
                    })
                    console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
                })
                .catch((err) => {
                    console.error(err)
                })
        })

    </script>

I am building a project that uses the ZXing library to scan barcodes. Currently the code I have is working for iOS device opening up the rear camera but when testing using android device it opens up the front camera. Is there a way I can always force the rear camera to be used on any device? Please see working code below:

    <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) => {
                    if (videoInputDevices.length < 1) {
                        console.log('No video devices found');
                        return;
                    }

                    selectedDeviceId = videoInputDevices[0].deviceId;

                    codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
                        if (result) {
                            console.log(result);
                            var barcode = result;
                            //this.window.alert(barcode);
                            if (String(barcode).charAt(0) == 'L') {
                                document.getElementById('result').textContent = result.text;
                                document.getElementById('result').style.color = "green";
                                var previousurl = document.referrer;
                                window.location.href = previousurl + "&BarCode=" + result.text;
                            }
                            else {

                                document.getElementById('result').textContent = result.text;
                                document.getElementById('result').style.color = "red";
                                window.alert("Incorrect Barcode scan value.  Please try again.")
                            }

                        }
                        if (err && !(err instanceof ZXing.NotFoundException)) {
                            console.error(err);
                            document.getElementById('result').textContent = err;
                        }
                    })
                    console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
                })
                .catch((err) => {
                    console.error(err)
                })
        })

    </script>

• javascript
• android
• android-camera
• zxing
• zxing-js

Share Improve this question Follow asked Aug 10, 2020 at 12:00 techietalktechietalk 11922 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

remove selectedDeviceId and use undefined

codeReader.decodeFromVideoDevice(undefined, 'video', (result, err) => {
                        if (result) {

documentation says if you use undefined it will automatically choose the camera, preferring the main (environment facing) camera if more are available.

The error occurs because codeReader.getVideoInputDevices() returns different result