调用摄像头实时识别二维码

空竹 · 发表于 2023-7-29 10:44:49

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>QR Code Detection</title>
  <style>
    #video {
      width: 100%;
      max-width: 600px;
    }
  </style>
</head>
<body>
  <h1>QR Code Detection</h1>
  <video id="video" playsinline></video>
  <button>点击扫码</button>

  <script src="jsQR.js"></script>
  <script>
    const video = document.getElementById('video');
    const resultInput = document.createElement('input');
    document.body.appendChild(resultInput);

    let frameCount = 0;
    let timer;

    // 浏览器支持检查
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function(stream) {
          video.srcObject = stream;
          video.play();
        })
        .catch(function(error) {
          console.error('操作用户媒体设备时出错：', error);
        });
    } else {
      console.error('不支持访问用户媒体设备');
    }

    function startQRCodeDetection() {
      timer = setInterval(function() {
        captureFrame();
        frameCount++;
        if (frameCount >= 10) { // 捕获了指定数量的帧后进行二维码识别
          clearInterval(timer);
          detectQRCode();
          frameCount = 0;
        }
      }, 100);
    }

    function captureFrame() {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      detectQRCode(imageData);
    }

    function detectQRCode(imageData) {
      const code = jsQR(imageData.data, imageData.width, imageData.height);
      if (code) {
        clearInterval(timer);
        resultInput.value = code.data;
        // 在这里执行二维码识别成功后的操作
        resetTimer();
        showSuccessMessage();
      }
      // else {
      //   resultInput.value = '未能识别二维码';
      // }
    }

    function resetTimer() {
      frameCount = 0;
      timer = setInterval(function() {
        captureFrame();
        frameCount++;
        if (frameCount >= 10) { // 捕获了指定数量的帧后重新开始识别
          clearInterval(timer);
          detectQRCode();
          frameCount = 0;
        }
      }, 100);
    }

    function showSuccessMessage() {
      // 在这里显示识别成功的提示消息
      alert('成功识别二维码！');
    }
  </script>
</body>
</html>

补充内容 (2023-12-4 12:46):
https://github.com/cozmo/jsQR

空竹 · 发表于 2023-7-29 11:25:02

本帖最后由空竹于 2023-7-29 11:36 编辑

<!DOCTYPE html>
<html>
<head>
  <title>QR码识别</title>
  <style>
#video {
   width: 100%;
   max-width: 600px;
}
  </style>
</head>
<body>
  <h1>QR码识别</h1>
  <video id="video" playsinline></video>
  <button onclick="startQRCodeDetection()">点击扫码</button>

  <script src="jsQR.js"></script>
  <script>
const video = document.getElementById('video');
const resultInput = document.createElement('input');
document.body.appendChild(resultInput);

let timer;

function startQRCodeDetection() {
   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
      .then(function (stream) {
         video.srcObject = stream;
         video.play();
         timer = setInterval(function () {
            captureFrame();
         }, 1000);
      })
      .catch(function (error) {
         console.error('操作用户媒体设备时出错：', error);
      });
   } else {
      console.error('不支持访问用户媒体设备');
   }
}

function captureFrame() {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
   const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
   detectQRCode(imageData);
}

function detectQRCode(imageData) {
   const code = jsQR(imageData.data, imageData.width, imageData.height);
   if (code) {
      resultInput.value = code.data;
      // 在这里执行二维码识别成功后的操作
      clearInterval(timer); // 停止定时器
      showSuccessMessage();
      video.srcObject.getTracks()[0].stop(); // 关闭摄像头
   }
   // else {
   // resultInput.value = '未能识别二维码';
   // }
}

function showSuccessMessage() {
   // 在这里显示识别成功的提示消息
   alert('成功识别二维码！');
}
  </script>
</body>
</html>

wyd168 · 发表于 2023-12-4 12:11:28

JS哪里有下啊

空竹 · 发表于 2023-11-26 11:22:40

啊鑫发表于 2023-11-26 02:28
QRjs 可能是重点代码没放出来啊啊

这个是Github有的一个库，贴出来就太长了！！！

啊鑫 · 发表于 2023-11-26 02:28:39

QRjs 可能是重点代码没放出来啊啊

像神一样飘渺 · 发表于 2023-10-31 09:04:36

感谢分享，很给力！~

adroot · 发表于 2023-8-26 16:44:27

支持开源~！感谢分享

chenzao1 · 发表于 2023-8-9 17:11:11

学习一下

fastdao · 发表于 2023-8-1 15:18:32

spldj145 · 发表于 2023-8-1 09:24:09

虽然用不到，但是分享是传统美德，谢谢分享，大功大德！

mingyunzhidao · 发表于 2023-7-31 23:30:54

支持开源~！感谢分享

		自动登录	找回密码
密码			注册

[Web源码] 调用摄像头实时识别二维码

评分

点评