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

function startScanner() {
  // ...
  if (qrreader == null) { // 仅在 qrreader 为 null 时创建新实例
    qrreader = new Html5Qrcode(qrreaderElementId);
    // ...
  }
  // ...
}

// 在脚本的顶部或模块作用域内声明并初始化扫描器实例
// 确保 qrreaderElementId 指向正确的HTML元素ID
const qrreaderElementId = "reader"; // 假设HTML中有一个ID为'reader'的元素
const qrReader = new Html5Qrcode(qrreaderElementId);
let isWaitingForResponse = false; // 用于防止重复扫描的标志
let waitingTimeout = null; // 用于管理超时定时器

// QR reader settings
const qrConstraints = {
  facingMode: "environment"
};
const qrConfig = {
  fps: 10,
  qrbox: {
    width: 250,
    height: 250
  }
};

// 扫描成功回调函数
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
  if (isWaitingForResponse) {
    console.log("Still waiting for the previous scan...");
    return;
  }

  isWaitingForResponse = true; // 设置等待标志

  console.log(`Message: ${decodedText}, Result: ${JSON.stringify(decodedResult)}`);
  $("#barcode_search").val(decodedText); // 设置条码字段值

  // 在处理数据前停止扫描器，释放摄像头资源
  stopScanner();

  $("#update_form").trigger("submit"); // 触发表单提交

  // 可选：如果需要一个短暂停顿再重新启动，可以在这里使用setTimeout
  // 但更推荐在AJAX成功回调中启动，确保数据处理完毕
};

// 扫描错误回调函数
const qrCodeErrorCallback = (errorMessage) => {
  console.error(errorMessage);
};

// 启动扫描器
const startScanner = () => {
  $("#reader").show();
  $("#product_info").hide();
  qrReader.start(
    qrConstraints,
    qrConfig,
    qrCodeSuccessCallback,
    qrCodeErrorCallback
  ).catch((err) => {
    console.error("Failed to start scanner:", err);
  });
};

// 停止扫描器
const stopScanner = () => {
  // 清除任何可能存在的等待定时器
  if (waitingTimeout) {
    clearTimeout(waitingTimeout);
    waitingTimeout = null;
  }
  isWaitingForResponse = false; // 重置等待标志

  $("#reader").hide();
  $("#product_info").show();
  qrReader.stop().catch((err) => {
    console.error("Failed to stop scanner:", err);
  });
};

<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>

<!-- 引入必要的库 -->
<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>

// 在脚本的顶部或模块作用域内声明并初始化扫描器实例
const qrreaderElementId = "reader";
const qrReader = new Html5Qrcode(qrreaderElementId);
let isWaitingForResponse = false;
let waitingTimeout = null;

// ... (qrConstraints, qrConfig, qrCodeSuccessCallback, qrCodeErrorCallback, startScanner, stopScanner 函数定义如上) ...

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

// 2. 绑定表单提交事件
$("#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 response:", res);
      if (res.status === "success") {
        // AJAX成功后，重新启动扫描器
        startScanner();
      } else {
        // 处理错误情况，例如显示错误消息
        console.error("Form submission failed:", res.message);
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error("AJAX error:", textStatus, errorThrown);
      // 即使AJAX失败，也可以选择重新启动扫描器，或者让用户手动操作
      startScanner();
    }
  });
});