从 Web浏览器扫描条形码

我创建了一个智能手机应用程序,但我的目标是让它从浏览器工作。

我创建了一个智能手机应用程序,但我的目标是让它从浏览器工作。

sample image enter image description here

这是我正在使用的示例代码。我很确定这个问题与相机优化有关...

'''

<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/normalize.css@8.0.0/normalize.css">
    <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/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... enter image description here

0

你是对的,当我放大并用你的代码用手机扫描它时,它似乎确实有效。问题是你需要电脑有一个漂亮的相机,甚至我的 MacBook 2021 的相机也不够好。所以他们需要像高清网络摄像头一样近距离接触。

enter image description here

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(203)
在给定时间内计算点击次数 /空格键javascript
上一篇
如何沙箱不受信任的用户提交的JavaScript内容
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(62条)