VeryUtils JavaScript Barcode Scanner SDK: Scan 1D and 2D Barcodes from Video Camera

This example shows how to scan any supported 1D and 2D barcodes with VeryUtils JavaScript Barcode Scanner SDK Library from the device video camera. If more than one video input devices are available (for example front and back camera) the example shows how to read them and use a select to change the input device.

Start Reset

Result:

Example: Scan from Video Camera (Live Barcode Detection) with VeryUtils JavaScript Barcode Scanner SDK

<script type="text/javascript" src="https://veryutils.com/demo/js/javascript-barcode-scanner-sdk/js-barcode-scanner.min.js?ver=2.00"></script>

<script type="text/javascript">
    let soundInitialized = false;
    const sound = document.getElementById("success-sound");

    function initializeSound() {
        if (!soundInitialized) {
            sound.play().then(() => {
                sound.pause();
                sound.currentTime = 0;
                soundInitialized = true;
            }).catch(error => {
                console.log("Sound initialization error:", error);
            });
        }
    }

    function playSuccessSound() {
        initializeSound();
        if (soundInitialized) {
            sound.play().catch(error => {
                console.log("Sound play error:", error);
            });
        }
    }

    window.addEventListener('load', function() {
        let selectedDeviceId;
        const codeReader = new VeryUtilsBarcodeScanner.BrowserMultiFormatReader()
        console.log('VeryUtilsBarcodeScanner code reader initialized')
        codeReader.listVideoInputDevices()
            .then((videoInputDevices) => {
                const sourceSelect = document.getElementById('sourceSelect')
                selectedDeviceId = videoInputDevices[0].deviceId
                if (videoInputDevices.length >= 1) {
                    videoInputDevices.forEach((element) => {
                        const sourceOption = document.createElement('option')
                        sourceOption.text = element.label
                        sourceOption.value = element.deviceId
                        sourceSelect.appendChild(sourceOption)
                    })

                    sourceSelect.onchange = () => {
                        selectedDeviceId = sourceSelect.value;
                    };

                    const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                    sourceSelectPanel.style.display = 'block'
                }

                document.getElementById('startButton').addEventListener('click', () => {
                    codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
                        if (result) {
                            console.log(result)
                            document.getElementById('result').textContent = result.text
                            playSuccessSound();
                        }
                        if (err && !(err instanceof VeryUtilsBarcodeScanner.NotFoundException)) {
                            console.error(err)
                            document.getElementById('result').textContent = err
                        }
                    })
                    console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
                })

                document.getElementById('resetButton').addEventListener('click', () => {
                    codeReader.reset()
                    document.getElementById('result').textContent = '';
                    console.log('Reset.')
                })

            })
            .catch((err) => {
                console.error(err)
            })
    })

    document.body.addEventListener('click', initializeSound, {
        once: true
    });
</script>