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

396384183 · 发表于 2023-7-31 08:58:02

支持开源~！感谢分享

jia201314973 · 发表于 2023-7-30 22:23:11

pipicool · 发表于 2023-7-30 18:27:32

学习一下

一指温柔 · 发表于 2023-7-30 08:48:55

感谢分享

zhyl8888 · 发表于 2023-7-30 07:16:59

看起来很不错哦，收藏之~~~ 谢谢LZ啦！！！

qqmqqg · 发表于 2023-7-30 06:52:10

666666666666666666

君九 · 发表于 2023-7-29 18:12:49

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

qqmqqg · 发表于 2023-7-29 16:17:56

6666666666666668888888888888888888

空竹 · 发表于 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>

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

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

<!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 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();
        video.srcObject.getTracks()[0].stop(); // 关闭摄像头
        clearInterval(timer); // 停止计时器
      }
      // 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>

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

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