我创建了一个智能手机应用程序,但我的目标是让它从浏览器工作。
sample image
这是我正在使用的示例代码。我很确定这个问题与相机优化有关...
'''
<head>
<meta cht="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.googlea.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 cl="wrapper" style="padding-top:2em">
<section cl="container" id="demo-content">
<h1 cl="title">Scan barcode from Video Camera</h1>
<div>
<a cl="on" id="startButton">Start</a>
<a cl="on" 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...
0
你是对的，当我放大并用你的代码用手机扫描它时，它似乎确实有效。问题是你需要电脑有一个漂亮的相机，甚至我的 MacBook 2021 的相机也不够好。所以他们需要像高清网络摄像头一样近距离接触。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（21条）