html5-qrcode 实现扫码

HTML5-QRCode 是一个使用 JavaScript 和 HTML5 的库，可以在网页上实现二维码扫描功能。以下是使用 HTML5-QRCode 实现扫码的基本步骤和示例代码：

1. 引入 HTML5-QRCode 库：

<script src="https://rawgit.com/mebjas/html5-qrcode/master/html5-qrcode.min.js"></script>

2. 准备一个用于显示结果的元素，比如一个 div：

<div id="qr-reader-results"></div>

3. 使用 HTML5-QRCode 扫描二维码：

function onScanSuccess(decodedText, decodedResult) {
  // 扫描成功后的回调函数
  // 处理扫描结果，例如显示在页面上
  document.getElementById('qr-reader-results').innerHTML = decodedText;
}
 
function onScanError(error) {
  // 扫描出错的回调函数
  // 处理错误，例如显示错误信息
  document.getElementById('qr-reader-results').innerHTML = error;
}
 
// 开始扫描
HTML5QRCode.scanCamera(
  document.getElementById('qr-reader'), // 扫描的视频元素
  onScanSuccess, // 成功时的回调
  onScanError, // 错误时的回调
  { fps: 10, // 帧率
    qrbox: 250 // 二维码扫描框的大小
  }
);

确保你的网页中有一个视频输入元素（通常是 video 标签）用于显示摄像头的实时画面：

<video id="qr-reader" width="250" height="250"></video>

这个示例代码展示了如何使用 HTML5-QRCode 库来扫描用户摄像头捕获的视频流中的二维码。当二维码被扫描并解码后，会调用 onScanSuccess 回调函数，并在页面上显示解码后的文本。如果扫描过程中出现错误，会调用 onScanError 函数，并显示错误信息。