Html5Qrcode 扫描器在 AJAX 提交后自动重启的解决方案

function startScanner() {
  // ...
  if (qrreader == null) { // 问题所在：只在 qrreader 为 null 时初始化
    qrreader = new Html5Qrcode(qrreaderElementId);
    // ...
  }
  // ...
}

let qrreader = null; // 确保 qrreader 是一个全局或作用域内可访问的变量

function startScanner() {
  // 显示扫描区域并隐藏产品信息
  $('#reader').show();
  $('#product_info').hide();

  // 如果 qrreader 尚未初始化，则进行初始化
  if (!qrreader) {
    qrreader = new Html5Qrcode(qrreaderElementId);
  }

  const videoConstraints = {
    facingMode: "environment"
  };

  const config = {
    fps: 10,
    qrbox: {
      width: 250,
      height: 250
    }
  };

  let isWaitingForResponse = false; // 此变量应在每次扫描开始时重置或妥善管理

  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);
    $("#barcode_submit").trigger('click'); // 触发提交按钮，开始处理数据

    // 扫描成功后，停止扫描器并显示产品信息
    qrreader.stop().then(() => {
      $('#reader').hide();
      $('#product_info').show();
      // 在处理完成后，重置等待状态，以便下次扫描
      setTimeout(() => {
        isWaitingForResponse = false;
      }, 5000); // 5秒后允许下一次扫描
    }).catch(console.error);
  };

  const qrCodeErrorCallback = (errorMessage) => {
    console.log(errorMessage);
  };

  // 每次调用 startScanner 时，都尝试启动扫描
  qrreader.start(
    videoConstraints,
    config,
    qrCodeSuccessCallback,
    qrCodeErrorCallback
  ).catch((error) => {
    console.log("Failed to start scanner:", error);
  });
}

// 确保在每次扫描成功后显式停止扫描器
// 这将允许在 AJAX 成功回调中再次调用 startScanner 时，
// 扫描器能够从一个干净的状态重新启动。

// 提交表单的 AJAX 逻辑保持不变
$('#update_form').on('submit', function(event) {
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: '../my-scanner-script.php',
    data: $(this).serialize(),
    dataType: 'json',
    success: function(response) {
      if (response.status === 'success') {
        // 成功后尝试启动扫描器
        startScanner();
      }
    },
    error: function(xhr, status, error) {
      console.error("AJAX Error:", status, error);
    }
  });
});

<button id="start_reader">开始扫描</button>

<form id="update_form">
  <div id="reader"></div>
  <input type="text" id="barcode_search" placeholder="扫描结果将显示在此">
  <button type="submit" id="barcode_submit" style="display:none;">提交</button> <!-- 隐藏提交按钮，通过 JS 触发 -->
  <div id="product_info" style="display:none;">
    <p>产品信息区域</p>
    <!-- 这里可以显示扫描到的产品详情 -->
  </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>

// 创建一个 Html5Qrcode 实例，确保它只被创建一次
const qrReader = new Html5Qrcode("reader");

// QR 扫描器设置
const qrConstraints = {
  facingMode: "environment" // 使用后置摄像头
};
const qrConfig = {
  fps: 10, // 帧率
  qrbox: {
    width: 250,
    height: 250
  } // 扫描框大小
};

// 扫描成功回调函数
const qrOnSuccess = (decodedText, decodedResult) => {
  stopScanner(); // 扫描成功后立即停止扫描器
  console.log(`扫描结果: ${decodedText}, 详情: ${JSON.stringify(decodedResult)}`);
  $("#barcode_search").val(decodedText); // 将解码文本设置到输入框
  $("#update_form").trigger("submit"); // 触发表单提交到后端
};

// 启动扫描器的方法
const startScanner = () => {
  $("#reader").show(); // 显示扫描区域
  $("#product_info").hide(); // 隐藏产品信息区域
  qrReader.start(
    qrConstraints,
    qrConfig,
    qrOnSuccess,
    (errorMessage) => { // 错误回调
      console.error("QR Code Scan Error:", errorMessage);
    }
  ).catch(console.error); // 捕获启动扫描器的错误
};

// 停止扫描器的方法
const stopScanner = () => {
  $("#reader").hide(); // 隐藏扫描区域
  $("#product_info").show(); // 显示产品信息区域
  // 仅当扫描器正在运行时才尝试停止，防止报错
  if (qrReader.is = qrReader.getState() === Html5QrcodeSupportedState.SCANNING) {
      qrReader.stop().catch(console.error);
  }
};

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

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

  $.ajax({
    type: "POST",
    url: "../my-scanner-script.php", // 后端处理脚本路径
    data: $(this).serialize(), // 序列化表单数据
    dataType: "json", // 期望返回 JSON 数据
    success: function(res) {
      console.log("AJAX 响应:", res);
      if (res.status === "success") {
        // 如果后端处理成功，则重新启动扫描器
        startScanner();
      } else {
        console.error("表单处理失败:", res.message);
        // 可以根据需要显示错误信息或重新启动扫描器
      }
    },
    error: function(xhr, status, error) {
      console.error("AJAX 错误:", status, error);
      // 处理 AJAX 错误，例如重新启动扫描器
      startScanner();
    }
  });
});