如何使用JavaScript或jQuery控制html5-qrcode扫码时的torch（手电筒）功能？

你使用的官方v2.0.12版本html5-qrcode未集成手电筒控制逻辑，直接在config里加torch: true不会生效。iOS 14.7.1的Safari支持网页控制手电筒，只需满足安全上下文（HTTPS/localhost）、已获取后置摄像头权限两个前提即可实现，具体实现方式如下：

步骤1：新增HTML元素 #

在原有代码基础上添加手电筒切换按钮，建议升级库版本到已兼容手电筒控制的最新版：

<button id="torchToggle" style="margin:10px 0;">开启手电筒</button>
<div id="reader" width="350px"></div>
<script src="https://unpkg.com/html5-qrcode@2.3.8/dist/html5-qrcode.min.js"></script>

步骤2：修改JS逻辑，添加手电筒控制 #

const html5QrCode = new Html5Qrcode("reader");
const torchToggleBtn = document.getElementById('torchToggle');
let currentTrack = null;
let torchEnabled = false;

// 扫码成功回调
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
  html5QrCode.stop();
  alert(decodedText);
};

// 扫描配置
const config = { 
  fps: 60, 
  qrbox: 275, 
  aspectRatio: 1.0
};

// 启动扫描
html5QrCode.start(
  { facingMode: { exact: "environment"} }, 
  config, 
  qrCodeSuccessCallback
).then(() => {
  // 扫描启动成功后获取媒体流轨道
  const mediaStream = html5QrCode.getMediaStream();
  if (!mediaStream) return;
  currentTrack = mediaStream.getVideoTracks()[0];
  
  // 检查设备是否支持手电筒
  if (currentTrack.getCapabilities().torch) {
    torchToggleBtn.style.display = 'block';
    // 绑定切换事件
    torchToggleBtn.addEventListener('click', toggleTorch);
  }
}).catch(err => {
  console.error("扫描启动失败:", err);
});

// 手电筒切换逻辑
function toggleTorch() {
  if (!currentTrack) return;
  torchEnabled = !torchEnabled;
  currentTrack.applyConstraints({
    advanced: [{ torch: torchEnabled }]
  }).then(() => {
    torchToggleBtn.innerText = torchEnabled ? '关闭手电筒' : '开启手电筒';
  }).catch(err => {
    console.error("手电筒切换失败:", err);
    torchEnabled = !torchEnabled;
  });
}

iOS适配注意事项 #

• 必须等扫描界面完全渲染、摄像头启动成功后再调用手电筒控制逻辑，不能在html5QrCode.start()执行完成前操作
• 如果低版本库没有getMediaStream()方法，可以手动存下getUserMedia返回的流对象，再控制轨道参数
• 不要在非安全上下文（HTTP公网环境）下测试，功能会被浏览器限制

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