2025年网页版二维码扫描

科技前沿 • 2025-03-09 22:20 • 阅读 22

大家好，我是讯享网，很高兴认识大家。

前段时间做过一个二维码扫描，但是扫描质量不怎么样，所以我参考了zxing二维码扫描之后，改定了一下，你别说还可以，话不多说了，上代码。

1.先是HTML部分(index.html)

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="ZXing for JS">
  <title>网页版二维码扫描</title>
</head>
<body>
  <main class="wrapper" style="padding-top:2em;text-align:center;" >
    <section class="container" id="demo-content">
      <div >
		<button class="button" id="startButton" style="background-color:pink;border-color:pink;width:100px;height:30px">Start</button>
		&nbsp;&nbsp;&nbsp;
		<button class="button" id="resetButton" style="background-color:pink;border-color:pink;width:100px;height:30px">Reset</button>
      </div>
	  <br/>
      <div>
        <video id="video"  style="border: 1px solid gray"></video>
      </div>
    </section>
  </main>
  <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
  <script type="text/javascript" src="./js/qrcode.js"></script>
</body>
</html>

讯享网

2.JS部分（qrcode.js）

讯享网 window.addEventListener('load', function () { let selectedDeviceId; const codeReader = new ZXing.BrowserMultiFormatReader() console.log('ZXing code reader initialized') codeReader.listVideoInputDevices() .then((videoInputDevices) => { const sourceSelect = document.createElement('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.createElement('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 window.location.href=result } if (err && !(err instanceof ZXing.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) }) })

2025年网页版二维码扫描

相关推荐