'Barcode scanning from web browser

I am working on a web based barcode scanner that needs to scan the PDF417 barcode off a driver's license. I found a JavaScript that works when scanning sample printed barcodes like below but it does not work on an actual license. I have created a smartphone app that does work but my goal is to get it working from a browser.

sample image

Here is the sample code I am working with. I am pretty sure that the issue has something to do with camera optimization...

'''

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZXing Barcode Scan</title>

    <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/[email protected]/normalize.css">
    <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/[email protected]/dist/milligram.min.css">
</head>

<body>

    <main class="wrapper" style="padding-top:2em">

        <section class="container" id="demo-content">
            <h1 class="title">Scan barcode from Video Camera</h1>


            <div>
                <a class="button" id="startButton">Start</a>
                <a class="button" id="resetButton">Reset</a>
            </div>

            <div style="padding: 0px; width: 100%; max-height: 200px; overflow:hidden; border: 1px solid gray">
                <video id="video" style="width: 100%;"></video>
            </div>

            <div id="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">Change video source:</label>
                <select id="sourceSelect" style="max-width:400px">
                </select>
            </div>

            <label>Result:</label>
            <pre><code id="result"></code></pre>

        </section>
    </main>

    <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
    <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) => {
                    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.decodeOnceFromVideoDevice(selectedDeviceId, 'video').then((result) => {
                            console.log(result)
                            document.getElementById('result').textContent = result.text
                    }).catch((err) => {
                        console.error(err)
                        document.getElementById('result').textContent = err
        })
        console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
        })

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

        })
                .catch((err) => {
                    console.error(err)
                })
        })
    </script>

</body>

</html>

'''

Here is a sample of a barcode I cannot scan...

javascript barcode-scanner

Solution 1:^[1]

You are right, when I zoom in and scan it with a phone with your code it does seem to work. The problem is then that you need the computer to have a nice camera, not even my MacBook 2021's camera is good enough. So they would need like an HD webcam to get up close.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Obsidianlab

'Barcode scanning from web browser

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]