：HTML5手机网页有原生扫码识别扫条形码和二维码吗？

​

HTML5 手机网页有原生扫码能力，主要通过 BarcodeDetector API 实现，但其兼容性存在明显限制，在生产环境中通常需要配合降级方案使用，要求 HTTPS 环境。

🎯 原生方案：BarcodeDetector API

这是浏览器原生提供的条形码/二维码检测接口，属于 Barcode Detection API 的一部分。它支持检测多种格式，包括 qr_code、ean_13、code_128、data_matrix 等一维和二维条码。

基本用法非常简单，无需引入外部库：

if ('BarcodeDetector' in window) {
  const detector = new BarcodeDetector({ formats: ['qr_code', 'ean_13'] });
  const barcodes = await detector.detect(imageOrVideoFrame);
}

不过，它目前仍是一个实验性功能，并非所有浏览器都支持。

⚠️ 浏览器兼容性现状

这是原生方案最大的痛点，兼容性缺口很大，在不同平台上表现差异明显：

关键结论：在 Android 端 Chromium 浏览器中可以直接使用原生 API；但在 iOS 和 Firefox 中无法依赖它。

🛠️ 跨浏览器解决方案

由于原生 API 兼容性不足，生产项目中通常采用 “原生优先 + 降级回退” 的策略。推荐使用以下成熟的开源库，它们内部会优先尝试 BarcodeDetector，不可用时自动回退到 JavaScript 解码引擎：

如果只需要最简单的实现，可以直接引入 html5-qrcode，几行代码即可完成扫码功能：

<div id="reader"></div>
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
  new Html5Qrcode("reader").start(
    { facingMode: "environment" },
    { fps: 10 },
    (decodedText) => console.log(decodedText)
  );
</script>

📌 补充要点

无论使用哪种方案，都必须满足以下前提条件：

1. HTTPS 安全上下文：摄像头访问 (getUserMedia) 和 BarcodeDetector 都要求在 HTTPS 环境下运行（localhost 除外）。

2. 用户授权：首次使用时浏览器会弹出摄像头权限请求，需要用户明确允许。

3. 兜底方案：建议始终预留“从相册选择图片识别”或“手动输入”的备选路径，以应对权限被拒或识别失败的情况。

总结：HTML5 有原生扫码 API (BarcodeDetector)，在 Android Chromium 浏览器中可直接使用，但在 iOS Safari 和 Firefox 中不可用。生产环境推荐使用 html5-qrcode 等成熟库，以“原生优先、降级回退”的方式实现跨浏览器兼容。