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

最新推荐文章于 2023-10-07 19:52:54 发布

无敌惊心小同学

最新推荐文章于 2023-10-07 19:52:54 发布

阅读量126

点赞数

文章标签： html 前端 javascript

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

版权

html扫码解析，直接复制粘贴运行。细节自己研究。

<!DOCTYPE html>
<html>
<head>
  <title>一维码解析</title>
  <style>
    /* 添加样式，可以自定义显示结果的元素的外观 */
    #result {
      padding: 10px;
      border: 2px solid #ccc;
      font-size: 18px;
      margin-top: 20px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <h1>一维码解析</h1>
  <div id="result"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
  <script>
    // 在页面加载后执行
    document.addEventListener("DOMContentLoaded", function() {
      // 初始化QuaggaJS
      Quagga.init({
        inputStream: {
          name: "Live",
          type: "LiveStream",
          target: document.querySelector("#result"), // 显示结果的元素
          constraints: {
            facingMode: "environment" // 使用后置摄像头，如果是移动设备的话
          }
        },
        decoder: {
          readers: [
            "code_128_reader",
            "code_39_reader",
            "ean_reader",
            "upc_reader",
            // 在此添加其他支持的一维码类型
          ]
        }
      }, function(err) {
        if (err) {
          console.error("初始化失败：", err);
          return;
        }
        console.log("QuaggaJS初始化成功");
        Quagga.start(); // 开始解析
      });

      // 监听解析结果事件
      Quagga.onDetected(function(result) {
        console.log("解析结果：", result.codeResult.code);
        // 在页面上显示解析结果
        document.querySelector("#result").innerText = result.codeResult.code;
      });
    });
  </script>
</body>
</html>