HTML5扫码实现方案

黑白极简的 H5 扫码方案，思路清爽、依赖少。用getUserMedia打开摄像头，用BarcodeDetector或jsQR读码，响应也快。日常场景挺多：登录确认、核销、抽奖入场。权限弹窗别忽略，HTTPS、后置摄像头优先，弱光加补光按钮，用户体验会好多。

移动端优先的实现路径，先写个index.html挂上video与canvas，再用requestAnimationFrame做逐帧解析，不卡顿，还不错。iOS 上WKWebView对摄像头权限比较挑，Safari 15+好多，老机型就用input type="file"兜底，嗯，省心。

两种解码路线都蛮实用：原生BarcodeDetector简单、性能稳；纯前端jsQR/ZXing兼容更广。你要轻量就走原生，要全端覆盖就上库。别忘了给出取景框和加载态，失败提示也要友好，不然用户会懵：到底扫到了没？

调试小贴士也说两句。用https://本地调试可配vite --https，画面方向用object-fit拉伸；样式里加position: absolute的遮罩，体验更像原生扫码。给段可直接跑的骨架，复制就能用，改下按钮和样式就行。

<!-- index.html -->
<;video id="preview" playsinline autoplay muted>;</video>;
<;canvas id="scan" class="hidden">;
<;button id="torch">切换补光<;/button>;
<;script type="module">
  const video = document.getElementById('preview');
  const canvas = document.getElementById('scan');
  const ctx = canvas.getContext('2d');
  const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
  video.srcObject = stream;
  const track = stream.getVideoTracks()[0];

const detect = window.BarcodeDetector
    ? async () => (await new BarcodeDetector({ formats: ['qr_code'] }).detect(video))[0]?.rawValue
    : async () => { ctx.drawImage(video,0,0,canvas.width=video.videoWidth,canvas.height=video.videoHeight); return jsQR(ctx.getImageData(0,0,canvas.width,canvas.height).data, canvas.width, canvas.height)?.data };
async function loop(){ const v = await detect(); if(v){ alert('QR:'+v); track.stop(); return; } requestAnimationFrame(loop); }
  video.onloadedmetadata = () => loop();
document.getElementById('torch').onclick = async () => {
    const cap = track.getCapabilities?.();
    if(cap?.torch){ await track.applyConstraints({ advanced: [{ torch: !(track.getSettings().torch) }] }); }
  };
<;/script>;
<;style>;video{width:100vw;height:100vh;object-fit:cover;}#torch{position:fixed;right:16px;bottom:16px}</style>;
<;/code>;