解决Html5Qrcode扫描器在AJAX提交后无法自动重启的问题

let qrreader = null; // 假设这是一个全局变量或在外部定义

function startScanner() {
  // ...
  if (qrreader == null) { // 问题点：只在qrreader为null时创建实例
    qrreader = new Html5Qrcode(qrreaderElementId);
    // ... 配置和启动逻辑 ...
  }
}

<button id="start_reader">启动二维码扫描器</button>

<form id="update_form">
  <div id="reader"></div> <!-- 扫描器将渲染到此元素 -->
  <input type="text" id="barcode_search" placeholder="扫描结果条码" readonly />
  <button type="submit" id="barcode_submit" style="display: none;">提交</button> <!-- 隐藏，通过JS触发 -->
  <div id="product_info" style="display: none;">此处显示产品信息</div>
</form>

<!-- 引入jQuery和Html5Qrcode库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

// 1. 创建 Html5Qrcode 实例（单例）
// "reader" 是 HTML 中用于渲染扫描器的元素的 ID
const qrReader = new Html5Qrcode("reader");

// 2. 定义扫描器配置
const qrConstraints = {
  facingMode: "environment" // 使用后置摄像头
};
const qrConfig = {
  fps: 10, // 每秒帧数
  qrbox: {
    width: 250,
    height: 250
  } // 扫描框大小
};

// 3. 定义扫描成功回调函数
const qrOnSuccess = (decodedText, decodedResult) => {
  stopScanner(); // 扫描成功后立即停止扫描器，避免重复扫描
  console.log(`扫描结果: ${decodedText}, 详细信息: ${JSON.stringify(decodedResult)}`);

  // 将扫描结果填充到输入框
  $("#barcode_search").val(decodedText);
  // 触发表单提交，此处可以改为直接发起AJAX请求，避免依赖DOM事件
  $("#update_form").trigger("submit");
};

// 4. 定义扫描错误回调函数 (可选)
const qrOnError = (errorMessage) => {
  console.error("扫描错误:", errorMessage);
};

// 5. 定义启动扫描器的方法
const startScanner = () => {
  $("#reader").show();
  $("#product_info").hide();
  qrReader.start(
    qrConstraints,
    qrConfig,
    qrOnSuccess,
    qrOnError // 添加错误回调
  ).catch((error) => {
    console.error("启动扫描器失败:", error);
    // 可以在此处添加用户友好的错误提示
  });
};

// 6. 定义停止扫描器的方法
const stopScanner = () => {
  $("#reader").hide();
  $("#product_info").show();
  // 检查扫描器是否正在运行，避免重复停止或对未运行的扫描器调用stop
  if (qrReader.is="running") { // 注意：Html5Qrcode没有is="running"属性，需要根据其API判断
      qrReader.stop().catch((error) => {
          console.error("停止扫描器失败:", error);
      });
  }
};

// 7. 绑定事件：按钮点击启动扫描器
$(document).on("click", "#start_reader", function() {
  startScanner();
});

// 8. 绑定事件：表单提交处理
$("#update_form").on("submit", function(evt) {
  evt.preventDefault(); // 阻止表单默认提交行为

  // 模拟AJAX请求
  $.ajax({
    type: "POST",
    url: "../my-scanner-script.php", // 替换为你的后端处理脚本
    data: $(this).serialize(), // 序列化表单数据
    dataType: "json",
    success: function(res) {
      console.log("AJAX响应:", res);
      if (res.status === "success") {
        // AJAX成功后，自动重启扫描器
        startScanner();
        // 清空条码输入框，为下一次扫描做准备
        $("#barcode_search").val("");
      } else {
        console.warn("表单处理失败:", res.message);
        // 可以显示错误信息给用户，并决定是否重启扫描器
        startScanner(); // 即使失败也可能需要用户重新扫描
      }
    },
    error: function(xhr, status, error) {
      console.error("AJAX请求错误:", status, error);
      // 处理网络或服务器错误，并重启扫描器
      startScanner();
    }
  });
});