html摄像头扫码解析通用二维码版

无敌惊心小同学

已于 2023-07-29 22:47:23 修改

阅读量286

点赞数

文章标签： html 前端

于 2023-07-29 22:37:39 首次发布

本文链接：https://blog.csdn.net/qq_15011887/article/details/132001058

版权

想做进销存的可能遇到添加货品扫码搜索商品，想传视频的但是算了吧麻烦。
直接复制粘贴再运行细节自己百度。

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 QR Code Scanner</title>
  <meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>
<body>
  <h1>HTML5 QR Code Scanner</h1>
  <p>请允许浏览器访问您的摄像头，并将二维码置于摄像头视野中。</p>
  <video id="video" width="300" height="300" autoplay></video>
  <canvas id="canvas" width="300" height="300" style="display:none;"></canvas>
  <p id="result"></p>
  <script>
    // 获取视频元素和画布元素
    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var result = document.getElementById("result");

    // 检查浏览器是否支持 navigator.mediaDevices.getUserMedia 方法
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问用户的摄像头
      navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        // 将视频流设置为视频元素的源
        video.srcObject = stream;
        video.play();
        // 每隔一段时间，从视频元素中抓取一帧图像，并绘制到画布上
        setInterval(function() {
          context.drawImage(video, 0, 0, 300, 300);
          // 获取画布上的图像数据
          var imageData = context.getImageData(0, 0, 300, 300);
          // 使用 jsQR 库解析图像数据中的二维码
          var code = jsQR(imageData.data, imageData.width, imageData.height);
          // 如果解析成功，显示解析结果，否则显示等待扫描的提示
          if (code) {
            result.textContent = "二维码内容：" + code.data;
          } else {
            result.textContent = "等待扫描...";
          }
        }, 500);
      }).catch(function(err) {
        // 如果发生错误，显示错误信息
        result.textContent = "发生错误：" + err.message;
      });
    } else {
      // 如果浏览器不支持，显示不支持的提示
      result.textContent = "对不起，您的浏览器不支持此功能，请使用其他浏览器。";
    }
  </script>
</body>
</html>