如何使用Html5-QRCode为同一站点不同表单字段配置扫码填充功能

结论 #

不需要为每个字段单独创建Html5Qrcode实例，全局复用同一个实例即可，通过点击时记录目标输入字段的方式就能实现需求，相比多实例方案更节省系统资源，也不会出现重复申请摄像头权限、多实例冲突的问题。

实现方案 #

第一步：调整扫码按钮的HTML结构 #

给每个扫码按钮增加data-target自定义属性，属性值为对应需要填充的输入框的选择器，示例结构如下：

<!-- 字段1 -->
<input type="text" id="field1" name="field1">
<button class="qrscan" data-target="#field1">扫码填充</button>

<!-- 字段2 -->
<input type="text" id="field2" name="field2">
<button class="qrscan" data-target="#field2">扫码填充</button>

<!-- 扫描模态框保持不变 -->
<div class="modal" id="scanModal">
  <div id="qr-reader"></div>
</div>

第二步：调整JS逻辑 #

新增全局变量存储当前需要填充的目标输入框，点击按钮时先记录目标再唤起扫描，扫描成功后将解码内容填入对应字段：

// 存储当前扫码对应的目标输入框选择器
let currentScanTarget = ''
// 全局复用同一个扫描器实例
const html5QrCode = new Html5Qrcode("qr-reader")
const config = { fps: 10, qrbox: 250 }

// 扫码按钮点击事件
$('.qrscan').click(function () {
  // 记录当前点击按钮对应的目标输入框
  currentScanTarget = $(this).data('target')
  scanModal()
})

const qrCodeSuccessCallback = (decodedText, decodedResult) => {
  html5QrCode.stop()
  $('#scanModal').modal('hide')
  // 填充值到目标输入框
  if (currentScanTarget) {
    $(currentScanTarget).val(decodedText)
    // 填充完成后清空目标，避免后续误填
    currentScanTarget = ''
  }
}

var scanModal = function () {
  $('#scanModal').modal('show')
  // 启动前先判断是否已经在运行，避免重复启动报错
  if (html5QrCode.isScanning) {
    html5QrCode.stop().then(() => {
      html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
    })
    return
  }
  html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
}

注意事项 #

• 如果需要支持连续多次扫码，可根据业务需求调整逻辑，无需每次扫描结束后都销毁实例
• 如果出现摄像头调用异常，可以在模态框关闭的事件中补充html5QrCode.stop()逻辑，确保资源被释放

内容的提问来源于stack exchange，提问作者Rubick