网页版二维码扫描

最新推荐文章于 2023-09-20 13:38:05 发布

阿诺伯格

最新推荐文章于 2023-09-20 13:38:05 发布

阅读量2.4k

点赞数 1

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/qq_39075676/article/details/126997849

版权

前段时间做过一个二维码扫描，但是扫描质量不怎么样，所以我参考了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)
        })
    })